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

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;
+				}
+			}
 		}
 	}
 }