Merge pull request #322 from vuejs-jp/reduce-use-of-arbitary-value

jiyuujin · web-flow · commit 49852f54f669 · 2022-10-24T13:53:56.000+09:00
arbitrary values が多用されていたので使用箇所を減らした
diff --git a/app/components/EventsPageSection.vue b/app/components/EventsPageSection.vue
@@ -15,7 +15,7 @@ import {
     class="py-10 px-5 bg-events md:px-10 lg:p-20"
   >
     <div class="py-20 bg-white lg:py-40">
-      <div class="px-5 mx-auto max-w-[940px]">
+      <div class="px-5 mx-auto max-w-940">
         <SectionTitle
           class="mb-10 lg:mb-20"
           title="Events"
diff --git a/app/components/FooterPageSection.vue b/app/components/FooterPageSection.vue
@@ -4,7 +4,7 @@
     class="py-10 text-white bg-vue-blue lg:py-20"
   >
     <img
-      class="mx-auto mb-10 w-[9.375rem] lg:mb-20 lg:w-[15rem]"
+      class="mx-auto mb-10 w-37.5 lg:mb-20 lg:w-60"
       :src="`/icon/vuefes_logo-invert.svg`"
       alt="Vue fes 2022"
     >
diff --git a/app/components/FormPageSection.vue b/app/components/FormPageSection.vue
@@ -27,7 +27,7 @@ export default {
     id="form"
     class="py-20 lg:py-40"
   >
-    <div class="px-5 mx-auto max-w-[43.75rem]">
+    <div class="px-5 mx-auto max-w-700">
       <SectionTitle
         class="mb-10 lg:mb-20"
         title="Contact"
diff --git a/app/components/MessagePageSection.vue b/app/components/MessagePageSection.vue
@@ -17,14 +17,14 @@ import SectionTitle from '~/components/SectionTitle.vue'
     class="py-20 bg-white lg:py-40"
   >
     <div
-      class="px-5 mx-auto max-w-[43.75rem] lg:flex lg:justify-between lg:items-center lg:max-w-[74.375rem]"
+      class="px-5 mx-auto max-w-700 lg:flex lg:justify-between lg:items-center lg:max-w-1190"
     >
       <SectionTitle
         class="mb-10 lg:mr-6 lg:mb-20"
         title="Message"
         title-yamato="想い"
       />
-      <div class="text-sm leading-7 text-vue-blue lg:max-w-[45rem] lg:text-lg lg:leading-8">
+      <div class="text-sm leading-7 text-vue-blue lg:max-w-720 lg:text-lg lg:leading-8">
         <p class="mb-6">{{ message1 }}</p>
         <p class="mb-6">{{ message2 }}</p>
         <p class="mb-6">{{ message3 }}</p>
diff --git a/app/components/NavPageSection.vue b/app/components/NavPageSection.vue
@@ -4,7 +4,7 @@
       <div class="flex">
         <nuxt-link to="/">
           <img
-            class="mr-[2.6vw] w-[19.48vw] h-[3.51vw] lg:mr-5 lg:w-[200px] lg:h-9"
+            class="mr-[2.6vw] w-[19.48vw] h-[3.51vw] lg:mr-5 lg:w-50 lg:h-9"
             :src="`/icon/vuefes_logo.svg`"
             :alt="conferenceTitle"
           >
diff --git a/app/components/SectionTitle.vue b/app/components/SectionTitle.vue
@@ -13,10 +13,10 @@ const props = defineProps({
 
 <template>
   <div class="shrink-0 text-center text-vue-blue">
-    <div class="font-kokuryu-heading text-[2.5rem] opacity-10 lg:text-[5rem]">
+    <div class="font-kokuryu-heading text-40 opacity-10 lg:text-80">
       {{ titleYamato }}
     </div>
-    <h2 class="mt-[-1.5rem] text-[1.25rem] font-extrabold lg:-mt-14 lg:text-[2.5rem]">
+    <h2 class="-mt-6 text-xl font-extrabold lg:-mt-14 lg:text-40">
       {{ title }}
     </h2>
   </div>
diff --git a/app/components/StorePageSection.vue b/app/components/StorePageSection.vue
@@ -44,7 +44,7 @@ import {
             <p class="mb-10 text-2xl font-bold text-center text-vue-blue">
               {{ goods.price }}
             </p>
-            <p class="mb-5 text-sm text-vue-blue md:min-h-[80px]">
+            <p class="mb-5 text-sm text-vue-blue md:min-h-20">
               {{ goods.description }}
             </p>
             <p
diff --git a/app/components/TeamPageSection.vue b/app/components/TeamPageSection.vue
@@ -15,7 +15,7 @@ const showStaffs = computed(() => staffList.filter((staff) => staff.image !== ''
     class="py-10 px-5 bg-staffs md:px-10 lg:p-20"
   >
     <div class="py-20 px-5 bg-white lg:py-40">
-      <div class="mx-auto max-w-[43.75rem] lg:max-w-[73.75rem]">
+      <div class="mx-auto max-w-700 lg:max-w-1180">
         <SectionTitle
           class="mb-10 lg:mb-20"
           title="Team"
diff --git a/app/components/TopPageSection.vue b/app/components/TopPageSection.vue
@@ -1,27 +1,27 @@
 <template>
   <section class="pb-7">
-    <div class="relative mx-auto max-w-[1920px]">
+    <div class="relative mx-auto max-w-1920">
       <div class="px-5">
         <div
-          class="aspect-[648/384] mx-auto mb-[6.23vw] max-w-[1176px] md:aspect-[780/384] lg:aspect-[1176/384] lg:mb-9"
+          class="aspect-[648/384] mx-auto mb-[6.23vw] max-w-1176 md:aspect-[780/384] lg:aspect-[1176/384] lg:mb-9"
         >
           <top-animation />
         </div>
         <div class="flex flex-wrap gap-x-8 gap-y-2.5 justify-center items-baseline mb-8 md:mb-16">
           <h1
-            class="text-[7.01vw] font-extrabold leading-none text-center text-vue-blue lg:text-[4.0625rem]"
+            class="text-[7.01vw] font-extrabold leading-none text-center text-vue-blue lg:text-65"
           >
             {{ conferenceTitle }}
           </h1>
           <p
-            class="text-[3.9vw] text-center text-vue-blue lg:text-[2.5rem]"
+            class="text-[3.9vw] text-center text-vue-blue lg:text-40"
           >
             {{ eventDate }}
           </p>
         </div>
         <p
           v-if="LIVE_YOUTUBE"
-          class="text-[5.7vw] font-bold text-center text-vue-blue md:text-[2.5rem]"
+          class="text-[5.7vw] font-bold text-center text-vue-blue md:text-40"
         >
           {{ streamingNow }}
         </p>
@@ -35,7 +35,7 @@
             class="hover:opacity-80 transition-opacity"
           >
             <div
-              class="flex flex-col justify-center w-[67vw] max-w-[30rem] h-16 font-bold rounded-full shadow-card md:w-[30rem] md:h-[6.75rem] lg:w-[30rem] lg:h-[6.75rem]"
+              class="flex flex-col justify-center w-[67vw] max-w-480 h-16 font-bold rounded-full shadow-card md:w-120 md:h-27 lg:w-120 lg:h-27"
               :class="track.bgClass"
             >
               <p class="text-base font-bold text-center text-white md:text-2xl lg:text-2xl">{{ track.name }}</p>
diff --git a/app/components/events/ChildcareDetail.vue b/app/components/events/ChildcareDetail.vue
@@ -11,7 +11,7 @@ import {
 
 <template>
   <div>
-    <div class="relative z-10 mx-auto w-[12.5rem] bg-white lg:w-[21.25rem]">
+    <div class="relative z-10 mx-auto w-50 bg-white lg:w-85">
       <h3 class="text-xl font-bold text-center text-vue-blue lg:text-4xl">
         託児サポート
       </h3>
diff --git a/app/components/events/EventDetail.vue b/app/components/events/EventDetail.vue
@@ -24,7 +24,7 @@ const eventInfo = computed(() => props.event)
     </PageSubTitle>
     <div
       v-if="eventInfo.logoList.length"
-      class="flex mx-auto mb-14 max-w-[400px]"
+      class="flex mx-auto mb-14 max-w-400"
     >
       <div
         v-for="(logo, index) in eventInfo.logoList"
diff --git a/app/components/footer/ContactList.vue b/app/components/footer/ContactList.vue
@@ -48,7 +48,7 @@ const onMouseLeave = (value: string) => {
       :key="network.value"
       :href="network.url"
       :title="network.description"
-      class="flex justify-center items-center w-40 h-10 text-base font-bold hover:text-vue-blue hover:bg-white rounded-full border-2 shadow-sm transition lg:w-[13.75rem] lg:h-[3.375rem] lg:text-lg"
+      class="flex justify-center items-center w-40 h-10 text-base font-bold hover:text-vue-blue hover:bg-white rounded-full border-2 shadow-sm transition lg:w-55 lg:h-13.5 lg:text-lg"
       target="_blank"
       rel="noopener"
       @mouseover="onMouseOver(network.value)"
diff --git a/app/components/forms/ButtonField.vue b/app/components/forms/ButtonField.vue
@@ -18,7 +18,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="inline-block before:block relative before:-z-10 w-full before:w-full max-w-[30rem] h-16 before:h-full before:bg-submit-border rounded-4xl before:rounded-4xl shadow-submit hover:shadow-submit-hover transition lg:h-[4.5rem]"
+    class="inline-block before:block relative before:-z-10 w-full before:w-full max-w-480 h-16 before:h-full before:bg-submit-border rounded-4xl before:rounded-4xl shadow-submit hover:shadow-submit-hover transition lg:h-18"
   >
     <div class="flex absolute top-0 justify-center items-center p-px w-full h-full">
       <button
diff --git a/app/components/forms/InputField.vue b/app/components/forms/InputField.vue
@@ -57,7 +57,7 @@ const handleFocusOut = (e) => {
       :id="idLabel"
       :name="name"
       :type="type"
-      class="block py-3.5 px-4 mt-2.5 w-full h-12 text-vue-blue bg-transparent border border-vue-blue lg:py-7 lg:px-8 lg:h-[4.625rem]"
+      class="block py-3.5 px-4 mt-2.5 w-full h-12 text-vue-blue bg-transparent border border-vue-blue lg:py-7 lg:px-8 lg:h-18.5"
       :placeholder="placeholder"
       :required="required"
       @input="handleInput"
diff --git a/app/components/forms/LinkButtonField.vue b/app/components/forms/LinkButtonField.vue
@@ -28,7 +28,7 @@ const emit = defineEmits<ILinkButtonFieldEmit>()
 <template>
   <div
     :class="{ 'opacity-30': disabled , 'pointer-events-none': disabled }"
-    class="inline-block before:block relative before:-z-10 w-full before:w-full max-w-[30rem] h-16 before:h-full before:bg-submit-border rounded-4xl before:rounded-4xl shadow-submit hover:shadow-submit-hover transition lg:h-[4.5rem]"
+    class="inline-block before:block relative before:-z-10 w-full before:w-full max-w-480 h-16 before:h-full before:bg-submit-border rounded-4xl before:rounded-4xl shadow-submit hover:shadow-submit-hover transition lg:h-18"
   >
     <div class="flex absolute top-0 justify-center items-center p-px w-full h-full">
       <a
diff --git a/app/components/forms/TextareaField.vue b/app/components/forms/TextareaField.vue
@@ -57,7 +57,7 @@ const handleFocusOut = (e) => {
     <textarea
       :id="idLabel"
       :name="name"
-      class="block py-3.5 px-4 mt-2.5 w-full h-[8.125rem] text-vue-blue bg-transparent border border-vue-blue lg:py-7 lg:px-8 lg:h-[11.25rem]"
+      class="block py-3.5 px-4 mt-2.5 w-full h-32.5 text-vue-blue bg-transparent border border-vue-blue lg:py-7 lg:px-8 lg:h-45"
       :rows="rows"
       :placeholder="placeholder"
       :required="required"
diff --git a/app/components/forms/customize/SubmitButtonField.vue b/app/components/forms/customize/SubmitButtonField.vue
@@ -22,7 +22,7 @@ const handleClick = () => {
 
 <template>
   <div
-    class="inline-block before:block relative before:-z-10 w-full before:w-full max-w-[30rem] h-16 before:h-full before:bg-submit-border rounded-4xl before:rounded-4xl shadow-submit transition lg:h-[4.5rem]"
+    class="inline-block before:block relative before:-z-10 w-full before:w-full max-w-480 h-16 before:h-full before:bg-submit-border rounded-4xl before:rounded-4xl shadow-submit transition lg:h-18"
     :class="{ 'hover:shadow-submit-hover': !disabled, 'opacity-40': disabled }"
   >
     <div class="flex absolute top-0 justify-center items-center p-px w-full h-full">
diff --git a/app/components/forms/customize/TweetButtonField.vue b/app/components/forms/customize/TweetButtonField.vue
@@ -21,7 +21,7 @@ const handleClick = () => {
 <template>
   <button
     type="submit"
-    class="w-[56.62vw] h-[9.48vw] text-[3.38vw] text-center text-vue-blue bg-white rounded-4xl border border-vue-blue hover:opacity-60 transition-opacity md:w-[48.98vw] md:h-[6.43vw] md:text-[2.45vw] lg:w-[26.875rem] lg:h-[3.9375rem] lg:text-[1.5rem]"
+    class="w-[56.62vw] h-[9.48vw] text-[3.38vw] text-center text-vue-blue bg-white rounded-4xl border border-vue-blue hover:opacity-60 transition-opacity md:w-[48.98vw] md:h-[6.43vw] md:text-[2.45vw] lg:w-107.5 lg:h-15.75 lg:text-2xl"
     @click="handleClick"
   >
     <div class="flex justify-center items-center align-middle">
diff --git a/app/components/speakers/SpeakerLTSection.vue b/app/components/speakers/SpeakerLTSection.vue
@@ -5,7 +5,7 @@ import LinkButtonField from '~/components/forms/LinkButtonField.vue'
 
 <template>
   <section class="p-4 border border-vue-blue md:px-10 lg:py-10 lg:px-20">
-    <h3 class="mx-auto mt-[-2.0rem] mb-6 w-[14.375rem] text-xl font-bold text-center text-vue-blue md:mb-8 lg:mt-[-3.6rem] lg:mb-14 lg:w-[26.875rem] lg:text-4xl bg-img">
+    <h3 class="mx-auto -mt-8 mb-6 w-57.5 text-xl font-bold text-center text-vue-blue md:mb-8 lg:my-14 lg:w-107.5 lg:text-4xl bg-img">
       LT募集について
     </h3>
     <p class="mb-8 text-sm leading-7 text-vue-blue lg:mb-12 lg:text-lg lg:leading-8">
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -36,22 +36,42 @@ module.exports = {
       },
       width: {
         37.5: '9.375rem', // 150px
+        50: '12.5rem', // 200px
+        55: '13.75rem', // 220px
+        57.5: '14.375rem', // 230px
         62.5: '15.625rem', // 250px
+        85: '21.25rem', // 340px
+        107.5: '26.875rem', // 430px
+        120: '30rem', // 480px
         170: '42rem',
         192: '54rem',
       },
       height: {
+        13.5: '3.375rem', // 54px
+        15.75: '3.9375rem', // 63px
         18: '4.5rem', // 72px
+        18.5: '4.625rem', // 74px
+        27: '6.75rem', // 108px
+        32.5: '8.125rem', // 130px
         37.5: '9.375rem', // 150px
+        45: '11.25rem', // 180px
       },
       minHeight: {
         10: '2.5rem', // 40px
+        20: '5rem', // 80px
       },
       maxWidth: {
+        400: '25rem', // 400px
+        480: '30rem', // 480px
         700: '43.75rem', // 700px
+        720: '45rem', // 720px
         900: '56.25rem', // 900px
+        940: '58.75rem', // 940px
+        1176: '73.5rem', // 1176px
+        1180: '73.75rem', // 1180px
         1190: '74.375rem', // 1190px
         1260: '78.75rem', // 1260px
+        1920: '120rem', // 1920px
       },
       boxShadow: {
         submit: '0px 10px 20px rgba(0, 0, 0, 0.1)',
@@ -74,7 +94,10 @@ module.exports = {
         23: '1.4375rem', // 23px
         25: '1.5625rem', // 25px
         35: '2.1875rem', // 35px
+        40: '2.5rem', // 40px
         50: '3.125rem', // 50px
+        65: '4.0625rem', // 65px
+        80: '5rem', // 80px
       },
       aspectRatio: {
         '16/9': '16 / 9',

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ import {`
`15`	`15`	`class="py-10 px-5 bg-events md:px-10 lg:p-20"`
`16`	`16`	`>`
`17`	`17`	`<div class="py-20 bg-white lg:py-40">`
`18`		`- <div class="px-5 mx-auto max-w-[940px]">`
	`18`	`+ <div class="px-5 mx-auto max-w-940">`
`19`	`19`	`<SectionTitle`
`20`	`20`	`class="mb-10 lg:mb-20"`
`21`	`21`	`title="Events"`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@`
`4`	`4`	`class="py-10 text-white bg-vue-blue lg:py-20"`
`5`	`5`	`>`
`6`	`6`	`<img`
`7`		`- class="mx-auto mb-10 w-[9.375rem] lg:mb-20 lg:w-[15rem]"`
	`7`	`+ class="mx-auto mb-10 w-37.5 lg:mb-20 lg:w-60"`
`8`	`8`	:src="`/icon/vuefes_logo-invert.svg`"
`9`	`9`	`alt="Vue fes 2022"`
`10`	`10`	`>`
Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ export default {`
`27`	`27`	`id="form"`
`28`	`28`	`class="py-20 lg:py-40"`
`29`	`29`	`>`
`30`		`- <div class="px-5 mx-auto max-w-[43.75rem]">`
	`30`	`+ <div class="px-5 mx-auto max-w-700">`
`31`	`31`	`<SectionTitle`
`32`	`32`	`class="mb-10 lg:mb-20"`
`33`	`33`	`title="Contact"`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@`
`4`	`4`	`<div class="flex">`
`5`	`5`	`<nuxt-link to="/">`
`6`	`6`	`<img`
`7`		`- class="mr-[2.6vw] w-[19.48vw] h-[3.51vw] lg:mr-5 lg:w-[200px] lg:h-9"`
	`7`	`+ class="mr-[2.6vw] w-[19.48vw] h-[3.51vw] lg:mr-5 lg:w-50 lg:h-9"`
`8`	`8`	:src="`/icon/vuefes_logo.svg`"
`9`	`9`	`:alt="conferenceTitle"`
`10`	`10`	`>`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ const showStaffs = computed(() => staffList.filter((staff) => staff.image !== ''`
`15`	`15`	`class="py-10 px-5 bg-staffs md:px-10 lg:p-20"`
`16`	`16`	`>`
`17`	`17`	`<div class="py-20 px-5 bg-white lg:py-40">`
`18`		`- <div class="mx-auto max-w-[43.75rem] lg:max-w-[73.75rem]">`
	`18`	`+ <div class="mx-auto max-w-700 lg:max-w-1180">`
`19`	`19`	`<SectionTitle`
`20`	`20`	`class="mb-10 lg:mb-20"`
`21`	`21`	`title="Team"`