From 532fa9c5f9cb4c06420109fee7391494cdd73535 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 5 Aug 2021 12:20:27 +0900
Subject: [PATCH] :art:

---
 src/client/pages/doc.vue | 175 ++++++++++++++++++++-------------------
 1 file changed, 90 insertions(+), 85 deletions(-)

diff --git a/src/client/pages/doc.vue b/src/client/pages/doc.vue
index 58b352d638..2e315887ac 100644
--- a/src/client/pages/doc.vue
+++ b/src/client/pages/doc.vue
@@ -1,9 +1,11 @@
 <template>
 <div class="qyqbqfal" v-size="{ max: [500] }">
-	<div class="title">{{ title }}</div>
-	<div class="body" v-html="body"></div>
-	<div class="footer">
-		<MkLink :url="`https://github.com/misskey-dev/misskey/blob/master/src/docs/${lang}/${doc}.md`" class="at">{{ $ts.docSource }}</MkLink>
+	<div class="main">
+		<div class="title">{{ title }}</div>
+		<div class="body" v-html="body"></div>
+		<div class="footer">
+			<MkLink :url="`https://github.com/misskey-dev/misskey/blob/master/src/docs/${lang}/${doc}.md`" class="at">{{ $ts.docSource }}</MkLink>
+		</div>
 	</div>
 </div>
 </template>
@@ -105,103 +107,106 @@ export default defineComponent({
 <style lang="scss" scoped>
 .qyqbqfal {
 	padding: 32px;
-	max-width: 800px;
-	margin: 0 auto;
 	background: var(--panel);
 
 	&.max-width_500px {
 		padding: 16px;
 	}
 
-	> .title {
-		font-size: 1.5em;
-		font-weight: bold;
-		padding: 0 0 0.75em 0;
-		margin: 0 0 1em 0;
-		border-bottom: solid 2px var(--divider);
-	}
+	> .main {
+		max-width: 800px;
+		margin: 0 auto;
 
-	> .body {
-		> *:first-child {
-			margin-top: 0;
+		> .title {
+			font-size: 1.5em;
+			font-weight: bold;
+			padding: 0 0 0.75em 0;
+			margin: 0 0 1em 0;
+			border-bottom: solid 2px var(--divider);
 		}
 
-		> *:last-child {
-			margin-bottom: 0;
-		}
+		> .body {
+			> *:first-child {
+				margin-top: 0;
+			}
 
-		::v-deep(a) {
-			color: var(--link);
-		}
+			> *:last-child {
+				margin-bottom: 0;
+			}
 
-		::v-deep(blockquote) {
-			display: block;
-			margin: 8px;
-			padding: 6px 0 6px 12px;
-			color: var(--fg);
-			border-left: solid 3px var(--fg);
-			opacity: 0.7;
+			::v-deep(a) {
+				color: var(--link);
+			}
 
-			p {
-				margin: 0;
+			::v-deep(blockquote) {
+				display: block;
+				margin: 8px;
+				padding: 6px 0 6px 12px;
+				color: var(--fg);
+				border-left: solid 3px var(--fg);
+				opacity: 0.7;
+
+				p {
+					margin: 0;
+				}
+			}
+
+			::v-deep(h2) {
+				font-size: 1.25em;
+				padding: 0 0 0.5em 0;
+				margin: 1.5em 0 1em 0;
+				border-bottom: solid 0.5px var(--divider);
+			}
+
+			::v-deep(table) {
+				width: 100%;
+				max-width: 100%;
+				overflow: auto;
+			}
+
+			::v-deep(kbd.group) {
+				display: inline-block;
+				padding: 2px;
+				border: 1px solid var(--divider);
+				border-radius: 4px;
+				box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+			}
+
+			::v-deep(kbd.key) {
+				display: inline-block;
+				padding: 6px 8px;
+				border: solid 0.5px var(--divider);
+				border-radius: 4px;
+				box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+			}
+
+			::v-deep(code) {
+				display: inline-block;
+				font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
+				tab-size: 2;
+				background: #272822;
+				color: #f8f8f2;
+				border-radius: 6px;
+				padding: 4px 6px;
+			}
+
+			::v-deep(pre) {
+				background: #272822;
+				color: #f8f8f2;
+				border-radius: 6px;
+				padding: 12px 16px;
+
+				> code {
+					padding: 0;
+				}
 			}
 		}
 
-		::v-deep(h2) {
-			font-size: 1.25em;
-			padding: 0 0 0.5em 0;
-			margin: 1.5em 0 1em 0;
-			border-bottom: solid 0.5px var(--divider);
+		> .footer {
+			padding: 1.5em 0 0 0;
+			margin: 1.5em 0 0 0;
+			border-top: solid 2px var(--divider);
 		}
-
-		::v-deep(table) {
-			width: 100%;
-			max-width: 100%;
-			overflow: auto;
-		}
-
-		::v-deep(kbd.group) {
-			display: inline-block;
-			padding: 2px;
-			border: 1px solid var(--divider);
-			border-radius: 4px;
-			box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-		}
-
-		::v-deep(kbd.key) {
-			display: inline-block;
-			padding: 6px 8px;
-			border: solid 0.5px var(--divider);
-			border-radius: 4px;
-			box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-		}
-
-		::v-deep(code) {
-			display: inline-block;
-			font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
-			tab-size: 2;
-			background: #272822;
-			color: #f8f8f2;
-			border-radius: 6px;
-			padding: 4px 6px;
-		}
-
-		::v-deep(pre) {
-			background: #272822;
-			color: #f8f8f2;
-			border-radius: 6px;
-			padding: 12px 16px;
-
-			> code {
-				padding: 0;
-			}
-		}
-	}
-
-	> .footer {
-		padding: 1.5em 0 0 0;
-		margin: 1.5em 0 0 0;
-		border-top: solid 2px var(--divider);
 	}
 }
 </style>