Merge pull request #64 from YNUFes-tech/time-table

タイムスケジュールページの完成

components/SelectButton.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+const props = defineProps({
+  value: {
+    type: String,
+    required: true,
+  },
+  selected: {
+    type: Boolean,
+    required: true,
+  },
+});
+</script>
+
+<template>
+  <button class="select-button" :class="{ selected: props.selected }">
+    {{ props.value }}
+  </button>
+</template>
+
+<style scoped></style>

components/SponsorsListTitle.vue

@@ -13,21 +13,35 @@ const props = defineProps({
   </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 .sponsors-list-title {
-  background: url("/images/sponsors/sponsors-list-title.webp") no-repeat
-    left/contain;
-  width: 20em;
   height: 130px;
   text-align: center;
   display: flex;
   align-items: center;
 
   > h2 {
+    min-width: 8em;
+    width: 100%;
+    text-align: center;
+    position: relative;
     font-size: 2em;
     font-weight: bold;
-    width: 100%;
+    z-index: 10;
     color: var(--thick-font-color);
+
+    &:before {
+      z-index: -1;
+      content: "";
+      position: absolute;
+      bottom: -0.5em;
+      display: block;
+      height: 1em;
+      width: 100%;
+      background: url("/images/sponsors/sponsors-list-title.webp") no-repeat
+        center bottom / contain;
+      margin-top: 0.5em;
+    }
   }
 }
 </style>