スタイルを修正した

Author: 448jp

apps/web/app/components/SpeakerPageSection.vue

@@ -57,7 +57,7 @@ const { sessionSpeakers, lightningTalkSpeakers, sponsorSessionSpeakers } = props
 
       <section v-if="lightningTalkSpeakers.list.length !== 0" id="lightning-talks" class="speaker-section">
         <h3 class="speaker-subtitle">Lightning Talks</h3>
-        <p>
+        <p class="speaker-lt-description">
           {{ $t('speaker.lt_description') }}
         </p>
         <ul class="speaker-cards">
@@ -210,9 +210,17 @@ const { sessionSpeakers, lightningTalkSpeakers, sponsorSessionSpeakers } = props
 }
 
 .speaker-hr {
-  padding: 50px 0;
+  margin: 50px 0;
+  padding: 0;
   border: 0;
   border-bottom: 1px solid var(--color-vue-blue);
+  opacity: 0.4;
+}
+
+.speaker-lt-description {
+  margin: calc(var(--unit) * 2) 0 0;
+  font-size: 18px;
+  line-height: 1.8;
 }
 
 @media (--tablet) {

packages/ui/components/store/Product.vue

@@ -33,24 +33,24 @@ const props = defineProps<StoreItemProps>()
 
 <style scoped>
 .store-item {
-  width: 308px;
-  display: flex;
-  flex-direction: column;
-  gap: 1em;
+  width: 288px;
   color: var(--color-vue-blue);
 }
 
 .store-item img {
   border: 1px solid #DCE1E5;
+  border-radius: 8px;
 }
 
 .name {
+  margin-top: 16px;
+  font-size: 18px;
   font-weight: bold;
   line-height: 1;
 }
 
 .explain {
-  width: 308px;
+  margin-top: 8px;
   white-space: pre-wrap;
 
   &::v-deep(a) {
@@ -62,14 +62,24 @@ const props = defineProps<StoreItemProps>()
     opacity: 0.4;
     transition: .2s;
   }
+
+  &::v-deep(p) {
+    font-size: 18px;
+    line-height: 1.8;
+  }
 }
 
 .price {
+  margin-top: 4px;
   font-size: 22px;
   font-weight: bold;
   line-height: 1;
 }
 
+.supplement {
+  margin-top: 16px;
+}
+
 @media (max-width: 768px) {
   .store-item {
     --img-size: 232px;