Revert "fix: 画像サイズを修正"

Author: jiyuujin

apps/web/app/components/AccessPageSection.vue

@@ -63,8 +63,8 @@ const { color } = useColor()
       </div>
 
       <figure class="place_image">
-        <img src="/access/fig_access01.jpg" alt="" loading="lazy" />
-        <img src="/access/fig_access02.jpg" alt="" loading="lazy" />
+        <img src="/access/fig_access01.jpg" alt="" />
+        <img src="/access/fig_access02.jpg" alt="" />
       </figure>
 
     </div>

apps/web/app/components/CooperationPartnerSection.vue

@@ -10,9 +10,9 @@
           <source srcset="/logo/logo_vueconf-de.png" media="(min-width: 768px)" />
           <img
             src="/logo/logo_vueconf-de_sp.png"
+            loading="lazy"
             alt="vuejs.de"
             class="partner-image"
-            loading="lazy"
           />
         </picture>
       </NuxtLink>

apps/web/app/components/TeamPageSection.vue

@@ -11,12 +11,10 @@ const props = defineProps<{
 
 const config = useRuntimeConfig()
 
-const coreTeam =
-  config.public.staffDatasource === 'supabase' ? props.data.coreStaffs.list : teamData
-const volunteerTeam =
-  config.public.staffDatasource === 'supabase'
-    ? props.data.volunteerStaffs.list.map((staff) => staff.name)
-    : volunteers
+const coreTeam = config.public.staffDatasource === 'supabase' ? props.data.coreStaffs.list : teamData
+const volunteerTeam = config.public.staffDatasource === 'supabase'
+  ? props.data.volunteerStaffs.list.map((staff) => staff.name)
+  : volunteers
 // const team = teamData
 </script>
 
@@ -34,13 +32,8 @@ const volunteerTeam =
       <div class="team-members-container">
         <div v-for="member in coreTeam" :key="member.name" class="team-member-wrapper">
           <template v-if="member.x_id !== ''">
-            <a
-              :href="`https://x.com/${member.x_id}`"
-              target="_blank"
-              :aria-label="member.name"
-              class="team-member-link"
-            >
-              <VFAvatar :src="member.image_url" :alt="member.name" size="medium" />
+            <a :href="`https://x.com/${member.x_id}`" target="_blank" :aria-label="member.name">
+              <VFAvatar :src="member.image_url" :alt="member.name" />
             </a>
             <div class="team-member-info">
               <VFTextLink
@@ -54,7 +47,7 @@ const volunteerTeam =
             </div>
           </template>
           <template v-else>
-            <VFAvatar :src="member.image_url" :alt="member.name" size="medium" />
+            <VFAvatar :src="member.image_url" :alt="member.name" />
             <div class="team-member-info">
               <span class="team-member-name">{{ member.name }} </span>
             </div>
@@ -160,10 +153,6 @@ const volunteerTeam =
   gap: 8px;
 }
 
