style: Adjust page container styles

vuejs-jp · Mar 28, 2024 · 1162650 · 1162650
1 parent 3301f0b
commit 1162650
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 26 deletions.
diff --git a/apps/web/app/layouts/default.vue b/apps/web/app/layouts/default.vue
@@ -1,13 +1,13 @@
 <script setup>
 const i18nHead = useLocaleHead({
-  addSeoAttributes: true
+  addSeoAttributes: true,
 })
 useHead({
   htmlAttrs: {
-    lang: i18nHead.value.htmlAttrs.lang
+    lang: i18nHead.value.htmlAttrs.lang,
   },
   link: [...(i18nHead.value.link || [])],
-  meta: [...(i18nHead.value.meta || [])]
+  meta: [...(i18nHead.value.meta || [])],
 })
 </script>
 
@@ -20,6 +20,5 @@ useHead({
 
 <style scoped>
 main {
-  margin-top: 85px;
 }
 </style>
diff --git a/apps/web/app/pages/about.vue b/apps/web/app/pages/about.vue
@@ -18,10 +18,7 @@ const { t } = useI18n()
       </NuxtLink>
     </div>
     <p>{{ t('about') }}</p>
-    <NuxtLinkLocale
-      to="/"
-      class="link"
-    >
+    <NuxtLinkLocale to="/" class="link">
       {{ t('home') }}
     </NuxtLinkLocale>
   </div>
@@ -30,6 +27,8 @@ const { t } = useI18n()
 <style scoped>
 .wrapper {
   margin: 16px;
+  --header-height: calc(var(--unit) * 10);
+  padding-top: var(--header-height);
 }
 .lang {
   display: flex;
@@ -51,4 +50,10 @@ const { t } = useI18n()
   color: blue;
   text-decoration: underline;
 }
-</style>
+
+@media (--mobile) {
+  .wrapper {
+    --header-height: calc(var(--unit) * 8);
+  }
+}
+</style>
diff --git a/apps/web/app/pages/code-of-conduct.vue b/apps/web/app/pages/code-of-conduct.vue
@@ -61,7 +61,8 @@ const { color } = useColor()
 
 <style scoped>
 section {
-  padding: 120px 20px 120px;
+  --header-height: calc(var(--unit) * 10);
+  padding: calc(var(--header-height) + 120px) 20px 120px;
   background: color(--color-white);
 }
 .coc-root {
@@ -92,7 +93,7 @@ section {
   }
   &::v-deep a:hover {
     opacity: 0.4;
-    transition: .2s;
+    transition: 0.2s;
   }
 }
 .actions {
@@ -102,6 +103,9 @@ section {
   width: 320px;
 }
 @media (--mobile) {
+  section {
+    --header-height: calc(var(--unit) * 8);
+  }
   .title {
     font-size: 28px;
   }

diff --git a/apps/web/app/pages/privacy.vue b/apps/web/app/pages/privacy.vue
@@ -31,22 +31,22 @@ useHead({
 
 <template>
   <main>
-    <div 
+    <div
       class="privacy-root"
       :style="{
         backgroundColor: color('white'),
         color: color('vue-blue'),
-      }">
-      <h2 
-        class="section-title">
-        {{ t("privacy.title") }}
+      }"
+    >
+      <h2 class="section-title">
+        {{ t('privacy.title') }}
       </h2>
       <div class="markdown-root">
         <MarkDownText path="privacy" class="explain" />
       </div>
       <div class="back">
         <VFButton class="back-button" fixed-width href="/" secondary>
-          {{ t("privacy.button") }}
+          {{ t('privacy.button') }}
         </VFButton>
       </div>
     </div>
@@ -55,8 +55,8 @@ useHead({
 </template>
 
 <style scoped>
-@import url("../assets/base.css");
-@import url("../assets/media.css");
+@import url('../assets/base.css');
+@import url('../assets/media.css');
 
 /* margin等が5の倍数なので、一旦定数で定義 */
 
@@ -65,6 +65,8 @@ useHead({
   display: flex;
   flex-direction: column;
   align-items: center;
+  --header-height: calc(var(--unit) * 10);
+  padding-top: var(--header-height);
 
   & .section-title {
     /* モバイル表示時に上書きしたいので、:styleではなくCSS内で指定 */
@@ -80,7 +82,7 @@ useHead({
 .markdown-root {
   --tablet-width: 768px;
   max-width: var(--tablet-width);
-  
+
   & :deep(h2) {
     margin-top: 40px;
     margin-bottom: 20px;
@@ -113,8 +115,8 @@ useHead({
     list-style-type: disc;
   }
   /* 箇条書き2段目 */
-  & :deep(ul) li ul{
-    list-style-type: "- ";
+  & :deep(ul) li ul {
+    list-style-type: '- ';
     padding-inline-start: 15px;
   }
   & :deep(ol) li {
@@ -139,6 +141,7 @@ useHead({
 
 @media (--mobile) {
   .privacy-root {
+    --header-height: calc(var(--unit) * 8);
     & .section-title {
       --section-title-font-size: var(--font-size-heading400);
       --section-title-line-height: var(--line-height-heading400);
@@ -151,24 +154,24 @@ useHead({
       margin-top: 10px;
       margin-bottom: 15px;
     }
-  
+
     & :deep(h2) a {
       --markdown-font-size-h2: var(--markdown-font-size-heading200);
       --markdown-line-height-h2: var(--markdown-line-height-heading200);
     }
-  
+
     & :deep(p),
     & :deep(ul) li,
     & :deep(ol) li {
       --markdown-font-size-body: var(--markdown-font-size-body300);
       --markdown-line-height-body: var(--markdown-line-height-body300);
     }
-  } 
+  }
   .back {
     width: 100%;
     padding: 0 23.5px;
     margin-top: 30px;
     margin-bottom: 60px;
   }
 }
-</style>
+</style>