From 522bdbe29e240de49b972ebf2fb323237020721f Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Sat, 27 Dec 2025 15:05:12 +0800
Subject: [PATCH 1/4] fix: menu vertical overflow

---
 assets/css/compiled/main.css                  |  47 ++----
 layouts/partials/header/basic.html            | 139 +++++++++---------
 .../partials/header/header-option-nested.html |   2 +-
 .../partials/header/header-option-simple.html |   2 +-
 4 files changed, 84 insertions(+), 106 deletions(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index d97050a4..92cac91b 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -390,9 +390,6 @@
   .mx-auto {
     margin-inline: auto;
   }
-  .-my-2 {
-    margin-block: calc(var(--spacing) * -2);
-  }
   .my-0 {
     margin-block: calc(var(--spacing) * 0);
   }
@@ -1144,8 +1141,8 @@
   .max-h-3 {
     max-height: calc(var(--spacing) * 3);
   }
-  .max-h-\[5rem\] {
-    max-height: 5rem;
+  .max-h-20 {
+    max-height: calc(var(--spacing) * 20);
   }
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
@@ -1213,8 +1210,8 @@
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
-  .max-w-\[5rem\] {
-    max-width: 5rem;
+  .max-w-20 {
+    max-width: calc(var(--spacing) * 20);
   }
   .max-w-\[200px\] {
     max-width: 200px;
@@ -1267,6 +1264,9 @@
   .flex-none {
     flex: none;
   }
+  .shrink {
+    flex-shrink: 1;
+  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -1417,9 +1417,6 @@
       margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-  .gap-x-3 {
-    column-gap: calc(var(--spacing) * 3);
-  }
   .gap-x-5 {
     column-gap: calc(var(--spacing) * 5);
   }
@@ -1450,6 +1447,11 @@
   .self-center {
     align-self: center;
   }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .\!overflow-hidden {
     overflow: hidden !important;
   }
@@ -1764,6 +1766,9 @@
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
+  .p-1 {
+    padding: calc(var(--spacing) * 1);
+  }
   .p-1\.5 {
     padding: calc(var(--spacing) * 1.5);
   }
@@ -1866,15 +1871,9 @@
   .pt-16 {
     padding-top: calc(var(--spacing) * 16);
   }
-  .pt-\[2px\] {
-    padding-top: 2px;
-  }
   .pt-\[5px\] {
     padding-top: 5px;
   }
-  .pr-2 {
-    padding-right: calc(var(--spacing) * 2);
-  }
   .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
@@ -1893,12 +1892,6 @@
   .pb-32 {
     padding-bottom: calc(var(--spacing) * 32);
   }
-  .pb-\[3px\] {
-    padding-bottom: 3px;
-  }
-  .pl-0 {
-    padding-left: calc(var(--spacing) * 0);
-  }
   .text-center {
     text-align: center;
   }
@@ -2762,11 +2755,6 @@
       margin-right: calc(var(--spacing) * 7);
     }
   }
-  .md\:ml-12 {
-    @media (width >= 853px) {
-      margin-left: calc(var(--spacing) * 12);
-    }
-  }
   .md\:flex {
     @media (width >= 853px) {
       display: flex;
@@ -2822,11 +2810,6 @@
       padding-inline: calc(var(--spacing) * 24);
     }
   }
-  .md\:pr-4 {
-    @media (width >= 853px) {
-      padding-right: calc(var(--spacing) * 4);
-    }
-  }
   .lg\:absolute {
     @media (width >= 1024px) {
       position: absolute;
diff --git a/layouts/partials/header/basic.html b/layouts/partials/header/basic.html
index b4fb3fe6..4e3bbf47 100644
--- a/layouts/partials/header/basic.html
+++ b/layouts/partials/header/basic.html
@@ -15,7 +15,7 @@
               src="{{ $logo.RelPermalink }}"
               width="{{ div $logo.Width 2 }}"
               height="{{ div $logo.Height 2 }}"
-              class="logo max-h-[5rem] max-w-[5rem] object-scale-down object-left nozoom"
+              class="logo max-h-20 max-w-20 object-scale-down object-left nozoom"
               alt="">
           {{ end }}
         </a>
@@ -26,7 +26,7 @@
 
 {{/* Desktop navigation */}}
 {{ define "HeaderDesktopNavigation" }}
-  <nav class="hidden md:flex items-center gap-x-5 md:ml-12 h-12">
+  <nav class="hidden md:flex items-center gap-x-5 h-12">
     {{ if .Site.Menus.main }}
       {{ range .Site.Menus.main }}
         {{ partial "header/header-option.html" . }}
@@ -49,7 +49,7 @@
     {{ end }}
 
     {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
-      <div class="{{ if .Site.Params.footer.showScrollToTop | default true -}}{{- end }} flex items-center">
+      <div class="flex items-center">
         <button
           id="appearance-switcher"
           aria-label="Dark mode switcher"
@@ -67,11 +67,9 @@
   </nav>
 {{ end }}
 
-{{/* Mobile navigation */}}
-{{ define "HeaderMobileToolbar" }}
-  <div class="flex md:hidden items-center gap-x-5 md:ml-12 h-12">
-    <span></span>
-
+{{/* Mobile navigation - now includes toolbar functions */}}
+{{ define "HeaderMobileNavigation" }}
+  <div class="flex md:hidden items-center gap-x-5 h-12">
     {{ partial "translations.html" . }}
     {{ if .Site.Params.enableA11y | default false }}
       {{ template "HeaderA11y" (dict "prefix" "mobile-" "Site" .Site) }}
@@ -92,7 +90,7 @@
         id="appearance-switcher-mobile"
         aria-label="Dark mode switcher"
         type="button"
-        class="text-base hover:text-primary-600 dark:hover:text-primary-400 me-1">
+        class="text-base hover:text-primary-600 dark:hover:text-primary-400">
         <div class="flex items-center justify-center dark:hidden">
           {{ partial "icon.html" "moon" }}
         </div>
@@ -101,62 +99,61 @@
         </div>
       </button>
     {{ end }}
+
+    {{/* Hamburger menu button */}}
+    {{ if .Site.Menus.main }}
+      <div id="menu-button" class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
+        {{ partial "icon.html" "bars" }}
+      </div>
+    {{ end }}
   </div>
-{{ end }}
 
-{{ define "HeaderMobileNavigation" }}
-  <div class="-my-2 md:hidden">
-    <div id="menu-button" class="block">
-      {{ if .Site.Menus.main }}
-        <div class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
-          {{ partial "icon.html" "bars" }}
-        </div>
-        <div
-          id="menu-wrapper"
-          class="fixed inset-0 z-30 invisible w-screen h-screen m-0 overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50 pt-[5px]">
-          <ul
-            class="flex space-y-2 mt-3 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none text-end max-w-7xl">
-            <li id="menu-close-button">
-              <span
-                class="cursor-pointer inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400">
-                {{ partial "icon.html" "xmark" }}
-              </span>
+  {{/* Mobile menu overlay */}}
+  {{ if .Site.Menus.main }}
+    <div
+      id="menu-wrapper"
+      class="fixed inset-0 z-30 invisible w-screen h-screen m-0 overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50 pt-[5px]">
+      <ul
+        class="flex space-y-2 mt-3 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none text-end max-w-7xl">
+        <li id="menu-close-button">
+          <span
+            class="cursor-pointer inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400">
+            {{ partial "icon.html" "xmark" }}
+          </span>
+        </li>
+
+        {{ range .Site.Menus.main }}
+          {{ partial "header/header-mobile-option.html" . }}
+        {{ end }}
+
+      </ul>
+      {{ if .Site.Menus.subnavigation }}
+        <hr>
+        <ul
+          class="flex mt-4 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none text-end max-w-7xl">
+          {{ range .Site.Menus.subnavigation }}
+            <li class="mb-1">
+              <a
+                href="{{ .URL }}"
+                {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:") }}
+                  target="_blank"
+                {{ end }}
+                class="flex items-center">
+                {{ if .Pre }}
+                  <span {{ if and .Pre .Name }}class="mr-3"{{ end }}>
+                    {{ partial "icon.html" .Pre }}
+                  </span>
+                {{ end }}
+                <p class="text-sm font-sm" title="{{ .Title }}">
+                  {{ .Name | markdownify }}
+                </p>
+              </a>
             </li>
-
-            {{ range .Site.Menus.main }}
-              {{ partial "header/header-mobile-option.html" . }}
-            {{ end }}
-
-          </ul>
-          {{ if .Site.Menus.subnavigation }}
-            <hr>
-            <ul
-              class="flex mt-4 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none text-end max-w-7xl">
-              {{ range .Site.Menus.subnavigation }}
-                <li class="mb-1">
-                  <a
-                    href="{{ .URL }}"
-                    {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:") }}
-                      target="_blank"
-                    {{ end }}
-                    class="flex items-center">
-                    {{ if .Pre }}
-                      <span {{ if and .Pre .Name }}class="mr-3"{{ end }}>
-                        {{ partial "icon.html" .Pre }}
-                      </span>
-                    {{ end }}
-                    <p class="text-sm font-sm" title="{{ .Title }}">
-                      {{ .Name | markdownify }}
-                    </p>
-                  </a>
-                </li>
-              {{ end }}
-            </ul>
           {{ end }}
-        </div>
+        </ul>
       {{ end }}
     </div>
-  </div>
+  {{ end }}
 {{ end }}
 
 {{ define "HeaderA11y" }}
@@ -200,7 +197,7 @@
       <div class="space-y-5">
         {{ $toggles := slice }}
         {{ $shouldDisableBlur := or site.Params.homepage.layoutBackgroundBlur site.Params.article.layoutBackgroundBlur site.Params.list.layoutBackgroundBlur }}
-        {{ $shouldDisableBackgroundImage := or 
+        {{ $shouldDisableBackgroundImage := or
           (eq site.Params.homepage.layout "background")
           (eq site.Params.article.heroStyle "background")
           (eq site.Params.list.heroStyle "background")
@@ -251,21 +248,19 @@
 {{ end }}
 
 {{/* ========== Render HTML ========== */}}
-<div
-  class="main-menu flex items-center justify-between py-6 md:justify-start gap-x-3 pt-[2px] pr-2 md:pr-4 pb-[3px] pl-0">
+<div class="main-menu flex items-center w-full gap-2 p-1">
   {{ template "HeaderLogo" . }}
-  <div class="flex flex-1 items-center justify-between">
-    <nav class="flex space-x-3">
-      {{ if not .Site.Params.disableTextInHeader | default true }}
-        <a href="{{ "" | relLangURL }}" class="text-base font-medium">
-          {{ .Site.Title | markdownify }}
-        </a>
-      {{ end }}
-    </nav>
+  {{ if not .Site.Params.disableTextInHeader | default true }}
+    <a
+      href="{{ "" | relLangURL }}"
+      class="text-base font-medium truncate min-w-0 shrink">
+      {{ .Site.Title | markdownify }}
+    </a>
+  {{ end }}
+  <div class="flex items-center ms-auto">
     {{ template "HeaderDesktopNavigation" . }}
-    {{ template "HeaderMobileToolbar" . }}
+    {{ template "HeaderMobileNavigation" . }}
   </div>
-  {{ template "HeaderMobileNavigation" . }}
 </div>
 
 {{ if .Site.Menus.subnavigation }}
diff --git a/layouts/partials/header/header-option-nested.html b/layouts/partials/header/header-option-nested.html
index 02036b77..b1d7ad7b 100644
--- a/layouts/partials/header/header-option-nested.html
+++ b/layouts/partials/header/header-option-nested.html
@@ -15,7 +15,7 @@
       {{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
       class="text-base font-medium hover:text-primary-600 dark:hover:text-primary-400"
       title="{{ .Title }}">
-      <p>
+      <p class="break-normal">
         {{ .Name | markdownify }}
       </p>
     </a>
diff --git a/layouts/partials/header/header-option-simple.html b/layouts/partials/header/header-option-simple.html
index a9a87870..ccd60b1e 100644
--- a/layouts/partials/header/header-option-simple.html
+++ b/layouts/partials/header/header-option-simple.html
@@ -10,7 +10,7 @@
     </span>
   {{ end }}
   {{ if .Name }}
-    <p class="text-base font-medium">
+    <p class="text-base font-medium break-normal">
       {{ .Name | markdownify }}
     </p>
   {{ end }}

From 8ab880739827e30bbd04556a40309ea91805b33b Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Sat, 27 Dec 2025 15:05:22 +0800
Subject: [PATCH 2/4] feat: better mobile menu

---
 assets/css/compiled/main.css                  | 294 ++++++++++++++----
 assets/css/main.css                           |  65 +++-
 assets/js/mobilemenu.js                       |  33 --
 layouts/_default/baseof.html                  |   3 +-
 layouts/partials/head.html                    |   1 -
 layouts/partials/header/basic.html            | 262 ++--------------
 layouts/partials/header/components/a11y.html  |  88 ++++++
 .../header/components/desktop-menu.html       | 116 +++++++
 .../header/components/mobile-menu.html        | 152 +++++++++
 .../header/components/translations.html       |  23 ++
 .../header/header-mobile-option-nested.html   |  41 ---
 .../header/header-mobile-option-simple.html   |  23 --
 .../partials/header/header-mobile-option.html |   5 -
 .../partials/header/header-option-nested.html |  50 ---
 .../partials/header/header-option-simple.html |  17 -
 layouts/partials/header/header-option.html    |   5 -
 layouts/partials/toc.html                     |   2 +-
 layouts/partials/translations.html            |  29 --
 18 files changed, 678 insertions(+), 531 deletions(-)
 delete mode 100644 assets/js/mobilemenu.js
 create mode 100644 layouts/partials/header/components/a11y.html
 create mode 100644 layouts/partials/header/components/desktop-menu.html
 create mode 100644 layouts/partials/header/components/mobile-menu.html
 create mode 100644 layouts/partials/header/components/translations.html
 delete mode 100644 layouts/partials/header/header-mobile-option-nested.html
 delete mode 100644 layouts/partials/header/header-mobile-option-simple.html
 delete mode 100644 layouts/partials/header/header-mobile-option.html
 delete mode 100644 layouts/partials/header/header-option-nested.html
 delete mode 100644 layouts/partials/header/header-option-simple.html
 delete mode 100644 layouts/partials/header/header-option.html
 delete mode 100644 layouts/partials/translations.html

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 92cac91b..ea544d32 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -11,6 +11,7 @@
     --spacing: 0.25rem;
     --container-2xs: 18rem;
     --container-xs: 20rem;
+    --container-md: 28rem;
     --container-xl: 36rem;
     --container-3xl: 48rem;
     --container-7xl: 80rem;
@@ -36,6 +37,7 @@
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --font-weight-extrabold: 800;
+    --tracking-tight: -0.025em;
     --tracking-normal: 0em;
     --leading-snug: 1.375;
     --leading-relaxed: 1.625;
@@ -267,12 +269,18 @@
   .end-6 {
     inset-inline-end: calc(var(--spacing) * 6);
   }
+  .end-8 {
+    inset-inline-end: calc(var(--spacing) * 8);
+  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
+  .top-5 {
+    top: calc(var(--spacing) * 5);
+  }
   .top-20 {
     top: calc(var(--spacing) * 20);
   }
@@ -303,9 +311,6 @@
   .z-10 {
     z-index: 10;
   }
-  .z-30 {
-    z-index: 30;
-  }
   .z-50 {
     z-index: 50;
   }
@@ -408,6 +413,9 @@
   .ms-6 {
     margin-inline-start: calc(var(--spacing) * 6);
   }
+  .ms-7 {
+    margin-inline-start: calc(var(--spacing) * 7);
+  }
   .ms-auto {
     margin-inline-start: auto;
   }
@@ -1015,29 +1023,6 @@
       height: var(--scrollbar-height, 16px);
     }
   }
-  .scrollbar-thin {
-    &::-webkit-scrollbar-track {
-      background-color: var(--scrollbar-track);
-      border-radius: var(--scrollbar-track-radius);
-    }
-    &::-webkit-scrollbar-thumb {
-      background-color: var(--scrollbar-thumb);
-      border-radius: var(--scrollbar-thumb-radius);
-    }
-    &::-webkit-scrollbar-corner {
-      background-color: var(--scrollbar-corner);
-      border-radius: var(--scrollbar-corner-radius);
-    }
-    @supports (-moz-appearance:none) {
-      scrollbar-width: thin;
-      scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
-    }
-    &::-webkit-scrollbar {
-      display: block;
-      width: 8px;
-      height: 8px;
-    }
-  }
   .line-clamp-3 {
     overflow: hidden;
     display: -webkit-box;
@@ -1068,6 +1053,9 @@
   .inline-block {
     display: inline-block;
   }
+  .inline-flex {
+    display: inline-flex;
+  }
   .table {
     display: table;
   }
@@ -1090,6 +1078,9 @@
   .h-3 {
     height: calc(var(--spacing) * 3);
   }
+  .h-4 {
+    height: calc(var(--spacing) * 4);
+  }
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
@@ -1099,9 +1090,15 @@
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
+  .h-14 {
+    height: calc(var(--spacing) * 14);
+  }
   .h-24 {
     height: calc(var(--spacing) * 24);
   }
@@ -1168,6 +1165,9 @@
   .w-3 {
     width: calc(var(--spacing) * 3);
   }
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
@@ -1177,6 +1177,9 @@
   .w-8 {
     width: calc(var(--spacing) * 8);
   }
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
@@ -1231,6 +1234,9 @@
   .max-w-full {
     max-width: 100%;
   }
+  .max-w-md {
+    max-width: var(--container-md);
+  }
   .max-w-prose {
     max-width: 65ch;
   }
@@ -1359,6 +1365,9 @@
   .appearance-none {
     appearance: none;
   }
+  .grid-rows-\[0fr\] {
+    grid-template-rows: 0fr;
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -1386,16 +1395,12 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
-  .space-y-2 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
   .space-y-3 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1410,6 +1415,13 @@
       margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-6 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-10 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1420,6 +1432,9 @@
   .gap-x-5 {
     column-gap: calc(var(--spacing) * 5);
   }
+  .gap-x-6 {
+    column-gap: calc(var(--spacing) * 6);
+  }
   .space-x-2 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -1658,15 +1673,15 @@
   .bg-neutral-50 {
     background-color: rgba(var(--color-neutral-50), 1);
   }
+  .bg-neutral-50\/97 {
+    background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-50), 1), 1) 97%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, rgba(var(--color-neutral-50), 1) 97%, transparent);
+    }
+  }
   .bg-neutral-100 {
     background-color: rgba(var(--color-neutral-100), 1);
   }
-  .bg-neutral-100\/50 {
-    background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-100), 1), 1) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, rgba(var(--color-neutral-100), 1) 50%, transparent);
-    }
-  }
   .bg-neutral-100\/75 {
     background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-100), 1), 1) 75%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1772,6 +1787,9 @@
   .p-1\.5 {
     padding: calc(var(--spacing) * 1.5);
   }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -1835,6 +1853,9 @@
   .py-16 {
     padding-block: calc(var(--spacing) * 16);
   }
+  .py-20 {
+    padding-block: calc(var(--spacing) * 20);
+  }
   .py-\[0\.4rem\] {
     padding-block: 0.4rem;
   }
@@ -1871,9 +1892,6 @@
   .pt-16 {
     padding-top: calc(var(--spacing) * 16);
   }
-  .pt-\[5px\] {
-    padding-top: 5px;
-  }
   .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
@@ -1892,6 +1910,9 @@
   .pb-32 {
     padding-bottom: calc(var(--spacing) * 32);
   }
+  .pl-0 {
+    padding-left: calc(var(--spacing) * 0);
+  }
   .text-center {
     text-align: center;
   }
@@ -2005,6 +2026,10 @@
     --tw-tracking: var(--tracking-normal);
     letter-spacing: var(--tracking-normal);
   }
+  .tracking-tight {
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+  }
   .text-wrap {
     text-wrap: wrap;
   }
@@ -2221,11 +2246,21 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[grid-template-rows\] {
+    transition-property: grid-template-rows;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[height\] {
     transition-property: height;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[opacity\,visibility\] {
+    transition-property: opacity,visibility;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[transform\,_opacity\] {
     transition-property: transform, opacity;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2302,12 +2337,6 @@
   .\!\[clip\:rect\(0\,0\,0\,0\)\] {
     clip: rect(0,0,0,0) !important;
   }
-  .scrollbar-thumb-neutral-400 {
-    --scrollbar-thumb: oklch(70.8% 0 0);
-  }
-  .scrollbar-track-neutral-200 {
-    --scrollbar-track: oklch(92.2% 0 0);
-  }
   .group-open\:rotate-0 {
     &:is(:where(.group):is([open], :popover-open, :open) *) {
       rotate: 0deg;
@@ -2403,6 +2432,21 @@
       border-top-color: transparent;
     }
   }
+  .peer-checked\:visible {
+    &:is(:where(.peer):checked ~ *) {
+      visibility: visible;
+    }
+  }
+  .peer-checked\:opacity-100 {
+    &:is(:where(.peer):checked ~ *) {
+      opacity: 100%;
+    }
+  }
+  .peer-checked\/full\:grid-rows-\[1fr\] {
+    &:is(:where(.peer\/full):checked ~ *) {
+      grid-template-rows: 1fr;
+    }
+  }
   .before\:absolute {
     &::before {
       content: var(--tw-content);
@@ -3025,6 +3069,11 @@
       rotate: 180deg;
     }
   }
+  .dark\:block {
+    &:is(.dark *) {
+      display: block;
+    }
+  }
   .dark\:flex {
     &:is(.dark *) {
       display: flex;
@@ -3148,6 +3197,11 @@
       }
     }
   }
+  .dark\:bg-neutral-900 {
+    &:is(.dark *) {
+      background-color: rgba(var(--color-neutral-900), 1);
+    }
+  }
   .dark\:bg-neutral-900\/50 {
     &:is(.dark *) {
       background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 50%, transparent);
@@ -3156,6 +3210,14 @@
       }
     }
   }
+  .dark\:bg-neutral-900\/99 {
+    &:is(.dark *) {
+      background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 99%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, rgba(var(--color-neutral-900), 1) 99%, transparent);
+      }
+    }
+  }
   .dark\:bg-primary-300 {
     &:is(.dark *) {
       background-color: rgba(var(--color-primary-300), 1);
@@ -3260,16 +3322,6 @@
       opacity: 60%;
     }
   }
-  .dark\:scrollbar-thumb-neutral-600 {
-    &:is(.dark *) {
-      --scrollbar-thumb: oklch(43.9% 0 0);
-    }
-  }
-  .dark\:scrollbar-track-neutral-800 {
-    &:is(.dark *) {
-      --scrollbar-track: oklch(26.9% 0 0);
-    }
-  }
   .dark\:hover\:\!bg-primary-700 {
     &:is(.dark *) {
       &:hover {
@@ -3345,6 +3397,30 @@
       display: none;
     }
   }
+  .\[\&_\.translation_\.menuhide_span\]\:text-sm\! {
+    & .translation .menuhide span {
+      font-size: var(--text-sm) !important;
+      line-height: var(--tw-leading, var(--text-sm--line-height)) !important;
+    }
+  }
+  .\[\&_\.translation_button_\.icon\]\:text-4xl\! {
+    & .translation button .icon {
+      font-size: var(--text-4xl) !important;
+      line-height: var(--tw-leading, var(--text-4xl--line-height)) !important;
+    }
+  }
+  .\[\&_\.translation_button_span\]\:text-base\! {
+    & .translation button span {
+      font-size: var(--text-base) !important;
+      line-height: var(--tw-leading, var(--text-base--line-height)) !important;
+    }
+  }
+  .\[\&_span\]\:text-2xl {
+    & span {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
+  }
 }
 @layer utilities {
   .highlight-wrapper {
@@ -4170,6 +4246,9 @@ body.zen-mode-enable {
     color: var(--adm-todo-text);
   }
 }
+html:not(.dark) {
+  color-scheme: light;
+}
 html.dark {
   color-scheme: dark;
 }
@@ -4407,21 +4486,98 @@ pre {
 .medium-zoom-image--opened {
   z-index: 100;
 }
-.nested-menu:hover + .menuhide {
-  visibility: visible;
-  opacity: 1;
-  transition: visibility 0.3s, opacity 0.3s ease-in-out;
+@layer utilities {
+  .bf-border-color {
+    border-color: rgba(var(--color-neutral-300), 1);
+    &:is(.dark *) {
+      border-color: rgba(var(--color-neutral-700), 1);
+    }
+  }
+  .bf-border-color-hover {
+    &:hover {
+      @media (hover: hover) {
+        border-color: rgba(var(--color-primary-600), 1);
+      }
+    }
+    &:is(.dark *) {
+      &:hover {
+        @media (hover: hover) {
+          border-color: rgba(var(--color-primary-400), 1);
+        }
+      }
+    }
+  }
+  .bf-icon-color-hover {
+    &:hover {
+      @media (hover: hover) {
+        color: rgba(var(--color-primary-600), 1);
+      }
+    }
+    &:is(.dark *) {
+      &:hover {
+        @media (hover: hover) {
+          color: rgba(var(--color-primary-400), 1);
+        }
+      }
+    }
+  }
+  .bf-scrollbar {
+    &::-webkit-scrollbar-track {
+      background-color: var(--scrollbar-track);
+      border-radius: var(--scrollbar-track-radius);
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--scrollbar-thumb);
+      border-radius: var(--scrollbar-thumb-radius);
+    }
+    &::-webkit-scrollbar-corner {
+      background-color: var(--scrollbar-corner);
+      border-radius: var(--scrollbar-corner-radius);
+    }
+    @supports (-moz-appearance:none) {
+      scrollbar-width: thin;
+      scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
+    }
+    &::-webkit-scrollbar {
+      display: block;
+      width: 8px;
+      height: 8px;
+    }
+    --scrollbar-thumb: oklch(70.8% 0 0);
+    --scrollbar-track: oklch(92.2% 0 0);
+    &:is(.dark *) {
+      --scrollbar-thumb: oklch(43.9% 0 0);
+    }
+    &:is(.dark *) {
+      --scrollbar-track: oklch(26.9% 0 0);
+    }
+  }
 }
-.menuhide:hover {
-  visibility: visible;
-  opacity: 1;
-  transition: visibility 0.3s, opacity 0.3s ease-in-out;
+body:has(#mobile-menu-toggle:checked) {
+  overflow: hidden;
+}
+@media (min-width: 853px) {
+  body {
+    position: static !important;
+  }
+}
+#bmc-wbtn {
+  z-index: 50 !important;
+}
+.nested-menu {
+  position: relative;
 }
 .menuhide {
-  visibility: hidden;
-  opacity: 0;
-  transition: visibility 0.3s, opacity 0.3s ease-in-out;
+  position: absolute;
   z-index: 1000;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: visibility 0.3s, opacity 0.3s ease-in-out;
+}
+.nested-menu:hover .menuhide, .nested-menu:focus-within .menuhide {
+  opacity: 1;
+  visibility: visible;
 }
 .active {
   text-decoration-line: underline;
diff --git a/assets/css/main.css b/assets/css/main.css
index 6a36911d..9482c139 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -9,6 +9,10 @@
 @import "./components/a11y.css";
 @import "./components/admonition.css" layer(components);
 
+html:not(.dark) {
+  color-scheme: light;
+}
+
 html.dark {
   color-scheme: dark;
 }
@@ -247,29 +251,62 @@ pre {
   z-index: 100;
 }
 
-.nested-menu:hover + .menuhide {
-  visibility: visible;
-  opacity: 1;
-  transition:
-    visibility 0.3s,
-    opacity 0.3s ease-in-out;
+@layer utilities {
+  .bf-border-color {
+    @apply border-neutral-300 dark:border-neutral-700;
+  }
+
+  .bf-border-color-hover {
+    @apply hover:border-primary-600 dark:hover:border-primary-400;
+  }
+
+  .bf-icon-color-hover {
+    @apply hover:text-primary-600 dark:hover:text-primary-400;
+  }
+
+  .bf-scrollbar {
+    @apply scrollbar-thin scrollbar-track-neutral-200 scrollbar-thumb-neutral-400 dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600;
+  }
 }
 
-.menuhide:hover {
-  visibility: visible;
-  opacity: 1;
-  transition:
-    visibility 0.3s,
-    opacity 0.3s ease-in-out;
+/* Prevent body scroll when mobile menu is open */
+body:has(#mobile-menu-toggle:checked) {
+  overflow: hidden;
+}
+
+/* Reset body position for desktop after it was modified on mobile */
+@media (min-width: 853px) {
+  body {
+    position: static !important;
+  }
+}
+
+/* Hide buy me a coffee in mobile menu */
+#bmc-wbtn {
+  z-index: 50 !important;
+}
+
+.nested-menu {
+  position: relative;
 }
 
 .menuhide {
-  visibility: hidden;
+  position: absolute;
+  z-index: 1000;
+  white-space: nowrap;
+
   opacity: 0;
+  visibility: hidden;
+
   transition:
     visibility 0.3s,
     opacity 0.3s ease-in-out;
-  z-index: 1000;
+}
+
+.nested-menu:hover .menuhide,
+.nested-menu:focus-within .menuhide {
+  opacity: 1;
+  visibility: visible;
 }
 
 .active {
diff --git a/assets/js/mobilemenu.js b/assets/js/mobilemenu.js
deleted file mode 100644
index a6503650..00000000
--- a/assets/js/mobilemenu.js
+++ /dev/null
@@ -1,33 +0,0 @@
-var menuButton = document.getElementById("menu-button");
-var menuCloseButton = document.getElementById("menu-close-button");
-var menuWrapper = document.getElementById("menu-wrapper");
-
-var menuOpen = false;
-
-var openMenu = function () {
-  if (!menuOpen) {
-    menuOpen = true;
-    document.body.style.overflowY = "hidden";
-    menuButton.style.visibility = "hidden";
-    menuWrapper.style.visibility = "visible";
-    menuWrapper.style.opacity = "1";
-    window.onbeforeunload = function () {
-      closeMenu();
-    };
-  }
-};
-
-var closeMenu = function (e) {
-  if (menuOpen) {
-    menuOpen = false;
-    document.body.style.overflowY = "auto";
-    menuButton.style.visibility = "visible";
-    menuWrapper.style.visibility = "hidden";
-    menuWrapper.style.opacity = "0";
-    window.onbeforeunload = function () {};
-    e.stopPropagation();
-  }
-};
-
-menuButton && menuButton.addEventListener("click", openMenu);
-menuCloseButton && menuCloseButton.addEventListener("click", closeMenu);
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 6370e932..44c6acfe 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -10,8 +10,7 @@
 
   {{ $bodyLayout := "flex flex-col h-screen m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32" }}
   {{ $bodyColor := "text-lg bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral" }}
-  {{ $bodyScrollbar := "scrollbar-thin scrollbar-track-neutral-200 scrollbar-thumb-neutral-400 dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600" }}
-  <body class="{{ $bodyLayout }} {{ $bodyColor }} {{ if site.Params.enableStyledScrollbar | default true }}{{ $bodyScrollbar }}{{ end }}">
+  <body class="{{ $bodyLayout }} {{ $bodyColor }} {{ if site.Params.enableStyledScrollbar | default true }}bf-scrollbar{{ end }}">
     <div id="the-top" class="absolute flex self-center">
       <a
         class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 focus:translate-y-0 dark:bg-neutral-600"
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 598b4c20..93c013cd 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -154,7 +154,6 @@
   {{ if .Site.Params.rtl | default false }}
     {{ $jsResources = $jsResources | append (resources.Get "js/rtl.js") }}
   {{ end }}
-  {{ $jsResources = $jsResources | append (resources.Get "js/mobilemenu.js") }}
   {{ $jsResources = $jsResources | append (resources.Get "js/button-likes.js") }}
   {{ $jsResources = $jsResources | append (resources.Get "js/katex-render.js") }}
   {{ $jsResources = $jsResources | append (resources.Get "js/print-support.js") }}
diff --git a/layouts/partials/header/basic.html b/layouts/partials/header/basic.html
index 4e3bbf47..9c9c9f13 100644
--- a/layouts/partials/header/basic.html
+++ b/layouts/partials/header/basic.html
@@ -1,5 +1,4 @@
-{{/* Logo section */}}
-{{ define "HeaderLogo" }}
+<div class="main-menu flex items-center w-full gap-2 p-1 pl-0">
   {{ if .Site.Params.Logo }}
     {{ $logo := resources.Get .Site.Params.Logo }}
     {{ if $logo }}
@@ -21,245 +20,19 @@
         </a>
       </div>
     {{ end }}
-  {{- end }}
-{{ end }}
-
-{{/* Desktop navigation */}}
-{{ define "HeaderDesktopNavigation" }}
-  <nav class="hidden md:flex items-center gap-x-5 h-12">
-    {{ if .Site.Menus.main }}
-      {{ range .Site.Menus.main }}
-        {{ partial "header/header-option.html" . }}
-      {{ end }}
-    {{ end }}
-
-    {{ partial "translations.html" . }}
-    {{ if .Site.Params.enableA11y | default false }}
-      {{ template "HeaderA11y" (dict "prefix" "desktop-" "Site" .Site) }}
-    {{ end }}
-
-    {{ if .Site.Params.enableSearch | default false }}
-      <button
-        id="search-button"
-        aria-label="Search"
-        class="text-base hover:text-primary-600 dark:hover:text-primary-400"
-        title="{{ i18n "search.open_button_title" }}">
-        {{ partial "icon.html" "search" }}
-      </button>
-    {{ end }}
-
-    {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
-      <div class="flex items-center">
-        <button
-          id="appearance-switcher"
-          aria-label="Dark mode switcher"
-          type="button"
-          class="text-base hover:text-primary-600 dark:hover:text-primary-400">
-          <div class="flex items-center justify-center dark:hidden">
-            {{ partial "icon.html" "moon" }}
-          </div>
-          <div class="items-center justify-center hidden dark:flex">
-            {{ partial "icon.html" "sun" }}
-          </div>
-        </button>
-      </div>
-    {{ end }}
-  </nav>
-{{ end }}
-
-{{/* Mobile navigation - now includes toolbar functions */}}
-{{ define "HeaderMobileNavigation" }}
-  <div class="flex md:hidden items-center gap-x-5 h-12">
-    {{ partial "translations.html" . }}
-    {{ if .Site.Params.enableA11y | default false }}
-      {{ template "HeaderA11y" (dict "prefix" "mobile-" "Site" .Site) }}
-    {{ end }}
-
-    {{ if .Site.Params.enableSearch | default false }}
-      <button
-        id="search-button-mobile"
-        aria-label="Search"
-        class="text-base hover:text-primary-600 dark:hover:text-primary-400"
-        title="{{ i18n "search.open_button_title" }}">
-        {{ partial "icon.html" "search" }}
-      </button>
-    {{ end }}
-
-    {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
-      <button
-        id="appearance-switcher-mobile"
-        aria-label="Dark mode switcher"
-        type="button"
-        class="text-base hover:text-primary-600 dark:hover:text-primary-400">
-        <div class="flex items-center justify-center dark:hidden">
-          {{ partial "icon.html" "moon" }}
-        </div>
-        <div class="items-center justify-center hidden dark:flex">
-          {{ partial "icon.html" "sun" }}
-        </div>
-      </button>
-    {{ end }}
-
-    {{/* Hamburger menu button */}}
-    {{ if .Site.Menus.main }}
-      <div id="menu-button" class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
-        {{ partial "icon.html" "bars" }}
-      </div>
-    {{ end }}
-  </div>
-
-  {{/* Mobile menu overlay */}}
-  {{ if .Site.Menus.main }}
-    <div
-      id="menu-wrapper"
-      class="fixed inset-0 z-30 invisible w-screen h-screen m-0 overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50 pt-[5px]">
-      <ul
-        class="flex space-y-2 mt-3 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none text-end max-w-7xl">
-        <li id="menu-close-button">
-          <span
-            class="cursor-pointer inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400">
-            {{ partial "icon.html" "xmark" }}
-          </span>
-        </li>
-
-        {{ range .Site.Menus.main }}
-          {{ partial "header/header-mobile-option.html" . }}
-        {{ end }}
-
-      </ul>
-      {{ if .Site.Menus.subnavigation }}
-        <hr>
-        <ul
-          class="flex mt-4 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none text-end max-w-7xl">
-          {{ range .Site.Menus.subnavigation }}
-            <li class="mb-1">
-              <a
-                href="{{ .URL }}"
-                {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:") }}
-                  target="_blank"
-                {{ end }}
-                class="flex items-center">
-                {{ if .Pre }}
-                  <span {{ if and .Pre .Name }}class="mr-3"{{ end }}>
-                    {{ partial "icon.html" .Pre }}
-                  </span>
-                {{ end }}
-                <p class="text-sm font-sm" title="{{ .Title }}">
-                  {{ .Name | markdownify }}
-                </p>
-              </a>
-            </li>
-          {{ end }}
-        </ul>
-      {{ end }}
-    </div>
   {{ end }}
-{{ end }}
-
-{{ define "HeaderA11y" }}
-  {{- $prefix := .prefix | default "" -}}
-  <div class="flex items-center">
-    <button
-      id="{{ $prefix }}a11y-toggle"
-      aria-label="Open accessibility panel"
-      aria-expanded="false"
-      type="button"
-      class="text-base hover:text-primary-600 dark:hover:text-primary-400"
-      role="button"
-      aria-pressed="false">
-      {{ partial "icon.html" "a11y" }}
-    </button>
-
-    <div id="{{ $prefix }}a11y-overlay" class="fixed inset-0 z-500 hidden"></div>
-
-    <div
-      id="{{ $prefix }}a11y-panel"
-      role="dialog"
-      aria-labelledby="{{ $prefix }}a11y-panel-title"
-      class="a11y-panel-enter fixed hidden z-500 p-6 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 rounded-lg shadow-xl bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700"
-      style="min-width: 20rem;">
-      <div class="flex items-center justify-between mb-6">
-        <h3
-          id="{{ $prefix }}a11y-panel-title"
-          class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
-          {{ i18n "a11y.title" }}
-        </h3>
-        <button
-          id="{{ $prefix }}a11y-close"
-          class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
-          aria-label="Close a11y panel">
-          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
-      </div>
-
-      <div class="space-y-5">
-        {{ $toggles := slice }}
-        {{ $shouldDisableBlur := or site.Params.homepage.layoutBackgroundBlur site.Params.article.layoutBackgroundBlur site.Params.list.layoutBackgroundBlur }}
-        {{ $shouldDisableBackgroundImage := or
-          (eq site.Params.homepage.layout "background")
-          (eq site.Params.article.heroStyle "background")
-          (eq site.Params.list.heroStyle "background")
-          (eq site.Params.taxonomy.heroStyle "background")
-          (eq site.Params.term.heroStyle "background")
-        }}
-        {{ if $shouldDisableBlur }}
-          {{ $toggles = $toggles | append (dict "id" (print $prefix "disable-blur") "label" (i18n "a11y.disable_blur")) }}
-        {{ end }}
-        {{ if $shouldDisableBackgroundImage }}
-          {{ $toggles = $toggles | append (dict "id" (print $prefix "disable-images") "label" (i18n "a11y.disable_images")) }}
-        {{ end }}
-        {{- $toggles = $toggles | append
-          (dict "id" (print $prefix "underline-links") "label" (i18n "a11y.show_link_underline"))
-          (dict "id" (print $prefix "zen-mode") "label" (i18n "article.zen_mode_title.enable"))
-        -}}
-
-        {{- range $toggles }}
-          <div class="flex items-center justify-between">
-            <label for="{{ .id }}" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
-              {{ .label }}
-            </label>
-            <div class="ios-toggle">
-              <input type="checkbox" id="{{ .id }}">
-            </div>
-          </div>
-        {{- end }}
-
-
-        <div class="flex items-center justify-between">
-          <label
-            for="{{ $prefix }}font-size-select"
-            class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
-            {{ i18n "a11y.font_size" }}
-          </label>
-          <select
-            id="{{ $prefix }}font-size-select"
-            class="border rounded-lg px-3 py-1.5 pr-8 text-neutral-900 text-sm dark:bg-neutral-700 dark:text-neutral-200 focus:ring-primary-500 focus:border-primary-500">
-            {{ $fontSizes := slice "default" "12px" "14px" "16px" "18px" "20px" "22px" "24px" }}
-            {{ range $fontSizes }}
-              <option value="{{ . }}">{{ . }}</option>
-            {{ end }}
-          </select>
-        </div>
-      </div>
-    </div>
-  </div>
-{{ end }}
-
-{{/* ========== Render HTML ========== */}}
-<div class="main-menu flex items-center w-full gap-2 p-1">
-  {{ template "HeaderLogo" . }}
   {{ if not .Site.Params.disableTextInHeader | default true }}
-    <a
-      href="{{ "" | relLangURL }}"
-      class="text-base font-medium truncate min-w-0 shrink">
+    <a href="{{ "" | relLangURL }}" class="text-base font-medium truncate min-w-0 shrink">
       {{ .Site.Title | markdownify }}
     </a>
   {{ end }}
   <div class="flex items-center ms-auto">
-    {{ template "HeaderDesktopNavigation" . }}
-    {{ template "HeaderMobileNavigation" . }}
+    <div class="hidden md:flex">
+      {{ partial "header/components/desktop-menu.html" . }}
+    </div>
+    <div class="flex md:hidden">
+      {{ partial "header/components/mobile-menu.html" . }}
+    </div>
   </div>
 </div>
 
@@ -275,15 +48,15 @@
           {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
             target="_blank"
           {{ end }}
-          class="flex items-center">
+          class="flex items-center bf-icon-color-hover">
           {{ if .Pre }}
             <span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
               {{ partial "icon.html" .Pre }}
             </span>
           {{ end }}
-          <p class="text-xs font-light" title="{{ .Title }}">
+          <span class="text-xs font-light" title="{{ .Title }}">
             {{ .Name | markdownify }}
-          </p>
+          </span>
         </a>
       {{ end }}
     </div>
@@ -293,10 +66,17 @@
 {{ if .Site.Params.highlightCurrentMenuArea }}
   <script>
     (function () {
-      var $mainmenu = $(".main-menu");
+      var mainmenu = document.querySelector(".main-menu");
+      if (!mainmenu) return;
+
       var path = window.location.pathname;
-      $mainmenu.find('a[href="' + path + '"]').each(function (i, e) {
-        $(e).children("p").addClass("active");
+      var links = mainmenu.querySelectorAll('a[href="' + path + '"]');
+
+      links.forEach(function (link) {
+        var targets = link.querySelectorAll("span");
+        targets.forEach(function (el) {
+          el.classList.add("active");
+        });
       });
     })();
   </script>
diff --git a/layouts/partials/header/components/a11y.html b/layouts/partials/header/components/a11y.html
new file mode 100644
index 00000000..85ec3779
--- /dev/null
+++ b/layouts/partials/header/components/a11y.html
@@ -0,0 +1,88 @@
+{{- $prefix := .prefix | default "" -}}
+<div class="flex items-center">
+  <button
+    id="{{ $prefix }}a11y-toggle"
+    aria-label="Open accessibility panel"
+    aria-expanded="false"
+    type="button"
+    class="bf-icon-color-hover"
+    role="button"
+    aria-pressed="false">
+    {{ partial "icon.html" "a11y" }}
+  </button>
+
+  <div id="{{ $prefix }}a11y-overlay" class="fixed inset-0 hidden" style="z-index:9999;"></div>
+
+  <div
+    id="{{ $prefix }}a11y-panel"
+    role="dialog"
+    aria-labelledby="{{ $prefix }}a11y-panel-title"
+    class="a11y-panel-enter fixed hidden p-6 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 rounded-lg shadow-xl bg-neutral-50 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700"
+    style="min-width: 20rem; z-index:9999;">
+    <div class="flex items-center justify-between mb-6">
+      <h3
+        id="{{ $prefix }}a11y-panel-title"
+        class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
+        {{ i18n "a11y.title" }}
+      </h3>
+      <button
+        id="{{ $prefix }}a11y-close"
+        class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
+        aria-label="Close a11y panel">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+
+    <div class="space-y-5">
+      {{ $toggles := slice }}
+      {{ $shouldDisableBlur := or site.Params.homepage.layoutBackgroundBlur site.Params.article.layoutBackgroundBlur site.Params.list.layoutBackgroundBlur }}
+      {{ $shouldDisableBackgroundImage := or
+        (eq site.Params.homepage.layout "background")
+        (eq site.Params.article.heroStyle "background")
+        (eq site.Params.list.heroStyle "background")
+        (eq site.Params.taxonomy.heroStyle "background")
+        (eq site.Params.term.heroStyle "background")
+      }}
+      {{ if $shouldDisableBlur }}
+        {{ $toggles = $toggles | append (dict "id" (print $prefix "disable-blur") "label" (i18n "a11y.disable_blur")) }}
+      {{ end }}
+      {{ if $shouldDisableBackgroundImage }}
+        {{ $toggles = $toggles | append (dict "id" (print $prefix "disable-images") "label" (i18n "a11y.disable_images")) }}
+      {{ end }}
+      {{- $toggles = $toggles | append
+        (dict "id" (print $prefix "underline-links") "label" (i18n "a11y.show_link_underline"))
+        (dict "id" (print $prefix "zen-mode") "label" (i18n "article.zen_mode_title.enable"))
+      -}}
+
+      {{- range $toggles }}
+        <div class="flex items-center justify-between">
+          <label for="{{ .id }}" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+            {{ .label }}
+          </label>
+          <div class="ios-toggle">
+            <input type="checkbox" id="{{ .id }}">
+          </div>
+        </div>
+      {{- end }}
+
+
+      <div class="flex items-center justify-between">
+        <label
+          for="{{ $prefix }}font-size-select"
+          class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+          {{ i18n "a11y.font_size" }}
+        </label>
+        <select
+          id="{{ $prefix }}font-size-select"
+          class="border rounded-lg px-3 py-1.5 pr-8 text-neutral-900 text-sm dark:bg-neutral-700 dark:text-neutral-200 focus:ring-primary-500 focus:border-primary-500">
+          {{ $fontSizes := slice "default" "12px" "14px" "16px" "18px" "20px" "22px" "24px" }}
+          {{ range $fontSizes }}
+            <option value="{{ . }}">{{ . }}</option>
+          {{ end }}
+        </select>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/layouts/partials/header/components/desktop-menu.html b/layouts/partials/header/components/desktop-menu.html
new file mode 100644
index 00000000..54602580
--- /dev/null
+++ b/layouts/partials/header/components/desktop-menu.html
@@ -0,0 +1,116 @@
+<nav class="flex items-center gap-x-5 h-12">
+  {{ if .Site.Menus.main }}
+    {{ range .Site.Menus.main }}
+      {{ template "DesktopMenu" . }}
+    {{ end }}
+  {{ end }}
+
+  {{ partial "header/components/translations.html" . }}
+  {{ if .Site.Params.enableA11y | default false }}
+    {{ partial "header/components/a11y.html" (dict "prefix" "desktop-") }}
+  {{ end }}
+
+  {{ if .Site.Params.enableSearch | default false }}
+    <button
+      id="search-button"
+      aria-label="Search"
+      class="text-base bf-icon-color-hover"
+      title="{{ i18n "search.open_button_title" }}">
+      {{ partial "icon.html" "search" }}
+    </button>
+  {{ end }}
+
+  {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
+    <div class="flex items-center">
+      <button
+        id="appearance-switcher"
+        aria-label="Dark mode switcher"
+        type="button"
+        class="text-base bf-icon-color-hover">
+        <div class="flex items-center justify-center dark:hidden">
+          {{ partial "icon.html" "moon" }}
+        </div>
+        <div class="items-center justify-center hidden dark:flex">
+          {{ partial "icon.html" "sun" }}
+        </div>
+      </button>
+    </div>
+  {{ end }}
+</nav>
+
+{{ define "DesktopMenu" }}
+  {{ if .HasChildren }}
+    <div class="nested-menu">
+      <div class="cursor-pointer flex items-center">
+        <a
+          {{ if .URL }}
+            href="{{ .URL }}"
+            {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
+              target="_blank"
+            {{ end }}
+          {{ else }}
+            tabindex="0"
+          {{ end }}
+          {{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
+          class="flex items-center text-base font-medium bf-icon-color-hover"
+          title="{{ .Title }}">
+          {{ if .Pre }}
+            <span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
+              {{ partial "icon.html" .Pre }}
+            </span>
+          {{ end }}
+          <span class="text-bg font-bg break-normal" title="{{ .Title }}">
+            {{ .Name | markdownify }}
+          </span>
+          <span>
+            {{ partial "icon.html" "chevron-down" }}
+          </span>
+        </a>
+      </div>
+      <div class="menuhide">
+        <div class="pt-2 p-5 mt-2 rounded-xl backdrop-blur shadow-2xl">
+          <div class="flex flex-col space-y-3">
+            {{ range .Children }}
+              <a
+                href="{{ .URL }}"
+                {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
+                  target="_blank"
+                {{ end }}
+                {{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
+                class="flex items-center bf-icon-color-hover">
+                {{ if .Pre }}
+                  <span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
+                    {{ partial "icon.html" .Pre }}
+                  </span>
+                {{ end }}
+                <span class="text-sm font-sm" title="{{ .Title }}">
+                  {{ .Name | markdownify }}
+                </span>
+              </a>
+            {{ end }}
+          </div>
+        </div>
+      </div>
+    </div>
+  {{ else }}
+    <a
+      href="{{ .URL }}"
+      {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
+        target="_blank"
+      {{ end }}
+      class="flex items-center bf-icon-color-hover"
+      {{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
+      title="{{ .Title }}">
+      {{ if .Pre }}
+        <span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
+          {{ partial "icon.html" .Pre }}
+        </span>
+      {{ end }}
+      {{ if .Name }}
+        <span class="text-base font-medium break-normal">
+          {{ .Name | markdownify }}
+        </span>
+      {{ end }}
+    </a>
+  {{ end }}
+{{ end }}
diff --git a/layouts/partials/header/components/mobile-menu.html b/layouts/partials/header/components/mobile-menu.html
new file mode 100644
index 00000000..7a644dbb
--- /dev/null
+++ b/layouts/partials/header/components/mobile-menu.html
@@ -0,0 +1,152 @@
+<div class="flex items-center h-14 gap-4">
+  {{ if .Site.Params.enableSearch | default false }}
+    <button
+      id="search-button-mobile"
+      aria-label="Search"
+      class="flex items-center justify-center bf-icon-color-hover"
+      title="{{ i18n "search.open_button_title" }}">
+      {{ partial "icon.html" "search" }}
+    </button>
+  {{ end }}
+
+  {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
+    <button
+      id="appearance-switcher-mobile"
+      type="button"
+      aria-label="Dark mode switcher"
+      class="flex items-center justify-center text-neutral-900 hover:text-primary-600 dark:text-neutral-200 dark:hover:text-primary-400">
+      <div class="dark:hidden">
+        {{ partial "icon.html" "moon" }}
+      </div>
+      <div class="hidden dark:block">
+        {{ partial "icon.html" "sun" }}
+      </div>
+    </button>
+  {{ end }}
+
+  {{ if or
+    .Site.Menus.main
+    .Site.Menus.subnavigation
+    .Site.Params.enableA11y
+  }}
+    <input type="checkbox" id="mobile-menu-toggle" autocomplete="off" class="hidden peer">
+    <label for="mobile-menu-toggle" class="flex items-center justify-center cursor-pointer bf-icon-color-hover">
+      {{ partial "icon.html" "bars" }}
+    </label>
+
+    <div
+      role="dialog"
+      aria-modal="true"
+      style="scrollbar-gutter: stable;"
+      class="fixed inset-0 z-50 invisible overflow-y-auto px-6 py-20 opacity-0 transition-[opacity,visibility] duration-300 peer-checked:visible peer-checked:opacity-100 bg-neutral-50/97 dark:bg-neutral-900/99
+      {{ if site.Params.enableStyledScrollbar | default true }}bf-scrollbar{{ end }}">
+      <label
+        for="mobile-menu-toggle"
+        class="fixed end-8 top-5 flex items-center justify-center z-50 h-12 w-12 cursor-pointer select-none rounded-full bf-icon-color-hover border bf-border-color bf-border-color-hover bg-neutral-50 dark:bg-neutral-900">
+        {{ partial "icon.html" "xmark" }}
+      </label>
+      <nav class="mx-auto max-w-md space-y-6">
+        {{ template "mobile-main-menu" . }}
+        {{ template "mobile-subnavigation" . }}
+        {{ template "mobile-footer-components" . }}
+      </nav>
+    </div>
+  {{ end }}
+</div>
+
+{{ define "mobile-main-menu" }}
+  {{ range .Site.Menus.main }}
+    {{ $submenuId := printf "fullscreen-submenu-%s" (.Identifier | default .Name | anchorize) }}
+    <div class="px-2">
+      <a
+        href="{{ .URL }}"
+        {{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
+        {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
+          target="_blank"
+        {{ end }}
+        class="flex items-center gap-4 group bf-icon-color-hover text-neutral-700 dark:text-neutral-200">
+        {{ if .Pre }}
+          <span class="flex items-center justify-center h-8 w-8 text-2xl">
+            {{ partial "icon.html" .Pre }}
+          </span>
+        {{ end }}
+        <span title="{{ .Title }}" class="text-2xl font-bold tracking-tight">
+          {{ .Name | markdownify }}
+        </span>
+        {{ if .HasChildren }}
+          <label
+            for="{{ $submenuId }}"
+            class="ms-auto flex items-center justify-center h-10 w-10 cursor-pointer rounded-lg bf-icon-color-hover border bf-border-color bf-border-color-hover">
+            {{ partial "icon.html" "chevron-down" }}
+          </label>
+        {{ end }}
+      </a>
+
+      {{ if .HasChildren }}
+        <input checked type="checkbox" id="{{ $submenuId }}" autocomplete="off" class="hidden peer/full">
+
+        <div
+          class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 peer-checked/full:grid-rows-[1fr]">
+          <div class="overflow-hidden">
+            <div class="ms-7 mt-4">
+              {{ range .Children }}
+                <a
+                  href="{{ .URL }}"
+                  {{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
+                  {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
+                    target="_blank"
+                  {{ end }}
+                  class="flex items-center gap-3 p-2 group bf-icon-color-hover text-neutral-700 dark:text-neutral-200">
+                  {{ if .Pre }}
+                    <span class="flex items-center justify-center h-5 w-5">
+                      {{ partial "icon.html" .Pre }}
+                    </span>
+                  {{ end }}
+                  <span title="{{ .Title }}" class="text-lg">
+                    {{ .Name | markdownify }}
+                  </span>
+                </a>
+              {{ end }}
+            </div>
+          </div>
+        </div>
+      {{ end }}
+    </div>
+  {{ end }}
+{{ end }}
+
+{{ define "mobile-subnavigation" }}
+  {{ if .Site.Menus.subnavigation }}
+    <div class="flex flex-wrap gap-4 mt-8 pt-8 border-t bf-border-color">
+      {{ range .Site.Menus.subnavigation }}
+        <a
+          href="{{ .URL }}"
+          {{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
+          class="inline-flex items-center gap-2 px-2 py-2 bf-icon-color-hover rounded-full text-sm">
+          {{ if .Pre }}
+            <span class="flex items-center justify-center h-4 w-4">
+              {{ partial "icon.html" .Pre }}
+            </span>
+          {{ end }}
+          <span title="{{ .Title }}">{{ .Name | markdownify }}</span>
+        </a>
+      {{ end }}
+    </div>
+  {{ end }}
+{{ end }}
+
+{{ define "mobile-footer-components" }}
+  {{ if or
+    hugo.IsMultilingual
+    .Site.Params.enableA11y
+  }}
+    <div
+      class="flex flex-wrap items-center [&_span]:text-2xl [&_.translation_button_.icon]:text-4xl! [&_.translation_button_span]:text-base! [&_.translation_.menuhide_span]:text-sm! gap-x-6 ps-2 mt-8 pt-8 border-t bf-border-color">
+      {{ partial "header/components/translations.html" . }}
+
+      {{ if .Site.Params.enableA11y | default false }}
+        {{ partial "header/components/a11y.html" (dict "prefix" "mobile-menu-") }}
+      {{ end }}
+    </div>
+  {{ end }}
+{{ end }}
diff --git a/layouts/partials/header/components/translations.html b/layouts/partials/header/components/translations.html
new file mode 100644
index 00000000..c0a24d9f
--- /dev/null
+++ b/layouts/partials/header/components/translations.html
@@ -0,0 +1,23 @@
+{{ if .IsTranslated }}
+  <div class="translation nested-menu">
+    <button class="cursor-pointer flex items-center">
+      <span class="me-1">
+        {{ partial "icon.html" "language" }}
+      </span>
+      <span class="text-sm font-medium bf-icon-color-hover" title="{{ .Title }}">
+        {{- i18n "global.language" | markdownify -}}
+      </span>
+    </button>
+    <ul class="menuhide">
+      <li class="rounded-xl backdrop-blur shadow-2xl p-2 flex flex-col gap-1">
+        {{ range .AllTranslations }}
+          <a href="{{ .RelPermalink }}" class="flex items-center bf-icon-color-hover px-3 py-1">
+            <span class="text-sm font-sm" title="{{ .Title }}">
+              {{ .Language.Params.displayName | emojify }}
+            </span>
+          </a>
+        {{ end }}
+      </li>
+    </ul>
+  </div>
+{{ end }}
diff --git a/layouts/partials/header/header-mobile-option-nested.html b/layouts/partials/header/header-mobile-option-nested.html
deleted file mode 100644
index 3614e496..00000000
--- a/layouts/partials/header/header-mobile-option-nested.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<li class="mt-1">
-  <a
-    href="{{ .URL }}"
-    {{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
-    class="flex items-center hover:text-primary-600 dark:hover:text-primary-400">
-    {{ if .Pre }}
-      <span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
-        {{ partial "icon.html" .Pre }}
-      </span>
-    {{ end }}
-    <p class="text-bg font-bg" title="{{ .Title }}">
-      {{ .Name | markdownify }}
-    </p>
-    <span>
-      {{ partial "icon.html" "chevron-down" }}
-    </span>
-  </a>
-</li>
-{{ range .Children }}
-  <li class="mt-1">
-    <a
-      href="{{ .URL }}"
-      {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
-        )
-      }}
-        target="_blank"
-      {{ end }}
-      {{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
-      class="flex items-center hover:text-primary-600 dark:hover:text-primary-400">
-      {{ if .Pre }}
-        <span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
-          {{ partial "icon.html" .Pre }}
-        </span>
-      {{ end }}
-      <p class="text-sm font-small" title="{{ .Title }}">
-        {{ .Name | markdownify }}
-      </p>
-    </a>
-  </li>
-{{ end }}
-<li class="mb-2"></li>
diff --git a/layouts/partials/header/header-mobile-option-simple.html b/layouts/partials/header/header-mobile-option-simple.html
deleted file mode 100644
index ff6cdab5..00000000
--- a/layouts/partials/header/header-mobile-option-simple.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<li class="mt-1">
-  <a
-    href="{{ .URL }}"
-    {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
-      )
-    }}
-      target="_blank"
-    {{ end }}
-    class="flex items-center hover:text-primary-600 dark:hover:text-primary-400"
-    {{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
-    title="{{ .Title }}">
-    {{ if .Pre }}
-      <div {{ if and .Pre .Name }}class="mr-2"{{ end }}>
-        {{ partial "icon.html" .Pre }}
-      </div>
-    {{ end }}
-    {{ if .Name }}
-      <p class="text-bg font-bg">
-        {{ .Name | markdownify }}
-      </p>
-    {{ end }}
-  </a>
-</li>
diff --git a/layouts/partials/header/header-mobile-option.html b/layouts/partials/header/header-mobile-option.html
deleted file mode 100644
index ab37b369..00000000
--- a/layouts/partials/header/header-mobile-option.html
+++ /dev/null
@@ -1,5 +0,0 @@
-{{ if .HasChildren }}
-  {{ partial "header/header-mobile-option-nested.html" . }}
-{{ else }}
-  {{ partial "header/header-mobile-option-simple.html" . }}
-{{ end }}
diff --git a/layouts/partials/header/header-option-nested.html b/layouts/partials/header/header-option-nested.html
deleted file mode 100644
index b1d7ad7b..00000000
--- a/layouts/partials/header/header-option-nested.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<div>
-  <div class="cursor-pointer flex items-center nested-menu">
-    {{ if .Pre }}
-      <span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
-        {{ partial "icon.html" .Pre }}
-      </span>
-    {{ end }}
-    <a
-      {{ if .URL }}
-        href="{{ .URL }}"
-        {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
-          target="_blank"
-        {{ end }}
-      {{ end }}
-      {{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
-      class="text-base font-medium hover:text-primary-600 dark:hover:text-primary-400"
-      title="{{ .Title }}">
-      <p class="break-normal">
-        {{ .Name | markdownify }}
-      </p>
-    </a>
-    <span>
-      {{ partial "icon.html" "chevron-down" }}
-    </span>
-  </div>
-  <div class="absolute menuhide">
-    <div class="pt-2 p-5 mt-2 rounded-xl backdrop-blur shadow-2xl">
-      <div class="flex flex-col space-y-3">
-        {{ range .Children }}
-          <a
-            href="{{ .URL }}"
-            {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
-              target="_blank"
-            {{ end }}
-            {{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
-            class="flex items-center hover:text-primary-600 dark:hover:text-primary-400">
-            {{ if .Pre }}
-              <span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
-                {{ partial "icon.html" .Pre }}
-              </span>
-            {{ end }}
-            <p class="text-sm font-sm" title="{{ .Title }}">
-              {{ .Name | markdownify }}
-            </p>
-          </a>
-        {{ end }}
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/layouts/partials/header/header-option-simple.html b/layouts/partials/header/header-option-simple.html
deleted file mode 100644
index ccd60b1e..00000000
--- a/layouts/partials/header/header-option-simple.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<a
-  href="{{ .URL }}"
-  {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}target="_blank"{{ end }}
-  class="flex items-center hover:text-primary-600 dark:hover:text-primary-400"
-  {{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
-  title="{{ .Title }}">
-  {{ if .Pre }}
-    <span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
-      {{ partial "icon.html" .Pre }}
-    </span>
-  {{ end }}
-  {{ if .Name }}
-    <p class="text-base font-medium break-normal">
-      {{ .Name | markdownify }}
-    </p>
-  {{ end }}
-</a>
diff --git a/layouts/partials/header/header-option.html b/layouts/partials/header/header-option.html
deleted file mode 100644
index 73cc1b77..00000000
--- a/layouts/partials/header/header-option.html
+++ /dev/null
@@ -1,5 +0,0 @@
-{{ if .HasChildren }}
-  {{ partial "header/header-option-nested.html" . }}
-{{ else }}
-  {{ partial "header/header-option-simple.html" . }}
-{{ end }}
diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
index 316d764d..3d55fc1f 100644
--- a/layouts/partials/toc.html
+++ b/layouts/partials/toc.html
@@ -1,7 +1,7 @@
 <details
   open
   id="TOCView"
-  class="toc-right mt-0 overflow-y-auto overscroll-contain scrollbar-thin scrollbar-track-neutral-200 scrollbar-thumb-neutral-400 dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600 rounded-lg -ms-5 ps-5 pe-2 hidden lg:block">
+  class="toc-right mt-0 overflow-y-auto overscroll-contain bf-scrollbar rounded-lg -ms-5 ps-5 pe-2 hidden lg:block">
   <summary
     class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 -ms-5 ps-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">
     {{ i18n "article.table_of_contents" }}
diff --git a/layouts/partials/translations.html b/layouts/partials/translations.html
deleted file mode 100644
index 77236524..00000000
--- a/layouts/partials/translations.html
+++ /dev/null
@@ -1,29 +0,0 @@
-{{ if .IsTranslated }}
-  <div>
-    <div class="cursor-pointer flex items-center nested-menu">
-      <span class="me-1">
-        {{ partial "icon.html" "language" }}
-      </span>
-      <div
-        class="text-sm font-medium hover:text-primary-600 dark:hover:text-primary-400"
-        title="{{ .Title }}">
-        {{- i18n "global.language" | markdownify -}}
-      </div>
-    </div>
-    <div class="absolute menuhide">
-      <div class="pt-2 p-5 mt-2 rounded-xl backdrop-blur shadow-2xl">
-        <div class="flex flex-col space-y-3">
-          {{ range .AllTranslations }}
-            <a href="{{ .RelPermalink }}" class="flex items-center">
-              <p
-                class="text-sm font-sm hover:text-primary-600 dark:hover:text-primary-400"
-                title="{{ .Title }}">
-                {{ .Language.Params.displayName | emojify }}
-              </p>
-            </a>
-          {{ end }}
-        </div>
-      </div>
-    </div>
-  </div>
-{{ end }}

From 230ee3ab161a8816a840fb63d0ca8f65f8ff2885 Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Sat, 27 Dec 2025 15:05:25 +0800
Subject: [PATCH 3/4] feat: improve fixed-fill-blur

The original appearance is identical to `fixed-fill`
---
 assets/css/compiled/main.css                 | 65 ++++++++++++++++++++
 layouts/partials/header/fixed-fill-blur.html |  4 +-
 2 files changed, 67 insertions(+), 2 deletions(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index ea544d32..d5cf9dc7 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1709,6 +1709,12 @@
   .bg-primary-200 {
     background-color: rgba(var(--color-primary-200), 1);
   }
+  .bg-primary-200\/50 {
+    background-color: color-mix(in srgb, rgba(rgba(var(--color-primary-200), 1), 1) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, rgba(var(--color-primary-200), 1) 50%, transparent);
+    }
+  }
   .bg-primary-500 {
     background-color: rgba(var(--color-primary-500), 1);
   }
@@ -1721,6 +1727,13 @@
   .bg-white {
     background-color: #fff;
   }
+  .bg-linear-65 {
+    --tw-gradient-position: 65deg;
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      --tw-gradient-position: 65deg in oklab;
+    }
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
   .bg-gradient-to-b {
     --tw-gradient-position: to bottom in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -2241,6 +2254,16 @@
     -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
+  .backdrop-brightness-112 {
+    --tw-backdrop-brightness: brightness(112%);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .backdrop-saturate-220 {
+    --tw-backdrop-saturate: saturate(220%);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3244,18 +3267,46 @@
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
   }
+  .dark\:from-neutral-900\/88 {
+    &:is(.dark *) {
+      --tw-gradient-from: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 88%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-gradient-from: color-mix(in oklab, rgba(var(--color-neutral-900), 1) 88%, transparent);
+      }
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+  }
   .dark\:from-primary-600 {
     &:is(.dark *) {
       --tw-gradient-from: rgba(var(--color-primary-600), 1);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
   }
+  .dark\:via-neutral-800\/72 {
+    &:is(.dark *) {
+      --tw-gradient-via: color-mix(in srgb, rgba(rgba(var(--color-neutral-800), 1), 1) 72%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-gradient-via: color-mix(in oklab, rgba(var(--color-neutral-800), 1) 72%, transparent);
+      }
+      --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
+      --tw-gradient-stops: var(--tw-gradient-via-stops);
+    }
+  }
   .dark\:to-neutral-800 {
     &:is(.dark *) {
       --tw-gradient-to: rgba(var(--color-neutral-800), 1);
       --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
     }
   }
+  .dark\:to-neutral-900\/55 {
+    &:is(.dark *) {
+      --tw-gradient-to: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 55%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-gradient-to: color-mix(in oklab, rgba(var(--color-neutral-900), 1) 55%, transparent);
+      }
+      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+    }
+  }
   .dark\:to-secondary-800 {
     &:is(.dark *) {
       --tw-gradient-to: rgba(var(--color-secondary-800), 1);
@@ -3322,6 +3373,20 @@
       opacity: 60%;
     }
   }
+  .dark\:backdrop-brightness-95 {
+    &:is(.dark *) {
+      --tw-backdrop-brightness: brightness(95%);
+      -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+      backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    }
+  }
+  .dark\:backdrop-saturate-180 {
+    &:is(.dark *) {
+      --tw-backdrop-saturate: saturate(180%);
+      -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+      backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    }
+  }
   .dark\:hover\:\!bg-primary-700 {
     &:is(.dark *) {
       &:hover {
diff --git a/layouts/partials/header/fixed-fill-blur.html b/layouts/partials/header/fixed-fill-blur.html
index 5bf8aa10..318e6d00 100644
--- a/layouts/partials/header/fixed-fill-blur.html
+++ b/layouts/partials/header/fixed-fill-blur.html
@@ -2,7 +2,7 @@
 <div class="fixed inset-x-0 z-100">
   <div
     id="menu-blur"
-    class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom bg-neutral dark:bg-neutral-800"></div>
+    class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl backdrop-saturate-220 backdrop-brightness-112 dark:backdrop-saturate-180 dark:backdrop-brightness-95 bg-primary-200/50 bg-linear-65 dark:from-neutral-900/88 dark:via-neutral-800/72 dark:to-neutral-900/55 shadow-xl"></div>
   <div class="relative m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32">
     {{ partial "header/basic.html" . }}
   </div>
@@ -13,4 +13,4 @@
   type="text/javascript"
   src="{{ $backgroundBlur.RelPermalink }}"
   integrity="{{ $backgroundBlur.Data.Integrity }}"
-  data-blur-id="menu-blur"></script>
+  data-blur-id="menu-blur"></script>
\ No newline at end of file

From c78b3a1e6a6683b10c4b268f65da108438926654 Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Sat, 27 Dec 2025 15:05:27 +0800
Subject: [PATCH 4/4] fix: menu unreadable (#1790)

---
 assets/css/compiled/main.css                       | 14 ++++++++++++++
 .../partials/header/components/desktop-menu.html   |  2 +-
 layouts/partials/header/fixed.html                 |  2 +-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index d5cf9dc7..1344c480 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1697,6 +1697,12 @@
       background-color: color-mix(in oklab, rgba(var(--color-neutral-500), 1) 50%, transparent);
     }
   }
+  .bg-neutral\/25 {
+    background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral), 1), 1) 25%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, rgba(var(--color-neutral), 1) 25%, transparent);
+    }
+  }
   .bg-neutral\/50 {
     background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral), 1), 1) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3204,6 +3210,14 @@
       background-color: rgba(var(--color-neutral-800), 1);
     }
   }
+  .dark\:bg-neutral-800\/25 {
+    &:is(.dark *) {
+      background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-800), 1), 1) 25%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, rgba(var(--color-neutral-800), 1) 25%, transparent);
+      }
+    }
+  }
   .dark\:bg-neutral-800\/50 {
     &:is(.dark *) {
       background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-800), 1), 1) 50%, transparent);
diff --git a/layouts/partials/header/components/desktop-menu.html b/layouts/partials/header/components/desktop-menu.html
index 54602580..2ae3c0ef 100644
--- a/layouts/partials/header/components/desktop-menu.html
+++ b/layouts/partials/header/components/desktop-menu.html
@@ -68,7 +68,7 @@
         </a>
       </div>
       <div class="menuhide">
-        <div class="pt-2 p-5 mt-2 rounded-xl backdrop-blur shadow-2xl">
+        <div class="pt-2 p-5 mt-2 rounded-xl backdrop-blur shadow-2xl bg-neutral/25 dark:bg-neutral-800/25">
           <div class="flex flex-col space-y-3">
             {{ range .Children }}
               <a
diff --git a/layouts/partials/header/fixed.html b/layouts/partials/header/fixed.html
index 25ebabe2..bad68611 100644
--- a/layouts/partials/header/fixed.html
+++ b/layouts/partials/header/fixed.html
@@ -2,7 +2,7 @@
 <div class="fixed inset-x-0 z-100">
   <div
     id="menu-blur"
-    class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl shadow-2xl"></div>
+    class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl shadow-2xl bg-neutral/25 dark:bg-neutral-800/25"></div>
   <div class="relative m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32">
     {{ partial "header/basic.html" . }}
   </div>