Enhance/brushup

apps/web/app/components/FormPageSection.vue

@@ -98,9 +98,11 @@ const updateDetail = (e: any) => {
 </template>
 
 <style scoped>
+@import url("~/assets/media.css");
+
 section {
   padding: 120px 20px 120px;
-  background: url(/form-bg.png), linear-gradient(rgba(255, 255, 255, 0.8), rgba(235, 240, 245, 0.8));
+  background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(235, 240, 245, 0.8));
   background-blend-mode: soft-light;
 }
 .form-root {
@@ -136,10 +138,10 @@ form {
   margin: 0 auto;
   width: 260px;
 }
-@supports (-webkit-touch-callout: none) {
-  section {
-    background: -webkit-linear-gradient(rgba(255, 255, 255, 0.8), rgba(235, 240, 245, 0.8)), url(/form-bg.png); /* for iOS */
-    background-size: 200%; /* for iOS */
+
+@media (--mobile) {
+  .form-button {
+    width: 100%;
   }
 }
 </style>

apps/web/app/components/SponsorPageSection.vue

@@ -66,7 +66,7 @@ const { color } = useColor()
 @import url("~/assets/sample.css");
 
 .sponsor {
-  --sponsor-padding: calc(var(--unit) * 7) 0;
+  --sponsor-padding: calc(var(--unit) * 5.25) 0;
   --sponsor-body-padding: calc(var(--unit) * 6) calc(var(--unit) * 8);
   --sponsor-term-margin: calc(var(--unit) * 5) auto 0;
 
@@ -108,7 +108,7 @@ const { color } = useColor()
 .sponsor-buttons {
   display: flex;
   justify-content: center;
-  margin-top: calc(var(--unit) * 4);
+  margin-top: calc(var(--unit) * 5);
 }
 
 .sponsor-button {
@@ -141,7 +141,12 @@ const { color } = useColor()
     --sponsor-term-margin: calc(var(--unit) * 5) auto 0;
   }
 
+  .sponsor-subtitle {
+    margin-top: calc(var(--unit) * 3.75);
+  }
+
   .sponsor-buttons {
+    margin-top: calc(var(--unit) * 3.75);
     display: block;
   }
 

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

@@ -1 +1 @@
-Vue.js に関わる人々が集まる Vue Fes Japan2024をより良いカンファレンスにするため、スポンサー募集をします。スポンサープランなどの詳しい内容は資料をご参照ください。
+Vue.js に関わる人々が集まる Vue Fes Japan 2024 をより良いカンファレンスにするため、スポンサー募集をします。スポンサープランなどの詳しい内容は資料をご参照ください。

apps/web/app/lang/ja.json

@@ -24,7 +24,7 @@
     "form_name_placeholder": "山田太郎",
     "form_email_label": "メールアドレス",
     "form_text_label": "お問い合わせ内容",
-    "submit": "送信",
+    "submit": "送信する",
     "submit_done": "メッセージ送信に成功しました。"
   },
   "message": {

apps/web/app/pages/code-of-conduct.vue

@@ -34,7 +34,6 @@ const { color } = useColor()
         <h1
           :style="{
             fontWeight: fontWeight('heading/700'),
-            fontSize: fontSize('heading/700'),
             color: color('vue-blue'),
           }"
         >
@@ -62,6 +61,8 @@ const { color } = useColor()
 </template>
 
 <style scoped>
+@import url("~/assets/media.css");
+
 section {
   --header-height: calc(var(--unit) * 10);
   padding: calc(var(--header-height) + 120px) 20px 120px;
@@ -77,17 +78,19 @@ section {
 }
 .title {
   text-align: center;
+  font-size: 45px;
 }
 .subtitle {
   display: grid;
   place-items: center;
   &::v-deep h2 {
     margin-top: 60px;
     font-weight: 700;
-    font-size: 32px;
+    font-size: 24px;
   }
   &::v-deep p {
     margin-top: 20px;
+    line-height: 1.8;
   }
   &::v-deep a {
     color: var(--color-vue-green);
@@ -104,12 +107,21 @@ section {
   margin: 0 auto;
   width: 320px;
 }
+
 @media (--mobile) {
   section {
     --header-height: calc(var(--unit) * 8);
+    padding: calc(var(--header-height) + 60px) 20px 60px;
+  }
+  .coc-root {
+    gap: 30px;
   }
   .title {
     font-size: 28px;
   }
+  .actions {
+    padding-top: 30px;
+    width: 100%;
+  }
 }
 </style>

packages/ui/components/common/CssResetButton.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="ButtonHTMLAttributes">
 const props = defineProps()
 </script>
 
 <template>
@@ -20,7 +20,7 @@
   background-color: transparent;
 }
 button:disabled {
-  opacity: 0.3;
+  opacity: 0.6;
   pointer-events: none;
 }
 </style>

packages/ui/components/common/Title.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import Typography from './Typography.vue'
 
 type TitleProps = {
   id: string
 }
 
 const props = defineProps<TitleProps>()
 </script>
 
 <template>
-  <Typography :id variant="heading/500" color="vue-blue">
+  <Typography :id variant="heading/700" color="vue-blue">
     <slot />
   </Typography>
 </template>

packages/ui/components/date/Date.vue

@@ -31,38 +31,44 @@ const { color } = useColor()
         fontSize: fontSize('heading/700'),
         color: color('vue-blue'),
       }"
-      class="date"
+      class="day"
     >
       {{ date }}
-    </span>
-    <span
-      :style="{
-        fontSize: fontSize('other/200'),
-        fontWeight: fontWeight('other/200'),
-        background: color('vue-blue'),
-        color: color('white'),
-      }"
-      class="day-of-week"
-    >
-      {{ dayOfWeek }}
+      <span
+        :style="{
+          fontSize: fontSize('other/200'),
+          fontWeight: fontWeight('other/200'),
+          background: color('vue-blue'),
+          color: color('white'),
+        }"
+        class="day-of-week"
+      >
+        {{ dayOfWeek }}
+      </span>
     </span>
   </div>
 </template>
 
 <style scoped>
 .date {
+  height: 45px;
   .year {
     margin-right: 6px;
     font-size: 24px;
   }
-  .date {
+  .day {
+    margin-right: 18px;
     font-size: 45px;
-  }
-  .day-of-week {
-    padding: 4px;
-    width: 20px;
-    height: 20px;
-    border-radius: 2px;
+    position: relative;
+    .day-of-week {
+      position: absolute;
+      top: 50%;
+      right: -24px;
+      text-align: center;
+      width: 20px;
+      height: 20px;
+      border-radius: 2px;
+    }
   }
 }
 </style>

packages/ui/components/date/DatePeriod.vue

@@ -38,6 +38,7 @@ const { color } = useColor()
   justify-content: center;
   gap: 16px;
   .separator {
+    height: 45px;
     font-weight: 700;
     font-size: 38px;
   }

packages/ui/components/forms/InputField.vue

@@ -48,7 +48,11 @@ const { color } = useColor()
 <template>
   <label
     :for="id"
-    :style="{ fontWeight: fontWeight('heading/100'), fontSize: fontSize('heading/100') }"
+    :style="{
+      fontWeight: fontWeight('heading/100'),
+      fontSize: fontSize('heading/100'),
+      color: color('vue-blue'),
+    }"
     class="input-root"
   >
     {{ label }}
@@ -58,6 +62,7 @@ const { color } = useColor()
       :style="{
         fontWeight: fontWeight('heading/100'),
         fontSize: fontSize('heading/100'),
+        color: color('vue-blue'),
         boxShadow: errorMessage ? `0 0 2px ${color('sangosyo/200')}` : `0 0 2px ${color('vue-blue')}`,
       }"
       class="form-input"

packages/ui/components/forms/TextAreaField.vue

@@ -45,7 +45,11 @@ const { color } = useColor()
 <template>
   <label
     :for="id"
-    :style="{ fontWeight: fontWeight('heading/100'), fontSize: fontSize('heading/100') }"
+    :style="{
+      fontWeight: fontWeight('heading/100'),
+      fontSize: fontSize('heading/100'),
+      color: color('vue-blue'),
+    }"
     class="textarea-root"
   >
     {{ label }}
@@ -56,6 +60,7 @@ const { color } = useColor()
       :style="{
         fontWeight: fontWeight('heading/100'),
         fontSize: fontSize('heading/100'),
+        color: color('vue-blue'),
         boxShadow: errorMessage ? `0 0 2px ${color('sangosyo/200')}` : `0 0 2px ${color('vue-blue')}`,
       }"
       class="form-textarea"