トップページデザインを改修

src/client/ui/visitor/b.vue

@@ -1,14 +1,14 @@
 <template>
-<div class="mk-app">
-	<div class="side" v-if="!narrow && $route.path !== '/'">
-		<XKanban class="kanban" full/>
+<div class="mk-app" :style="{ backgroundImage: root ? `url(${ $store.state.instance.meta.backgroundImageUrl })` : 'none' }">
+	<div class="side" v-if="!narrow">
+		<XKanban class="kanban" full :transparent="root" :powered-by="root"/>
 	</div>
 
 	<div class="main">
-		<XKanban class="banner" :full="$route.path === '/'" v-if="narrow || $route.path === '/'"/>
+		<XKanban class="banner" :full="root" :transparent="root" :powered-by="root" v-if="narrow"/>
 
 		<div class="contents">
-			<XHeader class="header" :info="pageInfo" v-if="$route.path !== '/'"/>
+			<XHeader class="header" :info="pageInfo" v-if="!root"/>
 			<main>
 				<router-view v-slot="{ Component }">
 					<transition :name="$store.state.device.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
@@ -16,7 +16,7 @@
 					</transition>
 				</router-view>
 			</main>
-			<div class="powered-by">
+			<div class="powered-by" v-if="!root">
 				<b><MkA to="/">{{ host }}</MkA></b>
 				<small>Powered by <a href="https://github.com/syuilo/misskey" target="_blank">Misskey</a></small>
 			</div>
@@ -97,6 +97,10 @@ export default defineComponent({
 				'h|/': this.help
 			};
 		},
+
+		root(): boolean {
+			return this.$route.path === '/';
+		},
 	},
 
 	watch: {
@@ -182,6 +186,9 @@ export default defineComponent({
 .mk-app {
 	display: flex;
 	min-height: 100vh;
+	background-position: center;
+	background-size: cover;
+	background-attachment: fixed;
 
 	> .side {
 		width: 500px;
@@ -199,6 +206,7 @@ export default defineComponent({
 
 	> .main {
 		flex: 1;
+		min-width: 0;
 
 		> .banner {
 		}

src/client/ui/visitor/kanban.vue

@@ -1,7 +1,6 @@
 <template>
-<div class="rwqkcmrc" :style="{ backgroundImage: `url(${ $store.state.instance.meta.backgroundImageUrl })` }">
-	<div class="back"></div>
-	<div class="fade" v-if="full"></div>
+<div class="rwqkcmrc" :style="{ backgroundImage: transparent ? 'none' : `url(${ $store.state.instance.meta.backgroundImageUrl })` }">
+	<div class="back" :class="{ transparent }"></div>
 	<div class="contents">
 		<div class="wrapper">
 			<h1 v-if="meta" :class="{ full }">
@@ -27,6 +26,10 @@
 						</section>
 					</MkPagination>
 				</div>
+				<div class="powered-by" v-if="poweredBy">
+					<b><MkA to="/">{{ host }}</MkA></b>
+					<small>Powered by <a href="https://github.com/syuilo/misskey" target="_blank">Misskey</a></small>
+				</div>
 			</template>
 		</div>
 	</div>
@@ -50,11 +53,21 @@ export default defineComponent({
 	},
 
 	props: {
-		full :{
+		full: {
 			type: Boolean,
 			required: false,
 			default: false,
-		}
+		},
+		transparent: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+		poweredBy: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
 	},
 
 	data() {
@@ -107,17 +120,12 @@ export default defineComponent({
 		left: 0;
 		width: 100%;
 		height: 100%;
-		background: var(--bg);
-		opacity: 0.5;
-	}
+		background: rgba(0, 0, 0, 0.3);
 
-	> .fade {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 300px;
-		background: linear-gradient(rgba(#000, 0.5), transparent);
+		&.transparent {
+			-webkit-backdrop-filter: blur(12px);
+			backdrop-filter: blur(12px);
+		}
 	}
 
 	> .contents {
@@ -223,6 +231,20 @@ export default defineComponent({
 					}
 				}
 			}
+
+			> .powered-by {
+				padding: 28px;
+				font-size: 14px;
+				text-align: center;
+				border-top: 1px solid rgba(255, 255, 255, 0.5);
+				color: #fff;
+
+				> small {
+					display: block;
+					margin-top: 8px;
+					opacity: 0.5;
+				}
+			}
 		}
 	}
 }