Merge pull request #101 from vuejs-jp/fix/css-sponsor-date

fix: css at sponsor date
vuejs-jp · Apr 4, 2024 · 4a0d213 · 4a0d213
2 parents aa62996 + 3949276
commit 4a0d213
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 105 deletions.
diff --git a/apps/web/app/components/SponsorPageSection.vue b/apps/web/app/components/SponsorPageSection.vue
@@ -14,30 +14,22 @@ const { color } = useColor()
         {{ $t('sponsor.title') }}
       </VFTitle>
 
-      <div
-        class="sponsor-text"
-        :style="{
+      <div class="sponsor-text" :style="{
           fontWeight: fontWeight('body/300'),
           fontSize: fontSize('body/300'),
           color: color('vue-blue'),
-        }"
-      >
+        }">
         <MarkDownText path="sponsor" />
       </div>
 
-      <h3
-        :style="{
+      <h3 :style="{
           fontWeight: fontWeight('heading/400'),
           fontSize: fontSize('heading/300'),
-        }"
-        class="sponsor-subtitle"
-      >
+        }" class="sponsor-subtitle">
         {{ $t('sponsor.apply_period') }}
       </h3>
-      <VFDatePeriod
-        :start="{ year: 2024, date: '4.8', dayOfWeek: locale === 'ja' ? $t('day_of_week.monday') : '' }"
-        :end="{ date: '4.25', dayOfWeek: locale === 'ja' ? $t('day_of_week.thursday') : '' }"
-      />
+      <VFDatePeriod :start="{ year: 2024, date: '4.8', dayOfWeek: locale === 'ja' ? $t('day_of_week.monday') : '' }"
+        :end="{ date: '4.25', dayOfWeek: locale === 'ja' ? $t('day_of_week.thursday') : '' }" />
 
       <div class="sponsor-buttons">
         <!-- 申し込む -->
@@ -47,13 +39,9 @@ const { color } = useColor()
         </VFButton>
         -->
         <!-- 資料を見る -->
-        <VFButton
-          class="sponsor-button"
-          fixed-width
+        <VFButton class="sponsor-button" fixed-width
           href="https://docs.google.com/presentation/d/1YXWqW55CKdt4czr8paarpdxqYz8NjSFRzrOQ-NnClKQ/edit?usp=sharing"
-          target="_blank"
-          secondary
-        >
+          target="_blank" secondary>
           {{ $t('sponsor.check_doc') }}
         </VFButton>
 
@@ -97,8 +85,9 @@ const { color } = useColor()
 
 .sponsor-subtitle {
   margin-top: calc(var(--unit) * 5);
-  background: var(--color-vue-green-gradation); 
-  -webkit-text-fill-color: transparent; 
+  margin-bottom: calc(var(--unit) * 2);
+  background: var(--color-vue-green-gradation);
+  -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;
 }
 
@@ -117,25 +106,6 @@ const { color } = useColor()
   margin: 0 calc(var(--unit) * 1.5);
 }
 
-/* この幅ルールはコンポーネント側に持たせるべき */
-/* .sponsor-button {
-  min-width: 198px;
-  max-width: 260px;
-  width: 100%;
-  padding: calc(var(--unit) * 2) 66px;
-  background: var(--color-vue-green-gradation);
-  font-size: 18px;
-  white-space: nowrap;
-} */
-
-/* .sponsor-button.-border {
-  padding: calc(var(--unit) * 2) 0;
-  background: white;
-  border: solid 2px var(--color-vue-blue);
-  color: var(--color-vue-blue);
-} */
-
-
 @media (--tablet) {
   .sponsor {
     --sponsor-padding: calc(var(--unit) * 2) 0;

diff --git a/packages/ui/components/date/Date.vue b/packages/ui/components/date/Date.vue
@@ -15,61 +15,60 @@ const { color } = useColor()
 </script>
 
 <template>
-  <div class="date">
-    <span
-      v-if="year"
-      :style="{
-        fontSize: fontSize('heading/300'),
-        color: color('vue-blue'),
-      }"
-      class="year"
-    >
+  <div class="datewrapper">
+    <!-- year -->
+    <span v-if="year" :style="{
+      fontSize: fontSize('heading/300'),
+      color: color('vue-blue'),
+    }" class="year">
       {{ year }}
     </span>
-    <span
-      :style="{
-        fontSize: fontSize('heading/700'),
-        color: color('vue-blue'),
-        marginRight: dayOfWeek ? '18px' : '0',
-      }"
-      class="day"
-    >
+    <!-- date -->
+    <span :style="{
+      fontSize: fontSize('heading/700'),
+      color: color('vue-blue'),
+    }" class="date">
       {{ date }}
-      <span
-        v-if="dayOfWeek"
-        :style="{
-          fontSize: fontSize('other/200'),
-          fontWeight: fontWeight('other/200'),
-          background: color('vue-blue'),
-          color: color('white'),
-        }"
-        class="day-of-week"
-      >
-        {{ dayOfWeek }}
-      </span>
+    </span>
+    <!-- day -->
+    <span v-if="dayOfWeek" :style="{
+      fontSize: fontSize('other/200'),
+      fontWeight: fontWeight('other/200'),
+      background: color('vue-blue'),
+      color: color('white'),
+    }" class="day-of-week">
+      {{ dayOfWeek }}
     </span>
   </div>
 </template>
 
 <style scoped>
+.datewrapper {
+  display: inline;
+  line-height: 1;
+}
+
+.year {
+  display: inline-block;
+  margin-right: 6px;
+  font-size: 24px;
+}
+
 .date {
-  height: 45px;
-  .year {
-    margin-right: 6px;
-    font-size: 24px;
-  }
-  .day {
-    font-size: 45px;
-    position: relative;
-    .day-of-week {
-      position: absolute;
-      top: 50%;
-      right: -24px;
-      text-align: center;
-      width: 20px;
-      height: 20px;
-      border-radius: 2px;
-    }
-  }
+  display: inline-block;
+  letter-spacing: 0.2rem;
+}
+
+.day-of-week {
+  position: relative;
+  top: -4px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 2px;
+  margin-left: 4px;
+
 }
 </style>
diff --git a/packages/ui/components/date/DatePeriod.vue b/packages/ui/components/date/DatePeriod.vue
@@ -17,30 +17,22 @@ const { color } = useColor()
 
 <template>
   <div class="date-period">
-    <Date v-bind="{...start}" />
-    <div
-      :style="{
-        fontSize: fontSize('heading/700'),
-        color: color('vue-blue'),
-      }"
-      class="separator"
-    >
-      -
+    <Date v-bind="{ ...start }" />
+    <div :style="{
+      fontSize: fontSize('heading/100'),
+      color: color('vue-blue'),
+    }" class="separator">
+      ー
     </div>
-    <Date v-bind="{...end}" />
+    <Date v-bind="{ ...end }" />
   </div>
 </template>
-  
+
 <style scoped>
 .date-period {
   display: flex;
-  align-items: flex-end;
+  align-items: center;
   justify-content: center;
   gap: 16px;
-  .separator {
-    height: 45px;
-    font-weight: 700;
-    font-size: 38px;
-  }
 }
 </style>