both logo & icon + wallpaper

packages/client/src/pages/welcome.entrance.a.vue

@@ -8,8 +8,9 @@
 				:noTabCollapse="true"
 				:displayHomeButton="false"
 		/></template>
+		<div id="visitor-view">
 			<swiper
-			id="visitor-view"
+				class="swiper"
 				:round-lengths="true"
 				:touch-angle="25"
 				:threshold="10"
@@ -109,6 +110,7 @@
 					<XUsers v-if="isActive" />
 				</swiper-slide>
 			</swiper>
+		</div>
 	</MkStickyContainer>
 </template>
 
@@ -266,25 +268,31 @@ const popularPostsPagination = {
 #visitor-view {
 	margin-top: -55px;
 	padding-top: 55px;
+	.swiper {
+		margin-top: -55px;
+		padding-top: 55px;
 	}
-// 	:deep(.swiper-wrapper) {
+	@media (min-width: 1100px) {
-// 		mask: linear-gradient(to bottom, black 70%, transparent 95%);
+		.swiper {
-// 		padding-block: calc(2.5vw + 55px) 30vh;
+			mask: linear-gradient(to bottom, black 70%, transparent 97%);
-// 		margin-top: -55px;
+			-webkit-mask: linear-gradient(to bottom, black 70%, transparent 97%);
-// 		max-height: 100vh;
+			padding-block: calc(2.5vw + 55px) 30vh;
-// 		box-sizing: border-box;
+			margin-top: -55px;
-// 		overflow: hidden auto !important;
+			max-height: 100vh;
-// 	}
+			box-sizing: border-box;
-// 	&::before {
+			overflow: hidden auto !important;
-// 		content: "";
+		}
-// 		position: fixed;
+		&::before {
-// 		inset: 0;
+			content: "";
-// 		background-repeat: no-repeat;
+			position: fixed;
-// 		background-size: cover;
+			inset: 0;
-// 		background-position: center;
+			background-repeat: no-repeat;
-// 		opacity: .5;
+			background-size: cover;
+			background-position: center;
+			opacity: .5;
 			// filter: blur(4px);
-// 		background-image: v-bind("wallpaper");
+			background-image: v-bind("wallpaper");
-// 	}
+		}
-// }
+	}
+}
 </style>

packages/client/src/ui/visitor.vue

@@ -6,7 +6,7 @@
 			v-if="!isDesktop && mainRouter.currentRoute.value.name !== 'index'"
 		/>
 		<RouterView />
-		<footer class="powered-by">
+		<footer class="powered-by" v-if="mainRouter.currentRoute.value.name !== 'index'">
 			<MkA to="/">
 				<MkInstanceTicker :instance="meta"></MkInstanceTicker>
 				<small>{{ i18n.ts.poweredBy }}</small>

packages/client/src/ui/visitor/kanban.vue

@@ -27,13 +27,17 @@
 					<img 
 						class="logo" 
 						:src="
-							meta.logoImageUrl ||
 							$instance.iconUrl ||
 							$instance.faviconUrl ||
 							'/favicon.ico'
 						"
 					/>
-					<h1>
+					<img 
+						v-if="meta.logoImageUrl"
+						:src="meta.logoImageUrl"
+						class="logo"
+					/>
+					<h1 v-else>
 						<MkA to="/" class="link">{{ instanceName }}</MkA>
 					</h1>
 				</div>
@@ -315,6 +319,7 @@ function showMenu(ev) {
 		padding-top: min(56.25%, 70vh);
 		margin-bottom: calc(-100px - var(--radius));
 		mask: linear-gradient(to bottom, black, calc(100% - 50px), transparent);
+		-webkit-mask: linear-gradient(to bottom, black, calc(100% - 50px), transparent);
 		transition: min-height 0.4s, max-height 0.4s, filter 0.7s;
 		img {
 			position: absolute;
@@ -329,7 +334,7 @@ function showMenu(ev) {
 				opacity: 1 !important;
 			}
 			> .logo {
-				margin-top: -20px !important;
+				margin-top: -10px !important;
 			}
 		}
 	}
@@ -369,19 +374,20 @@ function showMenu(ev) {
 				opacity: .5;
 				clip-path: inset(55px 0 0 0 round var(--radius));
 				mask: linear-gradient(transparent 55px, #000 50px, transparent);
-				-webkit-mask: linear-gradient(
+				-webkit-mask: llinear-gradient(transparent 55px, #000 50px, transparent);
-					transparent 55px,
-					#000 50px,
-					transparent
-				);
 			}
 			> .logo {
-				height: 90px;
+				height: 80px;
-				min-width: 90px;
+				min-width: 80px;
 				max-width: 100%;
 				border-radius: var(--radius);
 				margin-top: -5px;
 				transition: transform 0.4s cubic-bezier(0.5, 0, 0, 1);
+				&:last-child {
+					display: block;
+					margin-inline: auto;
+					margin-block: .5em 1em !important;
+				}
 			}
 			> h1 {
 				margin-block: 0.7em;
@@ -412,10 +418,7 @@ function showMenu(ev) {
 				position: relative;
 				max-height: calc(9em + 50px);
 				mask: linear-gradient(black calc(100% - 64px), transparent);
-				-webkit-mask: linear-gradient(
+				-webkit-mask: linear-gradient(black calc(100% - 64px), transparent);
-					black calc(100% - 64px),
-					transparent
-				);
 			}
 		}
 		.announcements {