Fixed responsive stlying

components/BackToTop.vue

@@ -19,8 +19,8 @@ const triggerDistance = 100;
     position: fixed;
     bottom: 2rem;
     right: 2rem;
+    z-index: 5;
     display: flex;
-    justify-self: end;
     width: 6rem;
     height: 6rem;
     border-radius: 5rem;

components/DropDown.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import { DropDownAlignment, type DropDownProperty } from "#imports";
+import {
+    DropDownAlignment,
+    type DropDownProperty,
+} from "~/utils/types/dropDown";
 
 const property = defineProps<DropDownProperty>();
 

components/HamburgerMenu.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { HamburgerMenuProperty } from "#imports";
+import type { HamburgerMenuProperty } from "~/utils/types/hamburgerMenu";
 
 const property = defineProps<HamburgerMenuProperty>();
 
@@ -69,7 +69,7 @@ const handleClickEvent = () => {
 }
 
 .hamburger-menu-item-list {
-    --menu-width: 45vw;
+    --menu-width: max(16rem, 45vw);
     display: block;
     background: var(--neptune1);
     color: var(--starlight);
@@ -81,6 +81,7 @@ const handleClickEvent = () => {
     width: var(--menu-width);
     height: 100vh;
     text-wrap: nowrap;
+    overflow-y: scroll;
     & button {
         --button-size: 2.5rem;
         display: flex;

components/LinkCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { LinkCardProperty } from "~/utils/linkCard";
+import type { LinkCardProperty } from "~/utils/types/linkCard";
 const property = defineProps<LinkCardProperty>();
 const doesNotHaveImage = ref<boolean>(property.imagePath === undefined);
 </script>
@@ -20,7 +20,7 @@ const doesNotHaveImage = ref<boolean>(property.imagePath === undefined);
 a {
     display: grid;
     width: 25rem;
-    height: 30rem;
+    height: clamp(10rem, 15vh, max(30rem, fit-content));
     grid: 2fr 1fr 1.5fr / 1fr;
     background-color: var(--starlight);
     border-radius: 1rem;
@@ -39,7 +39,6 @@ a > * {
 
 .withoutImage {
     grid: 1fr 1.5fr / 1fr;
-    height: 15rem;
 }
 
 .image {
@@ -58,10 +57,11 @@ h2 {
     color: var(--neptune1);
     background-color: var(--starlight5);
     border-radius: 1rem;
-    margin: 0 2rem;
+    margin: 0.75rem 2rem;
     padding: 1rem 1.75rem;
     align-self: center;
     line-height: 2rem;
+    font-size: clamp(16pt, 3vw, 20pt);
 }
 
 h2::after {
@@ -69,9 +69,10 @@ h2::after {
     content: "";
     position: absolute;
     width: 7px;
-    height: 2rem;
-    top: 1rem;
+    height: max(2rem, 60%);
+    top: 50%;
     left: 0.75rem;
+    transform: translateY(-50%);
     background-color: var(--neptune1);
     border-radius: 3px;
 }
@@ -84,13 +85,9 @@ p {
 @media screen and (max-width: 1024px) {
     a {
         width: 20rem;
-        height: 25rem;
     }
     a > * {
-        margin: 0 1rem;
-    }
-    h2 {
-        font-size: 16pt;
+        margin: unset 0.25rem;
     }
     .image {
         width: 16rem;
@@ -101,13 +98,9 @@ p {
 @media screen and (max-width: 640px) {
     a {
         width: 16rem;
-        height: 21rem;
     }
     a > * {
-        margin: 0 0.75rem;
-    }
-    h2 {
-        font-size: 16pt;
+        margin: unset 0.75rem;
     }
     .image {
         width: 12rem;

components/NewsCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { NewsCardProperty } from "~/utils/newsCard";
+import type { NewsCardProperty } from "~/utils/types/newsCard";
 import { marked } from "marked";
 
 const property = defineProps<NewsCardProperty>();

components/PageTop.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { PageTopProperty } from "~/utils/pageTop";
+import type { PageTopProperty } from "~/utils/types/pageTop";
 
 const property = defineProps<PageTopProperty>();
 </script>

components/PankuzuList.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import PankuzuEntries from "~/assets/pankuzuEntries.json";
-import type { PankuzuListProperty } from "~/utils/pankuzuList";
+import type { PankuzuListProperty } from "~/utils/types/pankuzuList";
 
 const property = defineProps<PankuzuListProperty>();
 const route = useRoute();
@@ -36,6 +36,7 @@ nav {
     height: 5rem;
     display: flex;
     align-content: center;
+    container: pankuzu / inline-size;
 }
 
 ul {
@@ -43,8 +44,8 @@ ul {
     list-style-type: none;
     display: inline-flex;
     align-items: center;
-    width: var(--list-width);
-    padding: 0 0 0 max(3rem, calc(50vw - var(--list-width)));
+    width: fit-content;
+    padding: 0 0 0 max(2rem, calc(50vw - var(--list-width)));
 }
 
 ul li {
@@ -94,4 +95,10 @@ ul li:not(:first-of-type) p:first-of-type {
         height: 100%;
     }
 }
+
+@container pankuzu (width < 640px) {
+    ul li {
+        font-size: smaller;
+    }
+}
 </style>

components/QAndABox.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { QAndABoxProperty } from "~/utils/qAndABox";
+import type { QAndABoxProperty } from "~/utils/types/qAndABox";
 const property = defineProps<QAndABoxProperty>();
 </script>
 

components/Slide.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
-import type { SlideProperty, SlideEntry } from "~/utils/slide.ts";
+import type { SlideProperty, SlideEntry } from "~/utils/types/slide.ts";
 
 const property = defineProps<SlideProperty>();
+const { viewPortOrientation } = useWindowDimensions();
+
+const UnitREM = 16;
+const fourREM = 4 * UnitREM;
+const halfREM = 0.5 * UnitREM;
 
 const width = property.width;
 const height = property.height;
+const controlerWidth = (property.entries.length + 1) * (fourREM + halfREM);
+const controlerWidthCSSValue = controlerWidth.toString() + "px";
 let timer: NodeJS.Timeout;
 
 const controlIcons = ["ic:baseline-pause", "ic:baseline-play-arrow"];
@@ -28,9 +35,18 @@ const previewAnimationTiming: KeyframeEffectOptions = {
 };
 
 const slideAnimationTimingMargin = 100;
+const slideAnimationFirstStageOffset = 0.2;
+const slideAnimationSecondStageOffset = 0.5;
+const slideAnimationThirdStageOffset = 0.8;
 const slideAnimation = {
     opacity: [0, 1, 1, 1, 0],
-    offset: [0, 0.2, 0.5, 0.8, 1],
+    offset: [
+        0,
+        slideAnimationFirstStageOffset,
+        slideAnimationSecondStageOffset,
+        slideAnimationThirdStageOffset,
+        1.0,
+    ],
     easing: ["ease-in", "ease-out"],
 };
 
@@ -198,6 +214,8 @@ onUnmounted(() => {
     position: relative;
     width: v-bind(width);
     height: v-bind(height);
+    container-name: slide;
+    container-type: size;
 }
 
 .slides {
@@ -227,14 +245,15 @@ ul {
 
 .content {
     position: absolute;
-    top: 20%;
+    top: 25%;
     left: 50%;
     transform: translateX(-50%) translateY(-1.5vw);
     display: flex;
     flex-direction: column;
+    width: max(80%, 16rem);
     & > h1 {
         margin: auto 0;
-        font-size: clamp(3rem, 3vw, 5rem);
+        font-size: clamp(3rem, 3cqw, 52pt);
         text-align: center;
         color: var(--starlight);
     }
@@ -242,7 +261,7 @@ ul {
         height: 3rem;
         justify-self: center;
         color: var(--starlight);
-        font-size: clamp(14pt, 1.5vw, 24pt);
+        font-size: clamp(14pt, 1.5cqw, 24pt);
         font-weight: 600;
         text-align: center;
     }
@@ -250,11 +269,12 @@ ul {
         width: fit-content;
         border: var(--starlight) 3px solid;
         background-color: transparent;
-        padding: 0.5rem 2rem;
+        margin-top: 5cqh;
+        padding: 0.5rem 1.5rem;
         color: var(--uranus);
         text-decoration: none;
         font-weight: bold;
-        font-size: clamp(16pt, 1.5vw, 20pt);
+        font-size: clamp(16pt, 2cqw, 20pt);
         place-self: center;
         transition: all 0.3s ease;
     }
@@ -273,6 +293,9 @@ ul {
     position: absolute;
     bottom: 1rem;
     right: 1rem;
+    width: v-bind(controlerWidthCSSValue);
+    height: 4rem;
+    align-items: center;
     & > button {
         display: flex;
         border: none;
@@ -280,7 +303,8 @@ ul {
         background-color: rgba(100, 100, 100, 0.8);
         width: 4rem;
         height: 4rem;
-        margin-inline: 0.25rem;
+        margin-inline: 0.0625rem;
+        scale: 90%;
     }
     & > button:hover {
         cursor: pointer;
@@ -300,7 +324,8 @@ ul {
     position: relative;
     width: var(--calculated-size);
     height: var(--calculated-size);
-    margin-inline: 0.25rem;
+    margin-inline: 0.0625rem;
+    scale: 90%;
     &:hover {
         cursor: pointer;
     }
@@ -329,12 +354,29 @@ ul {
     }
 }
 
-@media screen and (max-width: 960px) {
-    .controler {
-        flex-direction: column;
-    }
-    .preview {
-        margin: 0.25rem 0;
+@container slide (width < 640px) {
+    .content {
+        width: 16rem;
+        transform: translateX(-55%);
     }
 }
+
+@container slide (width < 960px) {
+    .controler {
+        flex-direction: column;
+        scale: 80%;
+        bottom: -2rem;
+        right: 0rem;
+        width: 4rem;
+        height: v-bind(controlerWidthCSSValue);
+    }
+    .preview {
+        margin: calc(1rem / 16) 0;
+    }
+}
+
+.portrait-controler {
+    flex-direction: column;
+    right: 0rem;
+}
 </style>

components/TheHeader.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import LogoSVG from "public/sera-logo-no-text.svg";
 import SiteInfo from "~/assets/siteinfo.json";
-import type { DropDownEntry } from "~/utils/dropDown";
+import type { DropDownEntry } from "~/utils/types/dropDown";
 
 const { viewPortType } = useWindowDimensions();