10/3/24

components/LinkCard.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { LinkCardProperty } from '~/utils/linkCard';
+const property = defineProps<LinkCardProperty>();
+</script>
+
+<template>
+    <NuxtLink :to="property.link">
+        <div class="image" v-if="property.imagePath" :style="{ backgroundImage: `url(${property.imagePath})` }"></div>
+        <h2>{{ property.title }}</h2>
+        <p>{{ property.description }}</p>
+    </NuxtLink>
+</template>
+
+<style scoped>
+a {
+    display: grid;
+    width: 25rem;
+    height: 30rem;
+    grid: 2fr 1fr 1.5fr / 1fr;
+    background-color: var(--starlight);
+    border-radius: 1rem;
+    text-decoration: none;
+    transition: scale 0.2s ease-in-out;
+}
+
+a:hover {
+    scale: 105%;
+    transition: scale 0.2s ease-in-out;
+}
+
+a > * {
+    margin: 2rem;
+}
+
+.image {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    width: 18rem;
+    height: 12rem;
+    place-self: center;
+}
+
+h2 {
+    position: relative;
+    color: var(--neptune1);
+    background-color: var(--starlight5);
+    border-radius: 1rem;
+    margin: 0 2rem;
+    padding: 1rem 1.75rem;
+    align-self: center;
+    line-height: 2rem;
+}
+
+h2::after {
+    display: block;
+    content: '';
+    position: absolute;
+    width: 7px;
+    height: 2rem;
+    top: 1rem;
+    left: 0.75rem;
+    background-color: var(--neptune1);
+    border-radius: 3px;
+}
+
+p {
+    color: var(--deep-space);
+    margin: 0 2rem;
+}
+</style>

components/NewsCard.vue

@@ -8,11 +8,18 @@ const datePosted = new Date(
     property.newsEntry.date as number
 ).toLocaleDateString("ja-JP", { dateStyle: "medium" });
 
-const coverImagePath = ref<string>(property.newsEntry.coverImagePath ? property.newsEntry.coverImagePath : "/sera-logo-text.svg");
+const coverImagePath = ref<string>(
+    property.newsEntry.coverImagePath
+        ? property.newsEntry.coverImagePath
+        : "/sera-logo-text.svg"
+);
 </script>
 
 <template>
-    <div class="news-card" :style="{ backgroundImage: `url(${coverImagePath})`}">
+    <div
+        class="news-card"
+        :style="{ backgroundImage: `url(${coverImagePath})` }"
+    >
         <NuxtLink
             class="card-content"
             :to="property.newsEntry.linkPath"
@@ -23,19 +30,25 @@ const coverImagePath = ref<string>(property.newsEntry.coverImagePath ? property.
         >
             <p class="news-type article">記事</p>
             <p class="new" v-if="property.isNew">NEW!</p>
-            <p class="content">
+            <div class="content">
                 <article
-                    v-html="marked.parse(property.newsEntry.cardContent as string)"
+                    v-html="
+                        marked.parse(property.newsEntry.cardContent as string)
+                    "
                 ></article>
-            </p>
+            </div>
             <small>{{ datePosted }}</small>
         </NuxtLink>
         <div class="card-content" v-else>
             <p class="news-type tweet">お知らせ</p>
             <p class="new" v-if="property.isNew">NEW!</p>
-            <p class="content">
-                <article v-html="marked.parse(property.newsEntry.cardContent as string)"></article>
-            </p>
+            <div class="content">
+                <article
+                    v-html="
+                        marked.parse(property.newsEntry.cardContent as string)
+                    "
+                ></article>
+            </div>
             <small>{{ datePosted }}</small>
         </div>
     </div>
@@ -65,7 +78,7 @@ const coverImagePath = ref<string>(property.newsEntry.coverImagePath ? property.
     right: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(255,255,255,0.15);
+    background-color: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(5px) brightness(55%);
     color: var(--starlight);
     text-decoration: none;
@@ -108,7 +121,7 @@ const coverImagePath = ref<string>(property.newsEntry.coverImagePath ? property.
 
 .card-content .tweet {
     background-color: var(--venus2);
-    color: var(--venus1);;
+    color: var(--venus1);
 }
 
 .card-content .article {

components/PageTop.vue

@@ -14,7 +14,7 @@ const property = defineProps<PageTopProperty>();
 div {
     display: flex;
     width: 100vw;
-    height: 25vh;
+    height: 12rem;
     margin: 0;
     background-repeat: no-repeat;
     background-position: center;
@@ -26,4 +26,11 @@ div {
     font-size: 36pt;
     font-weight: bold;
 }
+
+@media screen and (max-width: 640px) {
+    div {
+        font-size: 28pt;
+        height: 6rem;
+    }
+}
 </style>

components/TheFooter.vue

@@ -31,7 +31,7 @@ const showThePast = (event: Event) => {
             <div class="top-column">
                 <div class="summary">
                     <h3>
-                        岐阜高専宇宙工学研究会 - {{ SiteInfo.clubNameLong }}
+                        岐阜高専<wbr />宇宙<wbr />工学<wbr />研究会 - {{ SiteInfo.clubNameLong }}
                     </h3>
                     <p>
                         宇宙分野に興味ある学生が<wbr />集い、<wbr />宇宙理工学に<wbr />関する知識を<wbr />身に付けると共に、<wbr />
@@ -195,6 +195,11 @@ footer {
     border-bottom: var(--sunlight) solid 3px;
 }
 
+.summary {
+    word-break: keep-all;
+    overflow-wrap: break-word;
+}
+
 .links ul {
     list-style: none;
     font-weight: 600;
@@ -218,28 +223,28 @@ footer {
     list-style: none;
     display: flex;
     padding: 0;
-    li {
+    & > li {
         margin-right: 0.5rem;
-        a span {
+        & > a span {
             width: 48px;
             height: 48px;
         }
     }
-    li:first-child {
-        a {
+    & > li:first-child {
+        & > a {
             position: relative;
             display: block;
             width: 48px;
             height: 48px;
         }
-        a span {
+        & > a span {
             position: absolute;
         }
     }
-    li:last-child {
+    & > li:last-child {
         margin-right: 0;
     }
-    li:hover {
+    & > li:hover {
         transform: scale(120%);
         transition: all 0.2s ease;
     }
@@ -259,10 +264,6 @@ footer {
         grid-template-columns: auto;
         grid-template-rows: auto auto auto;
     }
-    .summary {
-        word-break: keep-all;
-        overflow-wrap: break-word;
-    }
     .sns-list {
         display: block;
         margin: auto;

components/TheHeader.vue

@@ -6,9 +6,9 @@ const exploreDropDownEntries: Array<DropDownEntry> = [
     { text: "Home", link: "/" },
     { text: "Projects", link: "/projects" },
     { text: "CanSat", link: "/projects/cansat" },
-    { text: "Edu-Robot", link: "/projects/edu-robot" },
-    { text: "CubeSat Kosen-X", link: "/projects/kosen-x" },
     { text: "Rocket", link: "/projects/rocket" },
+    { text: "Edu-Robot", link: "/projects/edu-robot" },
+    { text: "CubeSat KOSEN-X", link: "/projects/kosen-x" },
     { text: "About", link: "/about" },
 ];