feat: 非ログイン時に表示されるトップページのスタイルを選択できるように

packages/frontend/src/pages/welcome.entrance.simple.vue

@@ -0,0 +1,69 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div v-if="meta" :class="$style.root">
+	<MkFeaturedPhotos :class="$style.bg"/>
+	<div :class="$style.logoWrapper">
+		<div :class="$style.poweredBy">Powered by</div>
+		<img :src="misskeysvg" :class="$style.misskey"/>
+	</div>
+	<div :class="$style.contents">
+		<MkVisitorDashboard/>
+	</div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
+import misskeysvg from '/client-assets/misskey.svg';
+import MkVisitorDashboard from '@/components/MkVisitorDashboard.vue';
+import { instance as meta } from '@/instance.js';
+</script>
+
+<style lang="scss" module>
+.root {
+	height: 100cqh;
+	overflow: auto;
+	overscroll-behavior: contain;
+}
+
+.bg {
+	position: fixed;
+	top: 0;
+	right: 0;
+	width: 80vw; // 100%からshapeの幅を引いている
+	height: 100vh;
+}
+
+.logoWrapper {
+	position: fixed;
+	top: 36px;
+	left: 36px;
+	flex: auto;
+	color: #fff;
+	user-select: none;
+	pointer-events: none;
+}
+
+.poweredBy {
+	margin-bottom: 2px;
+}
+
+.misskey {
+	width: 120px;
+
+	@media (max-width: 450px) {
+		width: 100px;
+	}
+}
+
+.contents {
+	position: relative;
+	width: min(430px, calc(100% - 32px));
+	margin: auto;
+	padding: 100px 0 100px 0;
+}
+</style>