From 8358c4acb402aed0aed8d15f5a7456b185f13575 Mon Sep 17 00:00:00 2001
From: Techit Thawiang <techit@thawia.ng>
Date: Mon, 13 Oct 2025 21:25:04 +0700
Subject: [PATCH] beauty treatment

---
 app/assets/css/main.css       | 594 +++++++++++++++++++++-------------
 app/components/post-card.vue  |  10 +-
 app/components/web-footer.vue |  21 +-
 app/components/web-header.vue |  28 +-
 app/pages/contact.vue         |  87 +++--
 app/pages/fonts.vue           |  13 +-
 app/pages/posts/[...slug].vue |   1 +
 7 files changed, 464 insertions(+), 290 deletions(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 9ead96d..8322d9c 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -1,76 +1,33 @@
-@import "tailwindcss";
 
-@custom-variant dark (&:where(.dark-theme, .dark-theme *));
-@theme {
+:root {
+    --ui-spacing: 0.25rem;
     --ui-primary: var(--color-deep-dark);
-    --ui-container: var(--container-4xl);
-    --ui-container-narrow: var(--container-3xl);
-    --ui-radius: var(--radius-sm);
-    --ui-bg: white;
-    --ui-bg-muted: var(--color-cloud-semilight);
-    --ui-bg-elevated: var(--color-cloud-medium);
-    --ui-bg-inverted: var(--color-deep-dark);
-    --ui-bg-muted-inverted: var(--color-deep-semidark);
-    --ui-bg-elevated-inverted: var(--color-deep-medium);
-    --ui-border: var(--color-cloud-medium);
-    --ui-border-accented: var(--color-cloud-semidark);
-    --ui-border-intense: var(--color-cloud-dark);
-    --ui-text: var(--color-deep-dark);
-    --ui-text-muted: var(--color-smoke-medium);
-    --ui-text-blind: var(--color-smoke-dark);
-    --ui-text-inverted: var(--color-cloud-light);
-    --ui-text-muted-inverted: var(--color-cloud-medium);
-    --ui-text-blind-inverted: var(--color-cloud-dark);
+    --ui-container: 64rem;
+    --ui-container-narrow: 48rem;
     --ui-header-logo-inverted: 1;
-    --color-primary-dark: rgb(0, 101, 254);
-    --color-primary: rgb(0, 101, 254);
-    --color-primary-ghost: rgba(0, 101, 254, 0);
-    --color-primary-light: rgb(53, 154, 255);
-    --color-primary-lighter: rgb(109, 182, 255);
-    --color-primary-content: rgb(237, 248, 255);
+    --ui-header-height: calc(var(--ui-spacing)*14);
 
-    --color-text: rgb(50,50,50);
+    --color-surface-background: #f9f9f9;
+    --color-on-surface-background: #111111;
+    --color-primary: #2e2e2e;
+    --color-primary-strong: #3e3e3e;
+    --color-on-primary: white;
+    --color-secondary: #efefef;
+    --color-secondary-strong: #dfdfdf;
+    --color-on-secondary: #2e2e2e;
+    --color-container: #f8f8f8;
+    --color-on-container: #0e0e0e;
+    --color-outline-intense: #c0c0c0;
+    --color-outline: #d9d9d9;
+    --color-accent: #0066ff;
+    --color-accent-strong: #0055d5;
+    --color-inverse: #ff6600;
+    --color-inverse-strong: #d55500;
 
-    --color-deep-dark: rgb(19, 19, 19);
-    --color-deep-semidark: rgb(28, 28, 28);
-    --color-deep-medium: rgb(32, 32, 32);
-    --color-deep-semilight: rgb(37, 37, 37);
-    --color-deep-light: rgb(42, 42, 42);
-    --color-smoke-dark: rgb(73, 73, 73);
-    --color-smoke-semidark: rgb(78, 78, 78);
-    --color-smoke-medium: rgb(84, 84, 84);
-    --color-smoke-semilight: rgb(89, 89, 89);
-    --color-smoke-light: rgb(95, 95, 95);
-    --color-cloud-dark: rgb(223, 223, 223);
-    --color-cloud-semidark: rgb(230, 230, 230);
-    --color-cloud-medium: rgb(237, 237, 237);
-    --color-cloud-semilight: rgb(243, 243, 243);
-    --color-cloud-light: rgb(250, 250, 250);
-
-    --color-mc-outline: 30, 30, 31;
-    --color-mc-inline: 255, 255, 255, 0.2;
-    --color-mc-primary: 79, 160, 51;
-    --color-mc-primary-hover: 60, 133, 39;
-    --color-mc-primary-up: 29, 77, 19;
-    --color-mc-primary-down: 40, 100, 28;
-    --color-mc-surface: 244, 246, 249;
-    --color-mc-surface-container: 230, 232, 235;
-    --color-mc-surface-hover: 208, 209, 212;
-    --color-mc-surface-up: 88, 88, 90;
-    --color-mc-surface-down: 177, 178, 181;
-    --color-mc-input: 49, 50, 51;
-    --color-mc-input-shadow: 36, 36, 37;
-    --color-mc-container: 72, 73, 74;
-    --color-mc-container-up: 49, 50, 51;
-    --color-mc-container-hover: 88, 88, 90;
-    --color-mc-container-down: 49, 50, 51;
-    --color-mc-container-top: 90, 91, 92;
-    --color-mc-container-bottom: 50, 51, 52;
-
-    --font-sans: Geist, Sarabun, sans-serif;
-    --font-sans--font-feature-settings: "liga", "calt", "ss01", "cv05", "cv06", "cv11";
-    --font-mono: GeistMono, "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-    --font-serif: NotoSerif, NotoSerifThai, Georgia, Garamond, "Times New Roman", Times, serif;
+    --font-sans: Roboto, Sarabun, sans-serif;
+    --font-sans--font-feature-settings: "liga", "calt";
+    --font-mono: RobotoMono, "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --font-serif: RobotoSerif, NotoSerifThai, Georgia, Garamond, "Times New Roman", Times, serif;
     --font-math: CMUSerif, "Cambria Math", "LatinModern Math", "STIXGeneral", math;
 
     --ease-fluid: 0.2, 0, 0, 1;
@@ -79,32 +36,12 @@
 }
 @supports (font-variation-settings: normal) {
     :root {
-        --font-sans: GeistVariable, Sarabun, sans-serif;
-        --font-mono: GeistMonoVariable, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-        --font-serif: NotoSerifVariable, NotoSerifThaiVariable, Georgia, Garamond, "Times New Roman", Times, serif;
+        --font-sans: RobotoVariable, Sarabun, sans-serif;
+        --font-mono: RobotoMonoVariable, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+        --font-serif: RobotoSerifVariable, NotoSerifThai, Georgia, Garamond, "Times New Roman", Times, serif;
         font-optical-sizing: auto;
     }
 }
-.dark-mode {
-    --ui-primary: var(--color-cloud-light);
-    --ui-bg: var(--color-deep-dark);
-    --ui-bg-muted: var(--color-deep-semidark);
-    --ui-bg-elevated: var(--color-deep-medium);
-    --ui-bg-inverted: var(--color-cloud-light);
-    --ui-bg-muted-inverted: var(--color-cloud-semilight);
-    --ui-bg-elevated-inverted: var(--color-cloud-medium);
-    --ui-border: var(--color-deep-medium);
-    --ui-border-accented: var(--color-deep-light);
-    --ui-text: var(--color-cloud-dark);
-    --ui-text-muted: var(--color-cloud-medium);
-    --ui-text-blind: var(--color-cloud-dark);
-    --ui-text-inverted: var(--color-deep-light);
-    --ui-text-muted-inverted: var(--color-deep-medium);
-    --ui-text-blind-inverted: var(--color-deep-dark);
-    --ui-header-logo-inverted: 0;
-
-    --color-text: rgb(180,180,180);
-}
 @keyframes ring {
     0% {
         outline: 0px solid var(--ui-ring-color);
@@ -119,10 +56,13 @@
     outline-offset: var(--ui-ring-offset);
     }
 }
+* {
+    box-sizing: border-box;
+}
 *:focus-visible {
     --ui-ring-size: 2px;
-    --ui-ring-color: var(--color-primary);
-    --ui-ring-offset: 0;
+    --ui-ring-color: var(--color-accent);
+    --ui-ring-offset: 2px;
     animation: ring 0.5s cubic-bezier(var(--ease-fluid));
     outline: var(--ui-ring-size) solid var(--ui-ring-color);
     outline-offset: var(--ui-ring-offset);
@@ -131,37 +71,77 @@ body,main {
     font-family: var(--font-sans);
     padding: 0;
     margin: 0;
-    color: var(--ui-text);
-    background-color: var(--ui-bg);
+    color: var(--color-on-surface-background);
+    background: var(--color-surface-background);
     line-height: 1.35;
 }
 img {
-    @apply rounded-lg;
+    border-radius: calc(var(--ui-spacing)*1);
+    max-width: 100%;
+    height: auto;
+    display: block;
 }
-.web-header {
+a {
+    color: unset;
+    text-decoration: none;
+
+}
+.material-symbols-outlined {
+    font-variation-settings:
+        'FILL' 0,
+        'wght' 400,
+        'GRAD' 0,
+        'opsz' 24
+}
+.web-header-container {
+    position: sticky;
+    top: 0;
+    width: 100%;
+    overflow: visible;
+}
+.web-header, .hamburger-menu-header {
+    box-sizing: border-box;
     display: flex;
     flex-direction: row;
     position: sticky;
     top: 0;
-    height: calc(var(--spacing)*14);
-    z-index: 1000;
-    @apply duration-200 transition-all;
+    height: var(--ui-header-height);
+    z-index: 998;
 }
-.web-header.web-header-bg {
-    @apply bg-(--ui-bg)/75 backdrop-blur border-b border-(--ui-text)/5;
+.web-header.web-header-bg,
+.hamburger-menu-header.hamburger-menu-header-bg {
+    background: #ffffff;
+    color: black;
+    border-bottom: 1px solid var(--color-outline);
 }
-.web-header-emit-shadow-when-top.shadow-active {
-    @apply shadow-lg;
+.web-header-logo-banner {
+    height: 100%;
+    background: var(--color-accent);
+    align-content: center;
 }
-.web-header-autohide.web-header-hidden {
-    @apply scale-95 blur opacity-0 invisible;
+.web-header-logo-banner > .web-header-logo {
+    border-radius: 0;
+}
+.web-header-title {
+    font-size: 18px;
+    font-weight: 700;
+    margin: 0;
+    margin-inline: calc(var(--ui-spacing)*2);
 }
 .web-nav, .web-footer-content, .article {
     width: 100%;
 }
+.web-footer-title {
+    font-size: 32px;
+    margin-block: .4em;
+}
+.web-footer-notice {
+    font-size: 12px;
+    font-family: var(--font-mono);
+}
 .web-heading {
     margin: 0 auto;
-    padding: 0 calc(var(--spacing)*4);
+    padding: 0 calc(var(--ui-spacing)*4);
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -178,7 +158,7 @@ img {
         align-items: center;
     }
     .web-heading-right-section {
-        display: flex;
+        display: none;
         width: fit-content;
         flex-direction: row;
         justify-content: end;
@@ -186,23 +166,41 @@ img {
         align-items: center;
     }
 }
+@media screen and (min-width: 640px) {
+    .web-heading {
+        .web-heading-right-section {
+            display: flex;
+        }
+    }
+}
 p {
-    @apply my-[1em];
+    margin-block: 1em;
 }
 .font-hero {
-    @apply text-5xl font-bold my-[.2em];
+    font-size: 48px;
+    font-weight: 700;
+    margin-block: 0.2em;
     line-height: 1.3;
 }
 .font-hero-desc {
-    @apply text-xl font-medium;
+    font-size: 20px;
+    font-weight: 500;
 }
 .web-title {
-    @apply text-3xl font-bold my-[.7em] transition-[color] ease-fluid duration-100;
+    font-size: 30px;
+    font-weight: 700;
+    margin-block: 0.7em;
+    transition-property: color;
+    transition-duration: 100ms;
+    transition-timing-function: cubic-bezier(var(--ease-fluid));
     a {
         cursor: pointer;
     }
     .link-inline-icon {
-        @apply transition-[opacity_margin] ease-fluid duration-100 select-none;
+        transition-property: opacity margin;
+        transition-duration: 100ms;
+        transition-timing-function: cubic-bezier(var(--ease-fluid));
+        user-select: none;
         margin-left: 0.5rem;
         opacity: 0.5;
     }
@@ -211,10 +209,10 @@ p {
         margin-left: 1rem;
     }
     &:active a {
-        @apply text-primary;
+        color: var(--color-primary);
     }
     &:focus-visible a {
-        @apply underline;
+        text-decoration: underline;
     }
     &.link {
         color: var(--ui-text);
@@ -222,226 +220,358 @@ p {
 }
 .web-nav-title {
     --web-nav-title-shadow: 0px 0px 16px var(--ui-bg);
-    @apply text-lg font-bold;
-    text-shadow: var(--web-nav-title-shadow),
-    var(--web-nav-title-shadow),
-    var(--web-nav-title-shadow),
-    var(--web-nav-title-shadow),
-    var(--web-nav-title-shadow);
-}
-.web-hero.web-hero-bg, .web-hero-post.web-hero-bg {
-    @apply bg-(--color-deep-semidark) text-(--color-cloud-medium);
-    h1,h2,h3,h4,h5,h6 {
-        @apply text-(--color-cloud-light)
-    }
+    font-size: 18px;
+    font-weight: 700;
 }
 .web-hero-post {
-    /* padding: clamp(calc(var(--spacing) * 32), 9vw, calc(var(--spacing) * 48)) calc(var(--spacing)*4); */
-    @apply flex flex-col items-center text-center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
 }
 .web-section {
-    @apply my-16 px-4;
     max-width: var(--ui-container);
-    margin: calc(var(--spacing)*16) auto;
+    margin-block: calc(var(--ui-spacing)*16);
+    margin-inline: auto;
+    padding-inline: calc(var(--ui-spacing)*4);
 }
 .web-section.web-section-narrow {
-    @apply my-16 px-4;
     max-width: var(--ui-container-narrow);
-    margin: calc(var(--spacing)*16) auto;
 }
 .project-card-container, .font-card-container, .post-card-container {
-@apply flex flex-col gap-1 ml-0 list-none;
+    background: var(--color-container);
+    color: var(--color-on-container);
+    display: flex;
+    flex-direction: column;
+    margin-left: 0;
+    list-style: none;
+    border: 1px solid var(--color-outline-intense);
+    border-radius: calc(var(--ui-spacing)*1);
+    overflow: hidden;
+    box-shadow: 0 1px 1px rgb(0,0,0,.1);
 }
-.project-card-container > li:not(:last-child):not(:first-child):not(:only-child) > .project-card,
+/* .project-card-container > li:not(:last-child):not(:first-child):not(:only-child) > .project-card,
 .post-card-container > a.post-card:not(:last-child):not(:first-child):not(:only-child),
 .font-card-container > li:not(:last-child):not(:first-child):not(:only-child) > .font-card {
-    @apply rounded-md;
+    border-radius: calc(var(--ui-spacing)*1);
 }
 .project-card-container > li:last-child:not(:only-child) > .project-card,
 .post-card-container > a.post-card:last-child:not(:only-child),
 .font-card-container > li:last-child:not(:only-child) > .font-card {
-    @apply rounded-t-md;
+    border-top-left-radius: calc(var(--ui-spacing)*1);
+    border-top-right-radius: calc(var(--ui-spacing)*1);
 }
 .project-card-container > li:first-child:not(:only-child) > .project-card,
 .post-card-container > a.post-card:first-child:not(:only-child),
 .font-card-container > li:first-child:not(:only-child) > .font-card {
-    @apply rounded-b-md;
-}
-.project-card-container > li, .post-card-container > li, .font-card-container > li { @apply ml-0; }
+    border-bottom-left-radius: calc(var(--ui-spacing)*1);
+    border-bottom-right-radius: calc(var(--ui-spacing)*1);
+} */
+.project-card-container > li, .post-card-container > li, .font-card-container > li { margin-left: 0; }
 .project-card, .font-card, .post-card {
     height: 100%;
-    @apply flex flex-col p-2 items-center rounded-2xl sm:flex-row sm:gap-4 bg-(--ui-bg-muted) hover:bg-(--ui-bg-elevated) transition-colors duration-100 ease-fluid ml-0;
-    h3 { @apply text-2xl font-bold line-clamp-1; }
-    h3,p { z-index: 1; }
-    img { @apply mb-2 sm:mb-0 aspect-video object-cover w-full sm:max-w-56 rounded-lg; }
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: var(--ui-bg-muted);
+    margin-left: 0;
+    h3 {
+        font-size: 24px;
+        font-weight: 700;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+    }
+    h3, p { z-index: 1; }
+    img {
+        aspect-ratio: 16/9;
+        object-fit: cover;
+        width: 100%;
+    }
     p {
-        @apply line-clamp-2;
         margin: 0;
         width: 100%;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
     }
     .iconify {
         background-color: var(--ui-text);
-        width: calc(var(--spacing)*16);
-        height: calc(var(--spacing)*16);
+        width: calc(var(--ui-spacing)*16);
+        height: calc(var(--ui-spacing)*16);
     }
     .project-card-content, .font-card-content, .post-card-content {
-        @apply block w-full px-2 sm:px-0;
+        display: block;
+        width: 100%;
+        padding: calc(var(--ui-spacing)*3);
+        h3 {
+            margin: 0;
+        }
     }
     &.disabled {
-        @apply opacity-50 pointer-events-none cursor-not-allowed;
+        opacity: 0.5;
+        pointer-events: none;
+        cursor: not-allowed;
     }
 }
-.font-card {
-    padding: 0.5rem 1rem;
+.project-card:hover, .font-card:hover, .post-card:hover {
+    background: var(--color-secondary);
 }
-.font-card {
-    @apply flex-row;
+.project-card:not(:only-child):not(:last-child),
+.font-card:not(:only-child):not(:last-child),
+.post-card:not(:only-child):not(:last-child) {
+    border-bottom: 1px solid var(--color-outline);
+}
+@media screen and (min-width: 640px) {
+    .project-card, .font-card, .post-card {
+        flex-direction: row;
+        img {
+            margin-bottom: 0;
+            max-width: calc(var(--ui-spacing)*56);
+        }
+        .project-card-content, .font-card-content, .post-card-content {
+            padding-inline: calc(var(--ui-spacing)*4);
+        }
+    }
 }
 .hamburger-toggle {
-    @apply flex md:hidden h-14 w-9 cursor-pointer items-center justify-center hover:bg-(--ui-text)/5 active:bg-(--ui-text)/10 transition-colors duration-100 ease-fluid;
+    all: unset;
+    display: flex;
+    visibility: visible;
+    width: calc(var(--ui-spacing)*9);
+    height: 100%;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+}
+.hamburger-toggle:hover {
+    background: var(--color-secondary);
+}
+.hamburger-toggle.placeholder {
+    background: none;
+}
+@media screen and (min-width: 640px) {
+    .hamburger-toggle.no-autohide {
+        display: flex!important;
+        visibility: visible!important;
+    }
+    .hamburger-toggle {
+        display: none;
+        visibility: hidden;
+    }
 }
 .hamburger-menu {
+    background: white;
     transform-origin: top right;
-    @apply flex flex-col sticky h-fit left-0 top-14 w-full max-w-(--ui-container) mx-auto z-[1000] transition-all duration-200 ease-out-back;
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    /* top: calc(var(--ui-spacing)*14); */
+    top: 0;
+    left: 0;
+    height: 100vh;
+    z-index: 1000;
+    transition-property: all;
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(var(--ease-fluid));
+    width: 100%;
+    max-width: 20rem;
     .nav-wrapper {
         list-style-type: none;
         display: flex;
         flex-direction: column;
         margin: 0;
-        padding: 0 calc(var(--spacing)*4);
+        padding: 0 calc(var(--ui-spacing)*4);
         width: 100%;
-        gap: 6px;
         align-items: end;
         .nav-link, .nav-button {
             display: flex;
-            font-size: 15px;
             width: 100%;
-            max-width: 18rem;
-            @apply ml-0 justify-end;
+            margin-left: 0;
             a, .hamburger-btn-square {
                 display: flex;
                 align-items: center;
                 width: 100%;
-                @apply px-4 h-14 shadow-lg rounded-[28px] bg-(--ui-bg)/75 backdrop-blur border border-(--ui-text)/5 cursor-pointer hover:text-primary active:scale-[.975] transition-all duration-100 ease-fluid;
+                padding-inline: calc(var(--ui-spacing)*4);
+                height: calc(var(--ui-spacing)*12);
             }
             a.router-link-exact-active {
-                @apply text-primary dark:text-white font-bold shadow-[0px_2px_16px] shadow-primary/35 bg-primary/25 border border-primary/10 z-10 text-shadow-[0px_0px_16px_var(--color-primary)];
+                color: var(--color-accent);
             }
             .hamburger-btn-square {
-                @apply aspect-square justify-center;
+                aspect-ratio: 1/1;
+                justify-content: center;
                 width: unset;
             }
         }
+        .nav-link:not(:only-child):not(:last-child) {
+            border-bottom: 1px solid var(--color-outline);
+        }
         .nav-button {
-            font-size: 15px;
+            display: flex;
             width: 100%;
             max-width: 18rem;
-            @apply ml-0 justify-end flex;
-        }
-        .nav-button.nav-button-only-desktop {
-            @apply hidden md:flex;
+            margin-left: calc(var(--ui-spacing) * 0);
+            justify-content: flex-end;
         }
     }
 }
 .hamburger-menu.hamburger-menu-hidden {
-    @apply scale-90 blur opacity-0 invisible ;
+    transform: translateX(-100%);
+    visibility: hidden;
+}
+.hamburger-backdrop-overlay {
+    background: #000000;
+    opacity: 0.5;
+    z-index: 999;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
 }
 .nav-links {
-    @apply hidden md:flex;
+    display: flex;
     height: 100%;
-    .nav-wrapper {
-        list-style-type: none;
-        display: flex;
-        flex-direction: row;
-        height: 100%;
-        gap: 6px;
-        .nav-link {
-            font-size: 15px;
-            align-content: center;
-            height: 100%;
-            @apply m-0;
-            a {
-                display: flex;
-                align-items: center;
-                @apply px-3 h-10 shadow-xs active:shadow-none active:opacity-90 rounded-[20px] bg-(--ui-bg)/60 backdrop-blur border border-(--ui-text)/5 cursor-pointer hover:text-primary transition-all duration-100 ease-fluid;
-            }
-            a.router-link-exact-active {
-                @apply text-white shadow-[0px_2px_10px] shadow-primary/50 bg-primary border border-primary/10;
-            }
-        }
+}
+@media screen and (min-width: 768px) {
+    .nav-links {
+        display: hidden;
     }
 }
+ul.nav-wrapper {
+    margin: 0;
+}
+.nav-links > .nav-wrapper {
+    list-style-type: none;
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+}
+.nav-links > .nav-wrapper > .nav-link {
+    align-content: center;
+    height: 100%;
+    margin: 0;
+}
+.nav-links > .nav-wrapper > .nav-link > a {
+    display: flex;
+    align-items: center;
+    padding-inline: calc(var(--ui-spacing)*3);
+    height: 100%;
+    cursor: pointer;
+}
+.nav-links > .nav-wrapper > .nav-link > a:hover,
+.nav-links > .nav-wrapper > .nav-link > a.router-link-exact-active {
+    border-top: 2px solid var(--color-accent);
+    padding-bottom: 2px;
+    color: var(--color-accent);
+}
+.nav-links > .nav-wrapper > .nav-link > a:active {
+    opacity: 0.9;
+}
 code, pre, tt, kbd, samp {
     font-size: 1em;
 }
-.link, .prose a {
-    & {
-        @apply underline text-(--ui-text);
-    }
-    &:hover {
-        @apply no-underline bg-(--ui-text) text-(--ui-bg);
-    }
-    &:active {
-        @apply opacity-80;
-    }
-    &.link-no-underline {
-        @apply no-underline;
-    }
+.link,
+.prose a {
+    text-decoration: underline;
+    color: var(--ui-text);
 }
-.prose h2 > a {
-    @apply no-underline
-}
-ul,li { @apply ml-[1em] }
-ul { @apply list-disc; }
 
-button.btn, a.btn {
-    @apply cursor-pointer;
+.link:hover,
+.prose a:hover {
+    text-decoration: none;
+    background-color: var(--color-on-surface-background);
+    color: var(--color-surface-background);
 }
+
+.link:active,
+.prose a:active {
+    opacity: 0.8;
+}
+
+.link.link-no-underline {
+    text-decoration: none;
+}
+
+.prose h2 > a {
+    text-decoration: none;
+}
+
+button.btn,
+a.btn {
+    cursor: pointer;
+}
+
 .btn {
-    @apply h-10 bg-primary text-primary-content px-4 rounded-[20px];
+    all: unset;
+    height: calc(var(--ui-spacing)*10);
+    background: var(--color-primary);
+    color: var(--color-on-primary);
+    padding-inline: calc(var(--ui-spacing)*4);
+    border-radius: calc(var(--ui-spacing)*5);
 }
 .btn.btn-sm {
-    @apply h-9;
+    height: calc(var(--ui-spacing)*9);
 }
-.btn.btn-neutral {
-    @apply bg-(--ui-bg-muted) text-(--ui-text);
-    &:hover {
-        @apply bg-(--ui-bg-elevated);
-    }
-    &:active {
-        @apply bg-(--ui-border-accented);
-    }
+.prose-blog-pretext {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    text-transform: uppercase;
 }
-
 .prose {
-    @apply font-serif text-lg;
-    ol { @apply list-decimal ml-[1em]; }
+    font-family: var(--font-serif);
+    font-weight: 400;
+    font-size: 18px;
     p, li { line-height: 1.5; }
-    h2 a, h3 a, h4 a, h5 a, h6 a  { @apply text-(--ui-text); }
-    hr { margin-block: 1em; @apply border-(--ui-border-intense); }
+    hr { margin-block: 1em; border: 1px solid var(--color-outline-intense); }
     li { margin-block: 1em; }
+    img { display: block; }
     h1,h2,h3,h4,h5,h6 {
-        @apply font-serif font-bold;
+        font-family: var(--font-serif);
+        font-weight: 700;
         scroll-margin-top: 80px;
     }
     h2 {
-        @apply text-2xl my-6;
+        font-size: 24px;
+        margin-block: calc(var(--ui-spacing)*6);
     }
     h3 {
-        @apply text-xl my-6;
+        font-size: 20px;
+        margin-block: calc(var(--ui-spacing)*6);
     }
     h4 {
-        @apply text-lg my-6;
+        font-size: 18px;
+        margin-block: calc(var(--ui-spacing)*6);
     }
     img {
-        @apply my-3;
+        margin-block: calc(var(--ui-spacing)*3);
     }
 }
 .post-cover {
     gap: 1.5rem;
     display: flex;
-    @apply flex-col md:flex-row-reverse
+    flex-direction: column;
 }
 .post-cover > .img-cover {
-@apply w-full aspect-[4/3] max-w-full md:max-w-[55%] object-cover;
+    width: 100%;
+    aspect-ratio: 4/3;
+    max-width: 100%;
+    object-fit: cover;
+}
+@media screen and (min-width: 640px) {
+    .post-cover {
+        flex-direction: row-reverse;
+        justify-content: flex-end;
+    }
+    .post-cover > .img-cover {
+        max-width: 55%;
+    }
+}
+.post-more-info {
+    margin-top: calc(var(--ui-spacing)*4);
+    font-size: 12px;
+    font-family: var(--font-mono);
 }
\ No newline at end of file
diff --git a/app/components/post-card.vue b/app/components/post-card.vue
index f380b6e..d2e7302 100644
--- a/app/components/post-card.vue
+++ b/app/components/post-card.vue
@@ -1,11 +1,11 @@
 <template>
     <template v-if="post">
-        <NuxtLink class="post-card" :to="post.path">
-            <img :src="post.coverImage" :alt="post?.title + '’s cover image'"/>
+        <NuxtLink class="post-card" :to="post?.path">
+            <img :src="post?.coverImage" :alt="post?.title + '’s cover image'"/>
             <div class="post-card-content">
-                <h3>{{ post.title }}</h3>
-                <p :title="post.description">{{ post.description }}</p>
-                <p class="mt-4 text-xs" :title="useFormatDate(post.dateUpdated)">{{ useRelativeDate(post.dateUpdated) }}</p>
+                <h3 :title="post?.title">{{ post?.title }}</h3>
+                <p style="margin-block: 0.25em" :title="post?.description">{{ post?.description }}</p>
+                <p class="post-more-info" :title="useFormatDate(post?.dateUpdated)">📅 {{ useRelativeDate(post?.dateUpdated) }}</p>
             </div>
         </NuxtLink>
     </template>
diff --git a/app/components/web-footer.vue b/app/components/web-footer.vue
index fb74bbd..9848a37 100644
--- a/app/components/web-footer.vue
+++ b/app/components/web-footer.vue
@@ -7,20 +7,17 @@ import WebThemeToggle from './web-theme-toggle.vue';
     <footer>
         <div class="article">
             <section class="web-section">
-                <h3 class="text-2xl md:text-3xl mb-4 font-light">Techit's Home /// thawia.ng</h3>
-                <p>
-                    <small>
-                        Copyright &copy; Techit Thawiang 2025 (2568). All rights reserved.<br>
-                        PGP/GPG Key: <code style="font-size: 12px;"><a href="https://files.thawia.ng/files/Techit Thawiang_0xE649CED321557334_public.asc">4116 33BE 1B4A 19D4 8D77  9ADE E649 CED3 2155 7334</a></code><br>
-                        Powered by <a class="link" href="https://dailitation.xyz">dailitation.xyz</a>, <a class="link" href="https://github.com/TechitWinner/web">Source Code</a>.
-                    </small>
+                <img src="/favicon.ico" alt="" width="48" height="48">
+                <h3 class="web-footer-title">Techit Thawiang's Website /// techit.win</h3>
+                <p class="web-footer-notice">
+                    Copyright &copy; Techit Thawiang 2025 (2568). All rights reserved.<br>
+                    PGP/GPG Key: <code style="font-size: 12px;"><a href="https://files.thawia.ng/files/Techit Thawiang_0xE649CED321557334_public.asc">4116 33BE 1B4A 19D4 8D77  9ADE E649 CED3 2155 7334</a></code><br>
+                    Powered by <a class="link" href="https://dailitation.xyz">dailitation.xyz</a>, <a class="link" href="https://github.com/TechitWinner/web">Source Code</a>.
                 </p>
-                <p>
-                    <small>
-                        More from me: <a class="link" href="https://unix.in.th">unix.in.th</a> and <a class="link" href="https://uptime.dailitation.xyz">Network Status</a>
-                    </small>
+                <p class="web-footer-notice">
+                    More from me: <a class="link" href="https://unix.in.th">unix.in.th</a> and <a class="link" href="https://uptime.dailitation.xyz">Network Status</a>
                 </p>
-                <WebThemeToggle/>
+                <!-- <WebThemeToggle/> -->
             </section>
         </div>
     </footer>
diff --git a/app/components/web-header.vue b/app/components/web-header.vue
index 9382941..b975486 100644
--- a/app/components/web-header.vue
+++ b/app/components/web-header.vue
@@ -1,10 +1,15 @@
 <template>
-    <div class="sticky top-0 w-full h-14 overflow-visible">
-        <header :class="{'web-header': true, 'web-header-autohide': !mobileHamburger }">
+    <div class="web-header-container">
+        <header class="web-header web-header-bg">
             <section class="web-heading z-10">
+                <button class="hamburger-toggle" @click="toggleMobileHamburger">
+                    <span class="material-symbols-outlined">menu</span>
+                </button>
                 <NuxtLink href="/" @click="closeMobileHamburger" class="web-heading-left-section text-(--ui-text) hover:text-primary">
-                        <img width="36" height="36"src="/favicon.ico">
-                    <p title="thawia.ng, Go home" class="web-nav-title mx-2" aria-hidden="true">TechitWinner</p>
+                    <div class="web-header-logo-banner">
+                        <img class="web-header-logo" width="36" height="36"src="/favicon.ico">
+                    </div>
+                    <p class="web-header-title" title="thawia.ng, Go home" aria-hidden="true">TechitWinner</p>
                 </NuxtLink>
                 <div class="web-heading-right-section">
                     <nav v-if="!mobileHamburger" class="nav-links">
@@ -29,13 +34,19 @@
                             </li>
                         </ul>
                     </nav>
-                    <button class="hamburger-toggle" @click="toggleMobileHamburger">
-                        <Icon name="oundr:menu"/>
-                    </button>
                 </div>
+                <div class="hamburger-toggle placeholder"></div>
             </section>
         </header>
+        <div v-if="mobileHamburger" class="hamburger-backdrop-overlay"></div>
         <nav :class="{'hamburger-menu': true, 'hamburger-menu-hidden': !mobileHamburger }">
+            <div class="hamburger-menu-header hamburger-menu-header-bg">
+                <section class="web-heading">
+                    <button class="hamburger-toggle no-autohide" @click="closeMobileHamburger">
+                        <span class="material-symbols-outlined">close</span>
+                    </button>
+                </section>
+            </div>
             <ul class="nav-wrapper">
                 <li class="nav-link">
                     <NuxtLink title="Go home" aria-label="Go home" @click="closeMobileHamburger" href="/">Home</NuxtLink>
@@ -52,9 +63,6 @@
                 <li class="nav-link">
                     <NuxtLink title="Go to collections" aria-label="Go to collections" @click="closeMobileHamburger" href="/collections">Collections</NuxtLink>
                 </li>
-                <li class="nav-button nav-button-only-desktop">
-                    <button role="button" class="hamburger-btn-square" @click="closeMobileHamburger" title="Close this menu" aria-label="Close this menu"><Icon name="oundr:x"/></button>
-                </li>
             </ul>
         </nav>
     </div>
diff --git a/app/pages/contact.vue b/app/pages/contact.vue
index 3dd92b1..871da78 100644
--- a/app/pages/contact.vue
+++ b/app/pages/contact.vue
@@ -8,38 +8,69 @@
             <section class="web-section" aria-labelledby="decentralized" aria-describedby="decentralized-paragraph-1">
                 <h2 class="web-title" id="decentralized">Decentral&shy;ized Ways</h2>
                 <p id="decentralized-paragraph-1">I recommended to contact me via these given ways.</p>
-                <ul class="list-disc">
-                    <li>
-                        <p>techit@thawia.ng — E-mail Address</p>
-                    </li>
-                    <li>
-                        <p>@techit@furnu.org — Mastodon</p>
-                    </li>
-                    <li>
-                        <p>@techitwinner:matrix.org — Matrix</p>
-                    </li>
-                </ul>
+                <section class="font-card-container">
+                    <a class="font-card" href="mailto:techit@thawia.ng">
+                        <div class="font-card-content">
+                            ✉️ techit@thawia.ng
+                        </div>
+                    </a>
+                    <a class="font-card" href="mailto:techit@dailitation.xyz">
+                        <div class="font-card-content">
+                            ✉️ techit@dailitation.xyz
+                        </div>
+                    </a>
+                    <a class="font-card" href="mailto:techit@unix.in.th">
+                        <div class="font-card-content">
+                            ✉️ techit@unix.in.th
+                        </div>
+                    </a>
+                    <a class="font-card" href="mailto:techit.th@icloud.com">
+                        <div class="font-card-content">
+                            ✉️ techit.th@icloud.com
+                        </div>
+                    </a>
+                    <a class="font-card" href="https://furnu.org/@techit">
+                        <div class="font-card-content">
+                            techit@furnu.org — Mastodon
+                        </div>
+                    </a>
+                    <div class="font-card">
+                        <div class="font-card-content">
+                            techitwinner@matrix.org — Matrix
+                        </div>
+                    </div>
+                </section>
             </section>
             <section class="web-section" aria-labelledby="centralized" aria-describedby="centralized-paragraph-1">
                 <h2 class="web-title" id="centralized">Social Media</h2>
                 <p id="centralized-paragraph-1">If I do not reply to messages sent via contact above, plesae kindly contact me via these social media accounts.</p>
-                <ul class="list-disc">
-                    <li>
-                        <p>@techitwinner — X (Twitter)</p>
-                    </li>
-                    <li>
-                        <p>@techitwinner — TikTok</p>
-                    </li>
-                    <li>
-                        <p>@techitwinner — Instagram</p>
-                    </li>
-                    <li>
-                        <p>@techitwinner — Facebook</p>
-                    </li>
-                    <li>
-                        <p>@thawia.ng — BlueSky</p>
-                    </li>
-                </ul>
+                <section class="font-card-container">
+                    <a class="font-card" href="https://x.com/techitwinner">
+                        <div class="font-card-content">
+                            @techitwinner — X (Twitter)
+                        </div>
+                    </a>
+                    <a class="font-card" href="https://tiktok.com/@techitwinner">
+                        <div class="font-card-content">
+                            @techitwinner — TikTok
+                        </div>
+                    </a>
+                    <a class="font-card" href="https://instagram.com/techitwinner">
+                        <div class="font-card-content">
+                            @techitwinner — Instagram
+                        </div>
+                    </a>
+                    <a class="font-card" href="https://facebook.com/@techitwinner">
+                        <div class="font-card-content">
+                            @techitwinner — Facebook
+                        </div>
+                    </a>
+                    <a class="font-card" href="https://bsky.app/profile/thawia.ng">
+                        <div class="font-card-content">
+                            @thawia.ng — BlueSky
+                        </div>
+                    </a>
+                </section>
             </section>
         </article>
     </main>
diff --git a/app/pages/fonts.vue b/app/pages/fonts.vue
index 55cc16e..d556d61 100644
--- a/app/pages/fonts.vue
+++ b/app/pages/fonts.vue
@@ -20,16 +20,23 @@
             <section v-else-if="fonts" v-for="family in fonts" key="family.id" class="web-section" :aria-labelledby="family.id + '-title'" :aria-describedby="family.desc + '-desc'">
                 <h2 :id="family.id + '-title'" class="web-title">{{ family.family }}</h2>
                 <p :id="family.id + '-desc'">{{ family.desc }}</p>
-                <ul class="font-card-container">
+                <!-- <ul class="font-card-container">
                     <li v-for="font in family.children" :key="font.id">
                         <a :class="'font-card', {disabled: font.disabled}" :href="fontUrl + font.css">
                             <div class="font-card-content text-xl">
                                 {{ font.name }}
-                                <!-- <p>{{ fontUrl + font.css }}</p> -->
+                                <p>{{ fontUrl + font.css }}</p>
                             </div>
                         </a>
                     </li>
-                </ul>
+                </ul> -->
+                <section class="font-card-container">
+                    <a class="font-card" v-for="font in family.children" :key="font.id" :href="fontUrl + font.css">
+                        <div class="font-card-content">
+                            {{ font.name }}
+                        </div>
+                    </a>
+                </section>
             </section>
             <section v-else class="web-section">
                 <h2 id="noto" class="web-title">An unknown error occured</h2>
diff --git a/app/pages/posts/[...slug].vue b/app/pages/posts/[...slug].vue
index 08504f5..0028551 100644
--- a/app/pages/posts/[...slug].vue
+++ b/app/pages/posts/[...slug].vue
@@ -3,6 +3,7 @@
         <article class="article">
             <section class="web-section" aria-labelledby="hero" aria-describedby="hero-desc">
                 <section class="max-w-6xl mx-auto z-[1]">
+                  <small class="prose-blog-pretext" aria-hidden="true">You are reading blog post:</small>
                   <h1 id="hero" class="font-hero">{{ post?.title }}</h1>
                   <div class="post-cover">
                     <section class="w-full">