Merge pull request #202 from vuejs-jp/enhance/brushup

brushup

Author: jiyuujin

apps/web/app/components/GlobalHeader.vue

@@ -32,13 +32,22 @@ const toggleMenu = () => {
 <template>
   <VFSpHeader v-if="width <= 1080">
     <div class="navigation-mobile">
-      <NuxtLink v-if="config.public.enableSwitchLocale" :to="switchLocalePath(locale === 'ja' ? 'en' : 'ja')"
+      <NuxtLink
+        v-if="config.public.enableSwitchLocale"
+        :to="switchLocalePath(locale === 'ja' ? 'en' : 'ja')"
         class="locale-switch-wrapper">
         <VFLocaleSwitch :locale />
       </NuxtLink>
 
-      <a href="" class="navigation-mobile-toggle" name="Menu" :class="{ 'isOpened': showMenu }"
-        @click.prevent="toggleMenu"><span /><span /><span /></a>
+      <a
+        href=""
+        class="navigation-mobile-toggle"
+        name="Menu"
+        :class="{ 'isOpened': showMenu }"
+        @click.prevent="toggleMenu"
+      >
+        <span /><span /><span />
+      </a>
       <!-- <VFIcon name="Menu" color="vue-blue" can-hover @click="toggleMenu" /> -->
     </div>
     <!-- hamburger-menu -->
@@ -63,8 +72,11 @@ const toggleMenu = () => {
           <VFTypography variant="heading/200" color="vue-blue">{{ link.text }}</VFTypography>
         </nuxt-link>
       </div>
-      <NuxtLink v-if="config.public.enableSwitchLocale" :to="switchLocalePath(locale === 'ja' ? 'en' : 'ja')"
-        class="locale-switch-wrapper">
+      <NuxtLink
+        v-if="config.public.enableSwitchLocale"
+        :to="switchLocalePath(locale === 'ja' ? 'en' : 'ja')"
+        class="locale-switch-wrapper"
+      >
         <VFLocaleSwitch :locale />
       </NuxtLink>
     </div>

apps/web/app/composables/useSponsor.ts

@@ -23,5 +23,13 @@ export function useSponsor() {
       .exhaustive()
   }
 
-  return { color }
+  function borderColor(tag: string[]) {
+    if (tag.includes('platinum')) return '#6E8F2E'
+    if (tag.includes('gold')) return '#E5AF00'
+    if (tag.includes('silver')) return '#1A8191'
+    if (tag.includes('bronze')) return '#CC4F39'
+    return '#35495E'
+  }
+
+  return { color, borderColor }
 }

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

@@ -1,3 +1,3 @@
-Vue Fes Japan 2024のチケットをご購入後、必要な情報をご登録いただくと、当日会場にてご自身のアバター＋名前入りのネームカードがもらえます！（要ソーシャルログイン）
+Vue Fes Japan 2024 のチケットをご購入後、必要な情報をご登録いただくと、当日会場にてご自身のアバター＋名前入りのネームカードがもらえます！（要ソーシャルログイン）
 
 ※ネームカード作成は必須ではありません。

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

@@ -1 +1 @@
-④　開催前はネームカードをSNSやブログなどにシェアして、当日は印刷されたネームカードをお楽しみください！
+④　開催前はネームカードを SNS やブログなどにシェアして、当日は印刷されたネームカードをお楽しみください！

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

@@ -2,7 +2,7 @@
 
 ・当日印刷されたネームカードをお受け取りいただくには、ステータスが「完成」になっている必要があります。
 
-・注文番号の照合は自動で行われ、入力後最大12時間ほどで完了します。
+・注文番号の照合は自動で行われ、入力後最大 12 時間ほどで完了します。
 
 ・最新のステータスを表示するには画面の再読み込みが必要です。
 

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

@@ -5,7 +5,7 @@ STORES で事前にご注文いただくと、当日 Vue Fes Japan 2024 の会
 <br>
 事前注文受付期間：～ 2024 年 10 月 1 日（日）
 
-受取日時：2023 年 10 月 19 日（土）9:30〜18:00
+受取日時：2024 年 10 月 19 日（土）9:30〜18:00
 
 受取場所：Vue Fes Japan 2024 会場内 Vue Fes Store ブース
 

apps/web/app/pages/sessions/[id]/index.vue

@@ -139,7 +139,24 @@ useHead({
   }
 
   .detailbody-explain {
-    /* margin: 0 auto calc(var(--unit) * 8); */
+    --body-font-size: 1.125rem;
+    --body-font-weight: 500;
+
+    font-size: var(--body-font-size);
+    font-weight: var(--body-font-weight);
+    white-space: pre-wrap;
+
+    ::v-deep(p) {
+      --body-p-margin-bottom: calc(var(--unit) * 4);
+
+      margin-bottom: var(--body-p-margin-bottom);
+      line-height: 1.8;
+    }
+
+    ::v-deep(p:last-child) {
+      text-align: right;
+      margin-bottom: 0px;
+    }
   }
 
   .detailbody-explain ul {

apps/web/app/pages/sponsors/[id]/index.vue

@@ -29,7 +29,7 @@ const { data: speakers } = await useAsyncData('speakers', async () => {
 const speakerData = speakers.value?.data as Speaker[]
 
 const currentLocale = useLocaleCurrent().locale
-const { color } = useSponsor()
+const { color, borderColor } = useSponsor()
 
 useHead({
   titleTemplate: (titleChunk) => `${sponsorData[0].name} | ${conferenceTitle}`,
@@ -60,7 +60,7 @@ useHead({
 
       <div class="detailhead-body">
         <div class="detailhead-left">
-          <p class="detailhead-img">
+          <p class="detailhead-img" :style="{ border: `1px solid ${borderColor(sponsorData[0].tag)}` }">
             <img
               :src="`${sponsorData[0].image_url}`"
               :alt="sponsorData[0].name"
@@ -191,7 +191,24 @@ useHead({
   }
 
   .detailhead-right {
-    font-size: 18px;
+    --body-font-size: 1.125rem;
+    --body-font-weight: 500;
+
+    font-size: var(--body-font-size);
+    font-weight: var(--body-font-weight);
+    white-space: pre-wrap;
+
+    ::v-deep(p) {
+      --body-p-margin-bottom: calc(var(--unit) * 4);
+
+      margin-bottom: var(--body-p-margin-bottom);
+      line-height: 1.8;
+    }
+
+    ::v-deep(p:last-child) {
+      text-align: right;
+      margin-bottom: 0px;
+    }
   }
 
   .detailhead-right ::v-deep(a) {
@@ -209,8 +226,7 @@ useHead({
     width: var(--head-img-width);
     height: auto;
     aspect-ratio: 690 / 388;
-    box-shadow: 0px 4px 4px 0px #00000040;
-    border-radius: calc(var(--space-8) * 1);
+    border-radius: calc(var(--unit) * 1.5);
   }
 
   .detailhead-img img {