style(pc): apply styles to the implementation page

Author: genj11

apps/web/app/components/namecard/CreationProcess.vue

@@ -1,32 +1,93 @@
 <script setup lang="ts">
 import { useI18n } from '#i18n'
+import { useColor, useTypography } from '@vuejs-jp/composable'
 import MarkDownText from '~/components/MarkDownText.vue'
 import SvgProcessDown from '~/public/namecard/process-down.svg?component'
 
 const { t } = useI18n()
+const { fontWeight, fontSize } = useTypography()
+const { color } = useColor()
 </script>
 <template>
-  <div>
-    <h2>{{ t('namecard.creation-process.title') }}</h2>
-    <ol>
+  <div class="creation-process-root">
+    <h2
+      :style="{
+        fontWeight: fontWeight('heading/700'),
+        fontSize: fontSize('heading/300'),
+        color: color('vue-blue'),
+      }"
+      class="title"
+    >
+      {{ t('namecard.creation-process.title') }}
+    </h2>
+    <ol
+      :style="{
+        fontWeight: fontWeight('body/400'),
+        fontSize: fontSize('body/400'),
+        color: color('vue-blue'),
+      }"
+      class="process-list"
+    >
       <li>
         <MarkDownText path="namecard_process_1" />
-        <SvgProcessDown />
+        <SvgProcessDown class="down-icon" />
       </li>
       <li>
         <MarkDownText path="namecard_process_2" />
-        <SvgProcessDown />
+        <SvgProcessDown class="down-icon" />
       </li>
       <li>
         <MarkDownText path="namecard_process_3" />
-        <SvgProcessDown />
+        <SvgProcessDown class="down-icon" />
       </li>
       <li>
         <MarkDownText path="namecard_process_4" />
       </li>
     </ol>
-    <MarkDownText path="namecard_process_alert" />
+    <div
+      :style="{
+        color: color('vue-blue'),
+      }"
+      class="process-alert"
+    >
+      <MarkDownText path="namecard_process_alert" />
+    </div>
   </div>
 </template>
-<style scoped></style>
+<style scoped>
+@import url('~/assets/media.css');
+
+.creation-process-root {
+  padding: calc(var(--unit) * 3) calc(var(--unit) * 4);
+  background-color: #e7eff7;
+  line-height: 1.8;
+}
+.title {
+  margin-bottom: calc(var(--unit) * 3);
+  text-align: center;
+}
+.process-list {
+  padding: 0;
+  & :deep(p) {
+    margin-bottom: calc(var(--unit) * 2);
+  }
+  & :deep(a) {
+    color: inherit;
+  }
+}
+.process-alert {
+  & :deep(h3) {
+    font-size: 1.125rem;
+    font-weight: 500;
+  }
+  & :deep(a) {
+    color: inherit;
+  }
+}
+.down-icon {
+  display: flex;
+  justify-content: center;
+  margin: 0 auto calc(var(--unit) * 2.5);
+}
+</style>
 `

apps/web/app/content/en/namecard_process_1.md

@@ -1 +1 @@
-①　事前に[Vue Fes Japan 2024のチケット](./#ticket)をご購入ください。
+①　Please purchase [a ticket for Vue Fes Japan 2024](./#ticket) in advance.

apps/web/app/content/ja/namecard_process_1.md

@@ -1 +1 @@
-①　Please purchase [a ticket for Vue Fes Japan 2024](./#ticket) in advance.
+①　事前に[Vue Fes Japan 2024のチケット](./#ticket)をご購入ください。

apps/web/app/content/ja/namecard_process_alert.md

@@ -1,7 +1,11 @@
 ### 【ご注意】
 
-- 当日印刷されたネームカードをお受け取りいただくには、ステータスが「完成」になっている必要があります。
-- 注文番号の照合は自動で行われ、入力後最大12時間ほどで完了します。
-- 最新のステータスを表示するには画面の再読み込みが必要です。
-- 注文番号の照合が完了すると、ステータスが「完成」になります。ステータスが「注文番号照合失敗」のまま数日経っても変化しない場合、[お問い合わせフォーム](./#form)よりお問い合わせください。
-- 編集期限までは再編集が可能です。
+・当日印刷されたネームカードをお受け取りいただくには、ステータスが「完成」になっている必要があります。
+
+・注文番号の照合は自動で行われ、入力後最大12時間ほどで完了します。
+
+・最新のステータスを表示するには画面の再読み込みが必要です。
+
+・注文番号の照合が完了すると、ステータスが「完成」になります。ステータスが「注文番号照合失敗」のまま数日経っても変化しない場合、[お問い合わせフォーム](./#form)よりお問い合わせください。
+
+・編集期限までは再編集が可能です。

apps/web/app/layouts/namecard-base.vue

@@ -28,7 +28,9 @@ const { color } = useColor()
 
 .namecard-base-layout {
   --header-height: calc(var(--unit) * 10);
-  padding-top: calc(var(--header-height) + var(--unit) * 15);
+  --content-padding: calc(var(--unit) * 15);
+  padding-top: calc(var(--header-height) + var(--content-padding));
+  padding-bottom: var(--content-padding);
   max-width: 769px;
   margin: 0 auto;
 }

apps/web/app/pages/namecard/index.vue

@@ -85,7 +85,7 @@ function handleSignIn(provider: Extract<AuthProvider, 'github' | 'google'>) {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 198px;
+  width: 238px;
   height: 66px;
   margin: 0 auto calc(var(--unit) * 5);
 }