Updated and added pages

components/DropDown.vue

@@ -48,10 +48,6 @@ const handleFocusOutEvent = () => {
             mouseover: handleMouseHoverEvent,
             mouseleave: handleMouseHoverEvent,
         }"
-        v-if="
-            (showInMobile === true && viewPortType !== ViewPortType.DESKTOP) ||
-            (showInMobile === false && viewPortType !== ViewPortType.MOBILE)
-        "
     >
         <button
             class="dropdown-label"

components/LinkCard.vue

@@ -1,11 +1,16 @@
 <script setup lang="ts">
-import type { LinkCardProperty } from '~/utils/linkCard';
+import type { LinkCardProperty } from "~/utils/linkCard";
 const property = defineProps<LinkCardProperty>();
+const doesNotHaveImage = ref<boolean>(property.imagePath === undefined);
 </script>
 
 <template>
-    <NuxtLink :to="property.link">
-        <div class="image" v-if="property.imagePath" :style="{ backgroundImage: `url(${property.imagePath})` }"></div>
+    <NuxtLink :to="property.link" :class="{ withoutImage: doesNotHaveImage }">
+        <div
+            class="image"
+            v-if="property.imagePath"
+            :style="{ backgroundImage: `url(${property.imagePath})` }"
+        ></div>
         <h2>{{ property.title }}</h2>
         <p>{{ property.description }}</p>
     </NuxtLink>