-.team-member-link {
-  width: 100%;
-}
-
 .team-member-name {
   --team-member-name-font-size: 0.875rem;
 

apps/web/app/components/TopPageSection.vue

@@ -21,8 +21,7 @@ const getAnchorPath = computed(
         <p class="place">
           Otemachi PLACE HALL &amp; CONFERENCE
           <br /><time datetime="2024-10-19T00:00+09:00"
-            >{{ $t('top_page.date')
-            }}<template v-if="locale === 'ja'"><span class="day-of-week">SAT</span></template></time
+            >{{ $t('top_page.date') }}<template v-if="locale === 'ja'"><span class="day-of-week">SAT</span></template></time
           >
         </p>
       </div>
@@ -81,12 +80,11 @@ const getAnchorPath = computed(
   z-index: -1;
   width: 100%;
 }
-
 .image-wrapper {
   position: relative;
   width: 100%;
   height: var(--background-image-height);
-  background-image: url('/main-visual.jpg');
+  background-image: url('/main-visual.png');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: top;
@@ -151,8 +149,8 @@ const getAnchorPath = computed(
   }
   .image-wrapper {
     background-size: auto 100%;
-    background-image: url('/main-visual-mobile.jpg');
   }
+
   .section-title {
     font-size: var(--font-size-heading500);
     font-weight: 700;

apps/web/app/components/event/EventAsset.vue

@@ -2,24 +2,15 @@
 import type { Event } from '@vuejs-jp/model'
 
 interface EventAssetProps {
-  title: Extract<
-    Event,
-    'creative-wall' | 'free-drinks-and-snacks' | 'tattoo-space' | 'cocktail-bash'
-  >
+  title: Extract<Event, 'creative-wall' | 'free-drinks-and-snacks' | 'tattoo-space' | 'cocktail-bash'>
   marginTop?: number
 }
 
 const props = defineProps<EventAssetProps>()
 </script>
 
 <template>
-  <NuxtImg
-    :src="`/event/${title}.png`"
-    alt=""
-    class="eventcard-image"
-    :style="{ marginTop: `${marginTop}px` }"
-    loading="lazy"
-  />
+  <img :src="`/event/${title}.png`" alt="" class="eventcard-image" :style="{ marginTop: `${marginTop}px` }" />
 </template>
 
 <style scoped>

apps/web/app/components/event/EventCard.vue

@@ -17,7 +17,6 @@ const props = defineProps<EventCardProps>()
     :title="$t(`event.${title.replaceAll('-', '_')}`)"
     :font-class
     :padding-class
-    class="frame"
   >
     <template #content>
       <div class="eventcard-content">
@@ -35,13 +34,6 @@ const props = defineProps<EventCardProps>()
 <style scoped>
 @import url('~/assets/media.css');
 
-.frame {
-  display: flex;
-  flex-direction: column;
-  align-items: space-between;
-  justify-content: space-between;
-}
-
 .eventcard-content {
   font-size: 16px;
   font-weight: 500;

apps/web/app/components/event/EventMultipleAssets.vue

@@ -16,17 +16,7 @@ const props = defineProps<EventMultipleAssetsProps>()
       '--head-img-height': `${imgHeight}px`,
     }"
   >
-    <NuxtImg
-      v-for="(title, key) in titleList"
-      :key
-      :src="`/event/${title}-${key + 1}.png`"
-      alt=""
-      width="792"
-      height="512"
-      fit="cover"
-      loading="lazy"
-      class="image"
-    />
+    <img v-for="(title, key) in titleList" :key :src="`/event/${title}-${key + 1}.png`" alt="" />
   </div>
 </template>
 
@@ -44,10 +34,9 @@ const props = defineProps<EventMultipleAssetsProps>()
   }
 }
 
-.image {
-  height: var(--head-img-height);
-  width: auto;
+.eventcard-images ::v-deep(img) {
   padding: 0;
   margin: 0 auto;
+  height: var(--head-img-height);
 }
 </style>

apps/web/app/components/sponsor/SponsorList.vue

@@ -22,12 +22,7 @@ const currentLocale = useLocaleCurrent().locale
           class="sponsor-list-item-link"
           :to="`${currentLocale === 'ja' ? '/' : `/${currentLocale}/`}sponsors/${item['detail_page_id']}`"
         >
-          <NuxtImg
-            class="sponsor-list-item-image"
-            :src="item['image_url']"
-            :alt="item.name"
-            loading="lazy"
-          />
+          <img class="sponsor-list-item-image" :src="item['image_url']" :alt="item.name" />
         </NuxtLink>
       </li>
     </ul>

apps/web/app/components/ticket/NamecardSection.vue

@@ -24,12 +24,7 @@ const { locale: currentLocale } = useLocaleCurrent()
     </div>
 
     <div class="content-wrapper">
-      <NuxtImg
-        :src="'/namecard/namecard-samples.png'"
-        alt="test"
-        width="596"
-        loading="lazy"
-      />
+      <img :src="'/namecard/namecard-samples.png'" alt="test" />
       <div class="buttons-wrapper">
         <VFLinkButton
           class="action-button"

apps/web/app/components/ticket/PersonalSponsorSection.vue

@@ -14,9 +14,9 @@ import { ticketUrl } from '~/utils/constants'
         :key="i"
         :title="$t(`personal_sponsor.merit${i}.title`)"
         :detail="$t(`personal_sponsor.merit${i}.detail`)"
-        :caution="i === 2 || i === 4 ? $t(`personal_sponsor.merit${i}.caution`) : ''"
+        :caution="(i === 2 || i === 4) ? $t(`personal_sponsor.merit${i}.caution`) : ''"
       >
-        <NuxtImg alt="" :src="`/sponsor/merit-${i}.jpg`" loading="lazy" class="image" />
+        <img alt="" :src="`/sponsor/merit-${i}.jpg`" />
       </VFMeritCard>
     </div>
     <div class="personal-sponsor-text">
@@ -89,12 +89,6 @@ import { ticketUrl } from '~/utils/constants'
   color: var(--color-white);
 }
 
-.image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
 .apply {
   display: flex;
   flex-direction: column;
@@ -115,8 +109,7 @@ import { ticketUrl } from '~/utils/constants'
 
 @media (--tablet) {
   .personal-sponsor-body {
-    --personal-sponsor-body-padding: calc(var(--unit) * 4) calc(var(--unit) * 2)
-      calc(var(--unit) * 4);
+    --personal-sponsor-body-padding: calc(var(--unit) * 4) calc(var(--unit) * 2) calc(var(--unit) * 4);
   }
 
   .personal-sponsor-body h3 {