From ab50b6129544dec0f02e98676ce8d59a2bbe6dbe Mon Sep 17 00:00:00 2001
From: Rakantor <rakantor.dev@gmail.com>
Date: Sun, 7 May 2023 21:45:55 +0200
Subject: [PATCH] Change page content max width

---
 assets/variables.scss |   6 +++
 pages/bio.vue         | 116 +++++++++++++++++++++---------------------
 2 files changed, 65 insertions(+), 57 deletions(-)

diff --git a/assets/variables.scss b/assets/variables.scss
index a5b23c2..cd04bee 100644
--- a/assets/variables.scss
+++ b/assets/variables.scss
@@ -33,6 +33,12 @@ p a {
     }
 }
 
+.page-content {
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .v-overlay__scrim {
     background: rgb(var(--v-theme-background)) !important;
     opacity: 0.9 !important;
diff --git a/pages/bio.vue b/pages/bio.vue
index 5de95d3..fa92e7c 100644
--- a/pages/bio.vue
+++ b/pages/bio.vue
@@ -1,61 +1,63 @@
 <template>
-  <v-row>
-    <v-col cols="12">
-      <span class="text-h5 text-md-h4 text-high-emphasis">
-        {{ $t('bioTitle') }}
-      </span>
-    </v-col>
-    <v-col cols="12">
-      <v-sheet color="transparent" class="text-medium-emphasis">
-        <i18n-t keypath="bioBody" tag="p">
-          <template v-slot:mmorpg>
-            <NuxtLink :href="mmorpgWikiUrl" target="_blank">MMORPG</NuxtLink>
-          </template>
-          <template v-slot:htl>
-            <NuxtLink :href="htlWikiUrl" target="_blank">HTL</NuxtLink>
-          </template>
-          <template v-slot:bi>
-            <NuxtLink :href="biWikiUrl" target="_blank">{{ $t('bi') }}</NuxtLink>
-          </template>
-          <template v-slot:yearsOfExp>
-            {{ yearsOfExp }}
-          </template>
-        </i18n-t>
-        <br/>
-        <p>{{ $t('bioSubtitle') }}</p>
-      </v-sheet>
-    </v-col>
-    <v-col v-for="set, ind in sets" :key="ind" cols="12">
-      <v-card>
-        <v-card-item>
-          <v-card-title>{{ $t(set.title) }}</v-card-title>
-        </v-card-item>
-        <v-card-text class="text-center">
-          <v-row>
-            <v-col v-for="(v, i) in set.data" :key="i" cols="12">
-              <v-row justify="center">
-                <v-col cols="auto" v-for="(value, index) in v" :key="index">
-                  <v-btn
-                    variant="text"
-                    :size="brandIconSize(value.emphasis)"
-                    color="primary"
-                    class="mx-1"
-                    :href="`https://${value.url}`"
-                    target="_blank"
-                  >
-                    <v-icon :icon="value.icon" :size="brandIconSize(value.emphasis) - 10"></v-icon>
-                  </v-btn>
-                  <span class="text-overline text-primary d-flex flex-column ma-0 pa-0">
-                    {{ value.title }}
-                  </span>
-                </v-col>
-              </v-row>
-            </v-col>
-          </v-row>
-        </v-card-text>
-      </v-card>
-    </v-col>
-  </v-row>
+  <div class="page-content">
+    <v-row>
+      <v-col cols="12">
+        <span class="text-h5 text-md-h4 text-high-emphasis">
+          {{ $t('bioTitle') }}
+        </span>
+      </v-col>
+      <v-col cols="12">
+        <v-sheet color="transparent" class="text-medium-emphasis">
+          <i18n-t keypath="bioBody" tag="p">
+            <template v-slot:mmorpg>
+              <NuxtLink :href="mmorpgWikiUrl" target="_blank">MMORPG</NuxtLink>
+            </template>
+            <template v-slot:htl>
+              <NuxtLink :href="htlWikiUrl" target="_blank">HTL</NuxtLink>
+            </template>
+            <template v-slot:bi>
+              <NuxtLink :href="biWikiUrl" target="_blank">{{ $t('bi') }}</NuxtLink>
+            </template>
+            <template v-slot:yearsOfExp>
+              {{ yearsOfExp }}
+            </template>
+          </i18n-t>
+          <br/>
+          <p>{{ $t('bioSubtitle') }}</p>
+        </v-sheet>
+      </v-col>
+      <v-col v-for="set, ind in sets" :key="ind" cols="12">
+        <v-card>
+          <v-card-item>
+            <v-card-title>{{ $t(set.title) }}</v-card-title>
+          </v-card-item>
+          <v-card-text class="text-center">
+            <v-row>
+              <v-col v-for="(v, i) in set.data" :key="i" cols="12">
+                <v-row justify="center">
+                  <v-col cols="auto" v-for="(value, index) in v" :key="index">
+                    <v-btn
+                      variant="text"
+                      :size="brandIconSize(value.emphasis)"
+                      color="primary"
+                      class="mx-1"
+                      :href="`https://${value.url}`"
+                      target="_blank"
+                    >
+                      <v-icon :icon="value.icon" :size="brandIconSize(value.emphasis) - 10"></v-icon>
+                    </v-btn>
+                    <span class="text-overline text-primary d-flex flex-column ma-0 pa-0">
+                      {{ value.title }}
+                    </span>
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </div>
 </template>
 
 <script>