@@ -29,7 +34,12 @@ a:hover {
 }
 
 a > * {
-    margin: 2rem;
+    margin: 0 2rem;
+}
+
+.withoutImage {
+    grid: 1fr 1.5fr / 1fr;
+    height: 15rem;
 }
 
 .image {
@@ -38,6 +48,8 @@ a > * {
     background-size: cover;
     width: 18rem;
     height: 12rem;
+    margin-top: 1.75rem;
+    margin-bottom: 0.75rem;
     place-self: center;
 }
 
@@ -54,7 +66,7 @@ h2 {
 
 h2::after {
     display: block;
-    content: '';
+    content: "";
     position: absolute;
     width: 7px;
     height: 2rem;
@@ -68,4 +80,39 @@ p {
     color: var(--deep-space);
     margin: 0 2rem;
 }
-</style>
+
+@media screen and (max-width: 1024px) {
+    a {
+        width: 20rem;
+        height: 25rem;
+    }
+    a > * {
+        margin: 0 1rem;
+    }
+    h2 {
+        font-size: 16pt;
+    }
+    .image {
+        width: 16rem;
+        height: 10rem;
+    }
+}
+
+@media screen and (max-width: 640px) {
+    a {
+        width: 16rem;
+        height: 21rem;
+    }
+    a > * {
+        margin: 0 0.75rem;
+    }
+    h2 {
+        font-size: 16pt;
+    }
+    .image {
+        width: 12rem;
+        height: 8rem;
+        margin-top: 0.75rem;
+    }
+}
+</style>

components/PageTop.vue

@@ -14,7 +14,7 @@ const property = defineProps<PageTopProperty>();
 div {
     display: flex;
     width: 100vw;
-    height: 12rem;
+    height: 16rem;
     margin: 0;
     background-repeat: no-repeat;
     background-position: center;

components/PankuzuList.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const route = useRoute();
+const router = useRouter();
+
+console.log(route.path);
+console.log(router.getRoutes());
+console.log(router.resolve({ name: "news" }));
+
+const getLinkArray = (): Array<string> => {
+    let links = route.fullPath.split("/");
+    return links.map<string>((value) => {
+        return "/" + value;
+    });
+};
+
+const linkArray = getLinkArray();
+</script>
+
+<template>
+    <div>Pankuzu List</div>
+    <nav>
+        <ul>
+            <li v-for="link in linkArray">
+                <NuxtLink
+                    :to="link"
+                    v-if="linkArray.indexOf(link) !== linkArray.length - 1"
+                >
+                    {{ link }}
+                </NuxtLink>
+                <p v-else>{{ link }}</p>
+            </li>
+        </ul>
+    </nav>
+</template>
+
+<style scoped>
+ul {
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+}
+</style>

components/QAndABox.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { QAndABoxProperty } from "~/utils/qAndABox";
+const property = defineProps<QAndABoxProperty>();
+</script>
+
+<template>
+    <div class="q-and-a">
+        <h2>{{ property.question }}</h2>
+        <div>
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.q-and-a {
+    max-width: 1105px;
+    width: 80vw;
+}
+
+.q-and-a > h2 {
+    color: var(--deep-space);
+    background-color: var(--starlight1);
+    border-radius: 1rem;
+    font-weight: 600;
+    line-height: 2;
+    padding-inline: 1.5rem;
+}
+
+.q-and-a > div {
+    width: 90%;
+    margin-inline: 3rem;
+}
+</style>

components/TheFooter.vue

@@ -31,15 +31,16 @@ const showThePast = (event: Event) => {
             <div class="top-column">
                 <div class="summary">
                     <h3>
-                        岐阜高専<wbr />宇宙<wbr />工学<wbr />研究会 - {{ SiteInfo.clubNameLong }}
+                        岐阜高専<wbr />宇宙<wbr />工学<wbr />研究会 -
+                        {{ SiteInfo.clubNameLong }}
                     </h3>
                     <p>
                         宇宙分野に興味ある学生が<wbr />集い、<wbr />宇宙理工学に<wbr />関する知識を<wbr />身に付けると共に、<wbr />
                         宇宙分野に関連する<wbr />各種競技会へ<wbr />参加して<wbr />人間力と実践力を<wbr />養うことを目的に<wbr />活動しています。
                     </p>
-                    <NuxtLink to="/about/sera"
-                        >About {{ SiteInfo.clubNameAbbreviation }}</NuxtLink
-                    >
+                    <NuxtLink to="/about/sera">
+                        About {{ SiteInfo.clubNameAbbreviation }}
+                    </NuxtLink>
                 </div>
                 <div class="links">
                     <ul>
@@ -64,12 +65,12 @@ const showThePast = (event: Event) => {
                                 </li>
                                 <li>
                                     <NuxtLink to="/projects/kosen-x">
-                                        CubeSat Kosen-x
+                                        CubeSat KOSEN-X
                                     </NuxtLink>
                                 </li>
                                 <li>
-                                    <NuxtLink to="/projects/edu-robot">
-                                        Edu-Robot
+                                    <NuxtLink to="/projects/education">
+                                        教育プロジェクト
                                     </NuxtLink>
                                 </li>
                             </ul>
@@ -118,6 +119,14 @@ const showThePast = (event: Event) => {
                                 <Icon name="simple-icons:instagram" />
                             </NuxtLink>
                         </li>
+                        <li>
+                            <NuxtLink
+                                to="https://github.com/SERA-NIT-Gifu-College"
+                                target="_blank"
+                            >
+                                <Icon name="simple-icons:github" />
+                            </NuxtLink>
+                        </li>
                     </ul>
                 </div>
             </div>
@@ -224,7 +233,7 @@ footer {
     display: flex;
     padding: 0;
     & > li {
-        margin-right: 0.5rem;
+        margin: 0 0.5rem;
         & > a span {
             width: 48px;
             height: 48px;

components/TheHeader.vue

@@ -7,7 +7,7 @@ const exploreDropDownEntries: Array<DropDownEntry> = [
     { text: "Projects", link: "/projects" },
     { text: "CanSat", link: "/projects/cansat" },
     { text: "Rocket", link: "/projects/rocket" },
-    { text: "Edu-Robot", link: "/projects/edu-robot" },
+    { text: "Edu-Robot", link: "/projects/education" },
     { text: "CubeSat KOSEN-X", link: "/projects/kosen-x" },
     { text: "About", link: "/about" },
 ];
@@ -27,7 +27,7 @@ const mediaDropDownEntries: Array<DropDownEntry> = [
                     :mode="DropDownMode.onClick"
                     :alignment="DropDownAlignment.Left"
                     :entries="exploreDropDownEntries"
-                    :show-in-mobile="false"
+                    class="left-dropdown"
                 />
             </div>
             <div id="logo-link">
@@ -41,7 +41,7 @@ const mediaDropDownEntries: Array<DropDownEntry> = [
                     :mode="DropDownMode.onClick"
                     :alignment="DropDownAlignment.Right"
                     :entries="mediaDropDownEntries"
-                    :show-in-mobile="false"
+                    class="right-dropdown"
                 />
             </div>
         </div>
@@ -51,6 +51,9 @@ const mediaDropDownEntries: Array<DropDownEntry> = [
 <style scoped>
 header {
     width: 100vw;
+    position: sticky;
+    top: 0;
+    z-index: 10;
 }
 
 .navigation-menu {
@@ -104,4 +107,11 @@ header {
     height: auto;
     background: transparent !important;
 }
+
+@media screen and (max-width: 640px) {
+    .left-dropdown,
+    .right-dropdown {
+        display: none;
+    }
+}
 </style>