🎨

src/client/components/global/spacer.vue

@@ -0,0 +1,70 @@
+<template>
+<div ref="root" :class="$style.root" :style="{ padding: margin + 'px' }">
+	<div ref="content" :class="$style.content">
+		<slot></slot>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
+
+export default defineComponent({
+	props: {
+		contentMax: {
+			type: Number,
+			required: false,
+			default: null,
+		}
+	},
+
+	setup(props, context) {
+		let ro: ResizeObserver;
+		const root = ref<HTMLElement>(null);
+		const content = ref<HTMLElement>(null);
+		const margin = ref(0);
+		const adjust = (rect: { width: number; height: number; }) => {
+			if (rect.width > (props.contentMax || 500)) {
+				margin.value = 32;
+			} else {
+				margin.value = 12;
+			}
+		};
+
+		onMounted(() => {
+			ro = new ResizeObserver((entries) => {
+				adjust({
+					width: entries[0].borderBoxSize[0].inlineSize,
+					height: entries[0].borderBoxSize[0].blockSize,
+				});
+			});
+			ro.observe(root.value);
+
+			if (props.contentMax) {
+				content.value.style.maxWidth = `${props.contentMax}px`;
+			}
+		});
+
+		onUnmounted(() => {
+			ro.disconnect();
+		});
+
+		return {
+			root,
+			content,
+			margin,
+		};
+	},
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	box-sizing: border-box;
+	width: 100%;
+}
+
+.content {
+	margin: 0 auto;
+}
+</style>

src/client/components/index.ts

@@ -14,6 +14,7 @@ import loading from './global/loading.vue';
 import error from './global/error.vue';
 import ad from './global/ad.vue';
 import header from './global/header.vue';
+import spacer from './global/spacer.vue';
 
 export default function(app: App) {
 	app.component('I18n', i18n);
@@ -30,4 +31,5 @@ export default function(app: App) {
 	app.component('MkError', error);
 	app.component('MkAd', ad);
 	app.component('MkHeader', header);
+	app.component('MkSpacer', spacer);
 }

src/client/pages/explore.vue

@@ -2,7 +2,8 @@
 <div>
 	<MkHeader :info="header"/>
 
-	<div class="lznhrdub _root">
+	<MkSpacer :content-max="1200">
+		<div class="lznhrdub">
 			<div v-if="tab === 'local'">
 				<div class="localfedi7 _block _isolated" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
 					<header><span>{{ $t('explore', { host: meta.name || 'Misskey' }) }}</span></header>
@@ -73,6 +74,7 @@
 				<XUserList v-if="query" class="_gap" :pagination="searchPagination" ref="search"/>
 			</div>
 		</div>
+	</MkSpacer>
 </div>
 </template>
 
@@ -214,12 +216,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.lznhrdub {
-	max-width: 1400px;
-	margin: 0 auto;
-	padding: 16px;
-}
-
 .localfedi7 {
 	color: #fff;
 	padding: 16px;

src/client/pages/notifications.vue

@@ -1,9 +1,11 @@
 <template>
 <div>
 	<MkHeader :info="header"/>
-	<div class="clupoqwt" v-size="{ min: [800] }">
+	<MkSpacer :content-max="800">
+		<div class="clupoqwt">
 			<XNotifications class="notifications" @before="before" @after="after" :include-types="includeTypes" :unread-only="tab === 'unread'"/>
 		</div>
+	</MkSpacer>
 </div>
 </template>
 
@@ -90,14 +92,5 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .clupoqwt {
-	&.min-width_800px {
-		background: var(--bg);
-		padding: 32px 0;
-
-		> .notifications {
-			max-width: 800px;
-			margin: 0 auto;
-		}
-	}
 }
 </style>

src/client/themes/d-botanical.json5

@@ -20,7 +20,7 @@
 		renote: '@accent',
 		mention: 'rgb(212, 153, 76)',
 		mentionMe: 'rgb(212, 210, 76)',
-		hashtag: 'rgb(76, 212, 180)',
+		hashtag: '#5bcbb0',
 		link: '@accent',
 	},
 }