Fix strucutrue

assets/css/main.css

@@ -125,7 +125,7 @@ body,main {
     line-height: 1.35;
     font-weight: 500;
 }
-.web-header, .web-footer, main {
+.web-header, .web-footer, main, footer {
     padding: 0 calc(var(--spacing)*4);
 }
 .web-header {
@@ -134,7 +134,8 @@ body,main {
     position: sticky;
     top: 0;
     height: calc(var(--spacing)*16);
-    @apply bg-(--ui-bg-elevated)/80 backdrop-blur-xl backdrop-saturate-150 backdrop-contrast-150;
+    z-index: 1000;
+    @apply bg-(--ui-bg-elevated);
 }
 .web-nav, .web-footer-content, .article {
     margin: 1rem auto;
@@ -178,7 +179,7 @@ p {
     @apply text-2xl font-medium;
 }
 .web-title {
-    @apply text-5xl sm:text-6xl font-bold my-[.2em] transition-[color] ease-fluid duration-100;
+    @apply text-5xl sm:text-6xl my-[.2em] transition-[color] ease-fluid duration-100;
     font-variation-settings: 'wdth' 125;
     a {
         cursor: pointer;
@@ -233,7 +234,38 @@ p {
         height: 2.5em;
     }
 }
+.hamburger-toggle {
+    @apply flex md:hidden h-16 w-9 cursor-pointer items-center justify-center hover:bg-(--ui-text)/5 active:bg-(--ui-text)/10 transition-colors duration-100 ease-fluid;
+}
+.hamburger-menu {
+    @apply flex flex-col fixed left-0 top-16 w-full bg-(--ui-bg-elevated) h-full z-[1000];
+    .nav-wrapper {
+        list-style-type: none;
+        display: flex;
+        flex-direction: column;
+        margin: 0;
+        margin-left: calc(var(--spacing)*4);
+        width: 100%;
+        .nav-link {
+            height: calc(var(--spacing)*16);
+            width: 100%;
+            @apply ml-0;
+            a {
+                display: flex;
+                align-items: center;
+                font-variation-settings: 'wdth' 75;
+                height: calc(var(--spacing)*16);
+                width: 100%;
+                @apply pl-3 cursor-pointer hover:bg-(--ui-text)/5 active:bg-(--ui-text)/10 transition-colors duration-100 ease-fluid;
+            }
+            a.router-link-exact-active {
+                @apply border-l-2 border-primary box-border pl-2.5 text-primary;
+            }
+        }
+    }
+}
 .nav-links {
+    @apply hidden md:flex;
     height: 100%;
     .nav-wrapper {
         list-style-type: none;
@@ -251,7 +283,7 @@ p {
                 @apply px-3 cursor-pointer hover:bg-(--ui-text)/5 active:bg-(--ui-text)/10 transition-colors duration-100 ease-fluid;
             }
             a.router-link-exact-active {
-                @apply border-t-3 border-primary box-border pb-0.5 text-primary;
+                @apply border-t-2 border-primary box-border pb-0.5 text-primary;
             }
         }
     }

components/web-footer.vue

@@ -6,7 +6,7 @@ import WebThemeToggle from './web-theme-toggle.vue';
 <template>
     <footer class="article">
         <section class="web-section">
-            <h3 class="text-5xl mb-4">Techit's Home ////////// thawia.ng</h3>
+            <h3 class="text-3xl md:text-5xl mb-4">Techit's Home /// thawia.ng</h3>
             <small>
                 Copyright &copy; Techit Thawiang 2025 (2568). All rights reserved.<br>
                 PGP/GPG Key: <code style="font-size: 12px;"><a href="/portal/f/Techit Thawiang_0xE649CED321557334_public.asc">4116 33BE 1B4A 19D4 8D77  9ADE E649 CED3 2155 7334</a></code><br>

components/web-header.vue

@@ -33,7 +33,43 @@
                         </li>
                     </ul>
                 </nav>
+                <button class="hamburger-toggle" @click="toggleMobileHamburger">
+                    <Icon name="oundr:menu"/>
+                </button>
             </div>
         </section>
+        <nav v-if="mobileHamburger" class="hamburger-menu">
+            <ul class="nav-wrapper">
+                <li class="nav-link">
+                    <NuxtLink @click="toggleMobileHamburger" href="/">Home</NuxtLink>
+                </li>
+                <!-- <li class="nav-link">
+                    <NuxtLink href="/blog">Blog</NuxtLink>
+                </li>
+                <li class="nav-link">
+                    <NuxtLink href="/projects">Projects</NuxtLink>
+                </li> 
+                <li class="nav-link">
+                    <NuxtLink href="/about">About</NuxtLink>
+                </li>-->
+                <li class="nav-link">
+                    <NuxtLink @click="toggleMobileHamburger" href="/contact">Contact</NuxtLink>
+                </li>
+                <li class="nav-link">
+                    <NuxtLink @click="toggleMobileHamburger" href="/fonts">Fonts</NuxtLink>
+                </li>
+                <li class="nav-link">
+                    <NuxtLink @click="toggleMobileHamburger" href="/collections">Collections</NuxtLink>
+                </li>
+            </ul>
+        </nav>
     </header>
 </template>
+
+<script setup>
+const mobileHamburger = ref(false);
+
+function toggleMobileHamburger() {
+    mobileHamburger.value = !mobileHamburger.value
+}
+</script>