added PageTop component, markdown styles, white background on logo svg, and documentation comments

components/DropDown.vue

@@ -133,6 +133,7 @@ const handleFocusOutEvent = () => {
     font-weight: bold;
     position: absolute;
     top: auto;
+    z-index: 100;
     min-width: 100%;
     width: fit-content;
     text-wrap: nowrap;

components/NewsCard.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import type { NewsCardProperty } from "~/utils/newsCard";
+import { marked } from "marked";
+
+const property = defineProps<NewsCardProperty>();
+
+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");
+</script>
+
+<template>
+    <div class="news-card" :style="{ backgroundImage: `url(${coverImagePath})`}">
+        <NuxtLink
+            class="card-content"
+            :to="property.newsEntry.linkPath"
+            v-if="
+                property.newsEntry.linkPath !== null &&
+                property.newsEntry.entryType === EntryType.Article
+            "
+        >
+            <p class="news-type article">記事</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>
+            <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>
+            <small>{{ datePosted }}</small>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.news-card {
+    width: 15rem;
+    height: 18rem;
+    position: relative;
+    border-radius: 1rem;
+    box-shadow: 10px 5px 5px var(--starlight1);
+    background: inherit;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: local;
+    background-size: cover;
+}
+
+.card-content {
+    display: block;
+    border-radius: 1rem;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255,255,255,0.15);
+    backdrop-filter: blur(5px) brightness(55%);
+    color: var(--starlight);
+    text-decoration: none;
+}
+
+.card-content .content {
+    font-size: larger;
+    font-weight: 400;
+    margin-top: 2.75rem;
+}
+
+.card-content article,
+.card-content img {
+    margin: 0 1rem;
+}
+
+.card-content img {
+    margin-top: 3rem;
+    width: 10rem;
+    height: auto;
+    padding: 0.25rem;
+    margin-left: 1.75rem;
+}
+
+.card-content img[src="/sera-logo-text.svg"] {
+    background-color: var(--starlight);
+}
+
+.card-content .news-type {
+    position: absolute;
+    margin: 0;
+    padding-top: 0.25rem;
+    width: 6rem;
+    height: 2rem;
+    text-align: center;
+    font-weight: 600;
+    border-top-left-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+}
+
+.card-content .tweet {
+    background-color: var(--venus2);
+    color: var(--venus1);;
+}
+
+.card-content .article {
+    background-color: var(--venus1);
+    color: var(--astronaut);
+}
+
+.card-content .new {
+    position: absolute;
+    margin: 0;
+    right: 0;
+    padding-top: 0.25rem;
+    width: 4rem;
+    height: 2rem;
+    background-color: var(--sun2);
+    color: var(--astronaut);
+    text-align: center;
+    font-weight: 600;
+    border-top-right-radius: 1rem;
+    border-bottom-left-radius: 1rem;
+}
+
+.card-content small {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 6rem;
+    height: 2rem;
+    margin: 0;
+    background-color: var(--starship);
+    color: var(--astronaut);
+    text-align: center;
+    padding-top: 0.5rem;
+    font-weight: 500;
+    border-top-left-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+}
+</style>

components/NewsList.vue

@@ -1,7 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-    <div>Component: newslist</div>
-</template>
-
-<style scoped></style>

components/PageTop.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { PageTopProperty } from "~/utils/pageTop";
+
+const property = defineProps<PageTopProperty>();
+</script>
+
+<template>
+    <div :style="{ backgroundImage: `url(${property.imagePath})` }">
+        {{ property.text }}
+    </div>
+</template>
+
+<style scoped>
+div {
+    display: flex;
+    width: 100vw;
+    height: 25vh;
+    margin: 0;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-attachment: local;
+    background-size: cover;
+    align-items: center;
+    justify-content: center;
+    color: var(--starlight1);
+    font-size: 36pt;
+    font-weight: bold;
+}
+</style>

components/TheFooter.vue

@@ -30,7 +30,9 @@ const showThePast = (event: Event) => {
             </div>
             <div class="top-column">
                 <div class="summary">
-                    <h3>{{ SiteInfo.clubNameLong }}</h3>
+                    <h3>
+                        岐阜高専宇宙工学研究会 - {{ SiteInfo.clubNameLong }}
+                    </h3>
                     <p>
                         宇宙分野に興味ある学生が<wbr />集い、<wbr />宇宙理工学に<wbr />関する知識を<wbr />身に付けると共に、<wbr />
                         宇宙分野に関連する<wbr />各種競技会へ<wbr />参加して<wbr />人間力と実践力を<wbr />養うことを目的に<wbr />活動しています。
@@ -181,6 +183,7 @@ footer {
     & svg {
         width: auto;
         height: 56px;
+        background: transparent !important;
     }
 }
 

components/TheHeader.vue

@@ -49,12 +49,17 @@ const mediaDropDownEntries: Array<DropDownEntry> = [
 </template>
 
 <style scoped>
+header {
+    width: 100vw;
+}
+
 .navigation-menu {
     display: grid;
     grid-template-rows: 1fr;
     grid-template-columns: 1fr 1fr 1fr;
     line-height: 1.8;
     padding: 1.25rem 3rem;
+    width: calc(100% - 6rem);
     height: 64px;
     background: var(--deep-space);
 }
@@ -97,5 +102,6 @@ const mediaDropDownEntries: Array<DropDownEntry> = [
 #logo-img {
     width: 128px;
     height: auto;
+    background: transparent !important;
 }
 </style>