added responsive styles to pankuzulist and slide component. Added subdivision to tablet viewport type.

components/BackToTop.vue

@@ -49,7 +49,7 @@ const triggerDistance = 100;
 
 @media screen and (max-width: 640px) {
     .back-to-top {
-        scale: 75%;
+        scale: 90%;
         bottom: 1rem;
         right: 1rem;
     }

components/PankuzuList.vue

@@ -44,8 +44,7 @@ ul {
     display: inline-flex;
     align-items: center;
     width: var(--list-width);
-    padding: 0;
+    padding: 0 0 0 max(3rem, calc(50vw - var(--list-width)));
-    transform: translateX(50vw) translateX(calc(-1 * var(--list-width)));
 }
 
 ul li {

components/Slide.vue

@@ -227,14 +227,14 @@ ul {
 
 .content {
     position: absolute;
-    top: 50%;
+    top: 20%;
     left: 50%;
     transform: translateX(-50%) translateY(-1.5vw);
     display: flex;
     flex-direction: column;
     & > h1 {
         margin: auto 0;
-        font-size: 3vw;
+        font-size: clamp(3rem, 3vw, 5rem);
         text-align: center;
         color: var(--starlight);
     }
@@ -242,8 +242,9 @@ ul {
         height: 3rem;
         justify-self: center;
         color: var(--starlight);
-        font-size: 14pt;
+        font-size: clamp(14pt, 1.5vw, 24pt);
         font-weight: 600;
+        text-align: center;
     }
     & > a {
         width: fit-content;
@@ -253,7 +254,7 @@ ul {
         color: var(--uranus);
         text-decoration: none;
         font-weight: bold;
-        font-size: 16pt;
+        font-size: clamp(16pt, 1.5vw, 20pt);
         place-self: center;
         transition: all 0.3s ease;
     }
@@ -270,7 +271,7 @@ ul {
 .controler {
     display: flex;
     position: absolute;
-    bottom: 2rem;
+    bottom: 1rem;
     right: 1rem;
     & > button {
         display: flex;
@@ -279,6 +280,7 @@ ul {
         background-color: rgba(100, 100, 100, 0.8);
         width: 4rem;
         height: 4rem;
+        margin-inline: 0.25rem;
     }
     & > button:hover {
         cursor: pointer;
@@ -326,4 +328,13 @@ ul {
         border-radius: 4rem;
     }
 }
+
+@media screen and (max-width: 960px) {
+    .controler {
+        flex-direction: column;
+    }
+    .preview {
+        margin: 0.25rem 0;
+    }
+}
 </style>

components/TheHeader.vue

@@ -65,7 +65,10 @@ const hamburgerMenuEntries: Array<DropDownEntry> = [
                 />
                 <HamburgerMenu
                     :entries="hamburgerMenuEntries"
-                    v-if="viewPortType === ViewPortType.MOBILE"
+                    v-if="
+                        viewPortType === ViewPortType.MOBILE ||
+                        viewPortType === ViewPortType.MEDIUM_TABLET
+                    "
                 />
             </div>
         </div>
@@ -132,7 +135,7 @@ header {
     background: transparent !important;
 }
 
-@media screen and (max-width: 640px) {
+@media screen and (max-width: 960px) {
     .navigation-menu {
         padding-inline: 1rem;
         width: calc(100% - 2rem);

composables/windowDimensions.ts

@@ -3,7 +3,8 @@
  * @module composables/windowDimensions
  */
 
-const tabletMaxWidth = 1024;
+const largeTabletMaxWidth = 1024;
+const mediumTabletMaxWidth = 960;
 const mobileMaxWidth = 640;
 
 /**
@@ -13,7 +14,8 @@ const mobileMaxWidth = 640;
  */
 const enum ViewPortType {
     DESKTOP,
-    TABLET,
+    LARGE_TABLET,
+    MEDIUM_TABLET,
     MOBILE,
 }
 
@@ -29,12 +31,14 @@ function useWindowDimensions() {
     function update(event: Event | undefined) {
         width.value = window.innerWidth;
         height.value = window.innerHeight;
-        if (width.value >= tabletMaxWidth) {
+        if (width.value > largeTabletMaxWidth) {
             viewPortType.value = ViewPortType.DESKTOP;
-        } else if (width.value < mobileMaxWidth) {
+        } else if (width.value > mediumTabletMaxWidth) {
-            viewPortType.value = ViewPortType.MOBILE;
+            viewPortType.value = ViewPortType.LARGE_TABLET;
+        } else if (width.value > mobileMaxWidth) {
+            viewPortType.value = ViewPortType.MEDIUM_TABLET;
         } else {
-            viewPortType.value = ViewPortType.TABLET;
+            viewPortType.value = ViewPortType.MOBILE;
         }
     }
 

docs/assets/navigation.js

@@ -1 +1 @@
-window.navigationData = "data:application/octet-stream;base64,H4sIAAAAAAAAA62Xb0/bMBDGv0teo7Ghwba+K5R1SBR1tIIXaKrcxG2tOnbmOArdxHefk+afHds5tIoXSL3nfvecz9ekL38DiV9lMApQQoKzINwRGgnMgtFLE9liORaShBQrQYLkTn0W8yijOD1XWas2/mEnY6pEe8KiYHRhx0V4gzIqW9YmY6EknPVolVKnXn1++/V2ZjF3T1I5ZLDQnNZkSQQanSJKsTjcxWiLU6dVTXUiszoTaHdJYvfEi+CJzJUot6euq5DHCU/RmpbnZyuXhoJTOlFTQSy02O8QVroW1E2W4oWjQtuXp0Yv3zuEXH3I84k6H5YWZH87phrU0BPB+ZwLuTwknV4wy+IBeDdRr/S104Hq99nZhP3EepUsjIFrkklCXRcEpQcWTpBEa5Ra7keZutJEoHPUMh55nt6olVujcP+9arItJdWJ2QsNQgwrH799+XR50WlcAzxxEv23CxvkXS4eMYpsIx/uXyX25uwo8iyItK7iYJUy07uEkeDJhOfMdVfqOOiaTCrxmJItU7dZmjtnMHt696rV0hmPepvsoBbSYeAtk+LQEgmTWGxQ2D8ALcE4jssrC3mu/mMh3wWvc/p87fF1fOAZ1vXBdTWg4U2t0J5ljTt1FzEtY4YFkniB+QxL5HSty0DGnWhzUUy4t5ixJzsUrzOxxWKm7pzLvSYCef/RzQBcGL2CNds/B0rY/gaJyNVCHQe5v6/EAOMN18zx22U4t7wXHJFFDGSzvJ62V4AOp9G4vzGqd+I7tuGeRktaR+r7pnhQ2qF9K3mNcPi0fMOt46BTe6jEgOE2XDPHbzdR7+tLnrjcVmGQ2flRC/BaU42MIadsn/3J7D/Cam4jATpu9CDXLd2S6Xf/e8yi8TV/dVmv4yDfPysxwHTDNXP8dlNK1INbOve+jK8kbPcXhXhoxxpiq/atbakC9K9jfc2rv39WMe4jrBAAAA=="
+window.navigationData = "data:application/octet-stream;base64,H4sIAAAAAAAAA62X204bMRCG38XXEW1RoW3uAmkpEiBKEFygKHLWk8SK197aXi1plXevstmTvbbXqFzPP9/84/Hs4eUv0vCq0RjhjKIRSjaUEQkcjV+ayBr0RGqaMEAjlGG9QWOUCpIzUB9wRhdt/GSjU4ZGaEs5QeNTN47ACudMt6xVzhNNBe/RKqVJPf+8n+9HDnM3VOkhgwfN+5osiZFGrzBjIHfXKV6D8lo1VO9k1mRG2n2kqX/ih+A7mStRfk9dV4lIM6HwkpXn5yqnEikYm1KlMU8c9juEhamN6iZXMPNUaPsK1OjlB4dQUE5EMaUpcHUgh9ux1VENPVEo7oXUj7us0wvwPB2AdxPNSl87HeQKnr1NuE+sV8nBGLgmuabMd0Gw2vFkijVeYuW4H2XqwhBFnaOR8SAKdYkZW+Jk+6Nqsi2ld5mn0CDEsvLx25dPZ6edxg3Ak6Dkv124IG9y8QCYuEY+3D9g0puzp8izpNq5ioNVyszgEhIpsqkouO+u1PGoazKtxBNG1zwFru2ds5g9vX/VaumtIL1N9lAP0mHgd67lriVSrkGucNI/ACPBOo6zcwf5XooMpH4TvM7p843X1/GFZ1k3B9fVRA3vygntWTa4V/4itmXgILGGGYhb0Njr2pRFGfei7UWx4cFi1p5scLrM5RrkLfDc594QRXn/2c2IuDBmBWd2eA6M8u0llsTXQh2Pcn9TiSOMN1w7J2yXQ+H4LjgiD7Eom+X1dH0CdDiNxv/EqL6Jr/lKBBotaR1p6ElxB4Ua2reS1wiHTys03DoedWp3lThiuA3XzgnbzfAaHkXmc1uFo8zeH7URXmuqlTHklG/zP7n7J6zmNpJIx40+ynVLd2SG3f+ecDK5EK8+63U8yvevShxhuuHaOWG7ilECJ9q792V8oeN2f3YQD+1YQ2zVobUtVRH9m9hQ8/P9/B9WMe4jrBAAAA=="

docs/assets/search.js

@@ -1 +1 @@
-window.searchData = "data:application/octet-stream;base64,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";
+window.searchData = "data:application/octet-stream;base64,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";

docs/functions/composables_windowDimensions.useWindowDimensions.html

@@ -1,3 +1,3 @@
 <!DOCTYPE html><html class="default" lang="en"><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>useWindowDimensions | sera-hp</title><meta name="description" content="Documentation for sera-hp"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">sera-hp</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">sera-hp</a></li><li><a href="../modules/composables_windowDimensions.html">composables/windowDimensions</a></li><li><a href="composables_windowDimensions.useWindowDimensions.html">useWindowDimensions</a></li></ul><h1>Function useWindowDimensions</h1></div><section class="tsd-panel"><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="useWindowDimensions" class="tsd-anchor"></a><span class="tsd-kind-call-signature">use<wbr/>Window<wbr/>Dimensions</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">{ </span><br/><span>    </span><span class="tsd-kind-property">height</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><span class="tsd-kind-property">viewPortType</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><a href="../enums/composables_windowDimensions.ViewPortType.html" class="tsd-signature-type tsd-kind-enum">ViewPortType</a><span class="tsd-signature-symbol">, </span><a href="../enums/composables_windowDimensions.ViewPortType.html" class="tsd-signature-type tsd-kind-enum">ViewPortType</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><span class="tsd-kind-property">width</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">; </span><br/><span class="tsd-signature-symbol">}</span><a href="#useWindowDimensions" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Vue Composable for getting window dimensions and viewport type based on width</p>
 </div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-symbol">{ </span><br/><span>    </span><span class="tsd-kind-property">height</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><span class="tsd-kind-property">viewPortType</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><a href="../enums/composables_windowDimensions.ViewPortType.html" class="tsd-signature-type tsd-kind-enum">ViewPortType</a><span class="tsd-signature-symbol">, </span><a href="../enums/composables_windowDimensions.ViewPortType.html" class="tsd-signature-type tsd-kind-enum">ViewPortType</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">; </span><br/><span>    </span><span class="tsd-kind-property">width</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">; </span><br/><span class="tsd-signature-symbol">}</span></h4><p>returns the references of width, height, and viewport type</p>
-<ul class="tsd-parameters"><li class="tsd-parameter"><h5><span class="tsd-kind-property">height</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span></h5></li><li class="tsd-parameter"><h5><span class="tsd-kind-property">view<wbr/>Port<wbr/>Type</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><a href="../enums/composables_windowDimensions.ViewPortType.html" class="tsd-signature-type tsd-kind-enum">ViewPortType</a><span class="tsd-signature-symbol">, </span><a href="../enums/composables_windowDimensions.ViewPortType.html" class="tsd-signature-type tsd-kind-enum">ViewPortType</a><span class="tsd-signature-symbol">&gt;</span></h5></li><li class="tsd-parameter"><h5><span class="tsd-kind-property">width</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span></h5></li></ul><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in composables/windowDimensions.ts:24</li></ul></aside></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>sera-hp</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>
+<ul class="tsd-parameters"><li class="tsd-parameter"><h5><span class="tsd-kind-property">height</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span></h5></li><li class="tsd-parameter"><h5><span class="tsd-kind-property">view<wbr/>Port<wbr/>Type</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><a href="../enums/composables_windowDimensions.ViewPortType.html" class="tsd-signature-type tsd-kind-enum">ViewPortType</a><span class="tsd-signature-symbol">, </span><a href="../enums/composables_windowDimensions.ViewPortType.html" class="tsd-signature-type tsd-kind-enum">ViewPortType</a><span class="tsd-signature-symbol">&gt;</span></h5></li><li class="tsd-parameter"><h5><span class="tsd-kind-property">width</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Ref</span><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">&gt;</span></h5></li></ul><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><ul><li>Defined in composables/windowDimensions.ts:26</li></ul></aside></li></ul></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>sera-hp</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html>

pages/about/gallery.vue

@@ -11,6 +11,8 @@ const imagePathViewer = ref<string>("");
 const captionViewer = ref<string>("");
 const indexViewer = ref<number>(0);
 
+const scrollDistance = useScrollDistance();
+
 const openViewer = (entry: GalleryEntry) => {
     showViewer.value = true;
     imagePathViewer.value = entry.imagePath;
@@ -88,15 +90,16 @@ useSeoMeta(
 
 <style scoped>
 main {
-    justify-self: center;
+    width: calc(100vw - (2 * var(--main-margin-left-right)));
 }
 
 .image-list {
-    width: fit-content;
+    width: 80%;
     display: grid;
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: repeat(auto-fit, 20rem);
     grid-template-rows: auto;
     gap: 20px;
+    justify-items: center;
 }
 
 .image-thumbnail {
@@ -131,7 +134,7 @@ main {
 
 .image-viewer {
     position: absolute;
-    top: 0;
+    top: v-bind(scrollDistance + "px");
     left: 0;
     z-index: 10;
     display: grid;
@@ -147,7 +150,7 @@ main {
 }
 
 .image-viewer img {
-    width: max-content;
+    width: min(60vw, auto);
     height: auto;
     max-height: 80vh;
     grid-area: image;
@@ -210,6 +213,12 @@ main {
 .image-viewer-transition-leave-to {
     opacity: 0;
 }
+
+@media screen and (max-width: 640px) {
+    main {
+        margin-inline: 1rem;
+    }
+}
 </style>
 
 <style>

pages/about/index.vue

@@ -9,7 +9,7 @@ useSeoMeta(
 </script>
 
 <template>
-    <PageTop text="About Us" image-path="/images/page-top.jpg" />
+    <PageTop text="クラブ情報" image-path="/images/page-top.jpg" />
     <PankuzuList />
     <main>
         <ul>

pages/index.vue

@@ -1,10 +1,42 @@
 <script setup lang="ts">
 import { marked } from "marked";
-import type { EntryType, SlideEntry } from "#imports";
+import { EntryType } from "#imports";
+import type { SlideEntry } from "#imports";
 
 const { data } = await useFetch("/api/getNewsList");
 
-const slideEntries: Array<SlideEntry> = [
+const getNewsEntriesForSlide = (): Array<SlideEntry> => {
+    let res: Array<SlideEntry> = [];
+    const latestNewsNumber = 2;
+    for (let i = 0; i < latestNewsNumber; i++) {
+        const news = data.value?.at(i) as NewsEntry;
+        if (news === undefined) break;
+        res[i] = {
+            imagePath:
+                news.coverImagePath === ""
+                    ? "/images/slide-default.jpg"
+                    : (news.coverImagePath as string),
+            title: "News!",
+            content: news.cardContent as string,
+            link:
+                news.entryType === EntryType.Tweet
+                    ? undefined
+                    : (news.linkPath as string),
+        };
+    }
+    return res;
+};
+
+const welcomeSlide: Array<SlideEntry> = [
+    {
+        imagePath: "/images/welcome.jpg",
+        title: "ようこそ！",
+        content: "岐阜高専宇宙工学研究会【SERA】のホームページです。",
+        link: undefined,
+    },
+];
+
+const slidesForProjects: Array<SlideEntry> = [
     {
         imagePath: "/images/rocket_top.jpg",
         title: "Rocket開発チーム",
@@ -25,6 +57,10 @@ const slideEntries: Array<SlideEntry> = [
     },
 ];
 
+let slideEntries = ref<Array<SlideEntry>>(
+    welcomeSlide.concat(getNewsEntriesForSlide(), slidesForProjects)
+);
+
 onMounted(() => {
     const twitterScript = document.createElement("script");
     const twitterDivision = document.getElementById("twitter");
@@ -47,9 +83,9 @@ useSeoMeta(
     <main>
         <Slide
             :entries="slideEntries"
-            :duration="5000"
+            :duration="6000"
             width="100vw"
-            height="35rem"
+            height="calc(100svh - 104px)"
             id="slide"
         />
         <div id="news-board">
@@ -112,6 +148,7 @@ main {
         "slide slide"
         "news twitter";
     margin: 0;
+    width: 100vw;
 }
 
 main > *:not(#slide) {
@@ -125,7 +162,7 @@ main > *:not(#slide) {
 #news-board {
     max-width: 60rem;
     max-height: 50rem;
-    width: fit-content;
+    width: minmax(auto, 60vw);
     place-self: center;
     overflow-y: scroll;
     border: var(--neptune1) solid 3px;
@@ -190,7 +227,8 @@ main > *:not(#slide) {
 #twitter {
     display: flex;
     place-self: center;
-    width: fit-content;
+    max-width: 100%;
+    overflow-x: hidden;
     grid-area: twitter;
     & > .twitter-timeline-rendered {
         display: unset !important;
@@ -202,20 +240,23 @@ main > *:not(#slide) {
 
 @media screen and (max-width: 1024px) {
     main {
-        width: calc(100vw - 4rem);
-        margin: 0;
         place-self: center;
         place-content: center;
-        grid: auto auto auto / 75vw;
+        grid-template-rows: repeat(3, auto);
+        grid-template-columns: 1fr;
         grid-template-areas:
             "slide"
             "news"
             "tweet";
     }
 
+    #slide {
+        margin: auto;
+    }
+
     #news-board {
         margin: 1rem 0;
-        width: 90%;
+        width: calc(90vw - 4rem);
     }
 
     #news-list {
@@ -239,10 +280,14 @@ main > *:not(#slide) {
 
     #twitter {
         margin: 1rem 0;
-        width: 90%;
+        width: calc(90vw - 4rem);
         justify-self: center;
         justify-content: center;
         position: relative;
+        grid-column-start: 1;
+        grid-column-end: 2;
+        grid-row-start: 3;
+        grid-row-end: 4;
         & > .twitter-timeline-rendered iframe {
             position: absolute;
             inset: 50% auto auto 50%;

public/images/licenseNotices.md

@@ -1,2 +1,4 @@
 * ![news-top.jpg](./news-top.jpg) Source: [https://images-assets.nasa.gov/image/2013-2531/2013-2531~orig.jpg](https://images-assets.nasa.gov/image/2013-2531/2013-2531~orig.jpg), Photographer: NASA_Jim Grossmann, Date Created: 2013-06-03
 * ![page-top.jpg](./page-top.jpg) Source: [https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/It%E2%80%99s_a_car%21_It%E2%80%99s_a_train%21_No%2C_it%E2%80%99s_Jupiter%21_%28potw2146a%29.jpg/1024px-It%E2%80%99s_a_car%21_It%E2%80%99s_a_train%21_No%2C_it%E2%80%99s_Jupiter%21_%28potw2146a%29.jpg](https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/It%E2%80%99s_a_car%21_It%E2%80%99s_a_train%21_No%2C_it%E2%80%99s_Jupiter%21_%28potw2146a%29.jpg/1024px-It%E2%80%99s_a_car%21_It%E2%80%99s_a_train%21_No%2C_it%E2%80%99s_Jupiter%21_%28potw2146a%29.jpg), Photographer: ESO(European Southern Observatory)/P. Horálek, Date Created: 2021-11-15, Licence: [Creative Commons Attribution 4.0 International License](http://creativecommons.org/licenses/by/4.0/)
+* ![welcome.jpg](./welcome.jpg) Source: [https://images-assets.nasa.gov/image/GRC-2024-C-10116/GRC-2024-C-10116~medium.jpg](https://images-assets.nasa.gov/image/GRC-2024-C-10116/GRC-2024-C-10116~medium.jpg), Photographer: NASA/GRC/Jef Janis, Date Created: 2024-09-17
+* ![slide-default.jpg](./slide-default.jpg) Source: [https://images-assets.nasa.gov/image/PIA11141/PIA11141~medium.jpg](https://images-assets.nasa.gov/image/PIA11141/PIA11141~medium.jpg), Photographer: NASA/JPL/Space Science Institute, Date Created: 2008-12-30

src-manager/package-lock.json

@@ -18,9 +18,9 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.25.7",
+      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.7.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
-      "integrity": "sha512-CbkjYdsJNHFk8uqpEkpCvRs3YRp9tY6FmFY7wLMSYuGYkrdUi7r2lc4/wqsvlHoMznX3WJ9IP8giGPq68T/Y6g==",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -28,9 +28,9 @@
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.25.7",
+      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.7.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
-      "integrity": "sha512-AM6TzwYqGChO45oiuPqwL2t20/HdMC1rTPAesnBCgPCSF1x3oN9MVUwQV2iyz4xqWrctwK5RNC8LV22kaQCNYg==",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -38,13 +38,13 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.25.7",
+      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.7.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.9.tgz",
-      "integrity": "sha512-aZn7ETtQsjjGG5HruveUK06cU3Hljuhd9Iojm4M8WWv3wLE6OkE5PWbDUkItmMgegmccaITudyuW5RPYrYlgWw==",
+      "integrity": "sha512-aI3jjAAO1fh7vY/pBGsn1i9LDbRP43+asrRlkPuTXW5yHXtd1NgTEMudbBoDDxrf1daEEfPJqR+JBMakzrR4Dg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.25.7"
+        "@babel/types": "^7.25.9"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -54,15 +54,14 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.25.7",
+      "version": "7.25.9",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.7.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.9.tgz",
-      "integrity": "sha512-vwIVdXG+j+FOpkwqHRcBgHLYNL7XMkufrlaFvL9o6Ai9sJn9+PdyIL5qa0XzTZw084c+u9LOls53eoZWP/W5WQ==",
+      "integrity": "sha512-OwS2CM5KocvQ/k7dFJa8i5bNGJP0hXWfVCfDkqRFP1IreH1JDC7wG6eCYCi0+McbfT8OR/kNqsI0UU0xP9H6PQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.25.7",
+        "@babel/helper-string-parser": "^7.25.9",
-        "@babel/helper-validator-identifier": "^7.25.7",
+        "@babel/helper-validator-identifier": "^7.25.9"
-        "to-fast-properties": "^2.0.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -593,9 +592,9 @@
       }
     },
     "node_modules/cookie": {
-      "version": "0.6.0",
+      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
-      "integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
+      "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
       "license": "MIT",
       "engines": {
         "node": ">= 0.6"
@@ -832,9 +831,9 @@
       }
     },
     "node_modules/express": {
-      "version": "4.21.0",
+      "version": "4.21.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.21.0.tgz",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.21.1.tgz",
-      "integrity": "sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==",
+      "integrity": "sha512-YSFlK1Ee0/GC8QaO91tHcDxJiE/X4FbpAyQWkxAvG6AXCuR65YzK8ua6D9hvi/TzUfZMpc+BwuM1IPw8fmQBiQ==",
       "license": "MIT",
       "dependencies": {
         "accepts": "~1.3.8",
@@ -842,7 +841,7 @@
         "body-parser": "1.20.3",
         "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.6.0",
+        "cookie": "0.7.1",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
         "depd": "2.0.0",
@@ -1455,9 +1454,9 @@
       "optional": true
     },
     "node_modules/jsdoc": {
-      "version": "4.0.3",
+      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/jsdoc/-/jsdoc-4.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/jsdoc/-/jsdoc-4.0.4.tgz",
-      "integrity": "sha512-Nu7Sf35kXJ1MWDZIMAuATRQTg1iIPdzh7tqJ6jjvaU/GfDf+qi5UV8zJR3Mo+/pYFvm8mzay4+6O5EWigaQBQw==",
+      "integrity": "sha512-zeFezwyXeG4syyYHbvh1A967IAqq/67yXtXvuL5wnqCkFZe8I0vKfm+EO+YEvLguo6w9CDUbrAXVtJSHh2E8rw==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -1830,9 +1829,9 @@
       }
     },
     "node_modules/node-abi": {
-      "version": "3.68.0",
+      "version": "3.71.0",
-      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.68.0.tgz",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.71.0.tgz",
-      "integrity": "sha512-7vbj10trelExNjFSBm5kTvZXXa7pZyKWx9RCKIyqe6I9Ev3IzGpQoqBP3a+cOdxY+pWj6VkP28n/2wWysBHD/A==",
+      "integrity": "sha512-SZ40vRiy/+wRTf21hxkkEjPJZpARzUMVcJoQse2EF8qkUWbbO2z7vd5oA/H6bVH6SZQ5STGcu0KRDS7biNRfxw==",
       "license": "MIT",
       "dependencies": {
         "semver": "^7.3.5"
@@ -2717,16 +2716,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",