added contact page, fixed image size in kosen-x, improved Dropdown component

pages/contact.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import SiteInfo from "~/assets/siteinfo.json";
+const WebsiteMetaData = generateSeoMeta(
+    "Contact SERA",
+    `${SiteInfo.clubNameAbbreviation}へのお問い合わせ`,
+    "/sera-logo-text.svg"
+);
+
+useSeoMeta(WebsiteMetaData);
+</script>
+
+<template>
+    <PageTop text="Contact" image-path="/images/page-top.jpg" />
+    <PankuzuList
+        :currentPageName="`Contact ${SiteInfo.clubNameAbbreviation}`"
+    />
+    <main>
+        <section>
+            <h1>{{ SiteInfo.clubNameAbbreviation }}へのお問い合わせ</h1>
+        </section>
+
+        <section>
+            <iframe
+                src="https://docs.google.com/forms/d/e/1FAIpQLSd2a8WMfu4v5potmKbwIPJ7fKfL2xpVhaTN6ys2J1A-dRU3sw/viewform?embedded=true"
+                width="100%"
+                height="950"
+                frameborder="0"
+                marginheight="0"
+                marginwidth="0"
+                >読み込んでいます…</iframe
+            >
+        </section>
+    </main>
+</template>
+
+<style scoped>
+main {
+    width: clamp(300px, 70%, 36rem);
+    margin: auto;
+}
+</style>

pages/index.vue

@@ -2,6 +2,7 @@
 import { marked } from "marked";
 import { EntryType, type NewsEntry } from "~/utils/types/news";
 import type { SlideEntry } from "~/utils/types/slide";
+import SiteInfo from "~/assets/siteinfo.json";
 
 const { data } = await useFetch("/api/getNewsList");
 
@@ -31,7 +32,7 @@ const welcomeSlide: Array<SlideEntry> = [
     {
         imagePath: "/images/welcome.jpg",
         title: "ようこそ！",
-        content: "岐阜高専宇宙工学研究会【SERA】のホームページです。",
+        content: `岐阜高専宇宙工学研究会【${SiteInfo.clubNameAbbreviation}】のホームページです。`,
         link: undefined,
     },
 ];
@@ -213,19 +214,20 @@ main:last-child {
 #quick-links {
     --quick-link-margin: 1rem;
     display: grid;
-    width: calc(100vw - 40 * var(--quick-link-margin));
-    height: calc(100vw / 3 * 1 / 3);
+    width: calc(100vw - 2 * var(--quick-link-margin));
+    height: calc(100vw / 9);
+    min-height: 10rem;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: 1fr;
-    margin: var(--quick-link-margin) calc(20 * var(--quick-link-margin));
+    margin: var(--quick-link-margin);
     align-items: center;
 }
 
 .quick-link-entry {
     position: relative;
     width: 100%;
-    height: auto;
-    aspect-ratio: 3/1;
+    height: 100%;
+    min-height: 10rem;
     background-position: center;
     background-size: cover;
     background-color: #414141cb;
@@ -334,6 +336,7 @@ main:last-child {
     max-width: 100%;
     overflow-x: hidden;
     grid-area: twitter;
+    margin-top: 1rem;
     & > .twitter-timeline {
         display: unset !important;
         width: unset !important;

pages/projects/kosen-x.vue

@@ -83,6 +83,6 @@ section:last-of-type {
 }
 
 img {
-    width: 60rem;
+    width: clamp(300px, 40vw, 60rem);
 }
 </style>