优化移动端

src/styles/site/02-navigation.css

@@ -56,6 +56,10 @@
   display: contents;
 }
 
+.nav-drawer-backdrop {
+  display: none;
+}
+
 .nav-menu-toggle {
   position: relative;
   z-index: 1;

src/styles/site/13-responsive.css

@@ -87,11 +87,13 @@
     align-items: center;
     gap: 0 10px;
     border-radius: 24px;
+    overflow: visible;
   }
 
   .nav-menu-toggle {
     display: grid;
     justify-self: end;
+    z-index: 3;
   }
 
   .nav.is-open .nav-menu-open,
@@ -103,17 +105,65 @@
     display: inline-block;
   }
 
+  .has-nav-drawer {
+    overflow: hidden;
+  }
+
+  .nav-drawer-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1;
+    display: block;
+    opacity: 0;
+    pointer-events: none;
+    background: rgba(28, 37, 42, 0.22);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+    transition: opacity 0.2s ease;
+  }
+
+  .nav.is-open .nav-drawer-backdrop {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
   .nav-menu {
-    display: none;
-    grid-column: 1 / -1;
-    gap: 8px;
-    margin-top: 10px;
-    border-top: 1px solid rgba(255, 255, 255, 0.46);
-    padding-top: 10px;
+    position: fixed;
+    top: calc(env(safe-area-inset-top, 0px) + 72px);
+    right: max(12px, var(--page-gutter));
+    z-index: 2;
+    display: grid;
+    width: min(312px, calc(100vw - 32px));
+    max-height: calc(100dvh - 92px);
+    align-content: start;
+    gap: 10px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border: 1px solid rgba(255, 255, 255, 0.62);
+    border-radius: 22px;
+    padding: 14px;
+    background:
+      radial-gradient(circle at 82% 0%, rgba(255, 255, 255, 0.78), transparent 34%),
+      linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(226, 248, 241, 0.7)),
+      rgba(255, 253, 248, 0.92);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.82),
+      0 22px 64px rgba(44, 55, 63, 0.24);
+    backdrop-filter: blur(22px) saturate(170%);
+    -webkit-backdrop-filter: blur(22px) saturate(170%);
+    opacity: 0;
+    pointer-events: none;
+    transform: translateX(calc(100% + 24px)) scale(0.98);
+    transform-origin: top right;
+    transition:
+      opacity 0.18s ease,
+      transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
   }
 
   .nav.is-open .nav-menu {
-    display: grid;
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateX(0) scale(1);
   }
 
   .nav-links {
@@ -128,11 +178,11 @@
   }
 
   .nav-center {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: 1fr;
   }
 
   .nav-actions {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   .nav-links a,
@@ -142,6 +192,33 @@
   .theme-toggle {
     width: 100%;
     justify-content: center;
+    min-height: 42px;
+    border-color: rgba(15, 118, 110, 0.1);
+    background: rgba(255, 255, 255, 0.42);
+  }
+
+  :root[data-theme='dark'] .nav-drawer-backdrop {
+    background: rgba(3, 10, 12, 0.36);
+  }
+
+  :root[data-theme='dark'] .nav-menu {
+    border-color: rgba(166, 184, 194, 0.2);
+    background:
+      radial-gradient(circle at 82% 0%, rgba(125, 211, 199, 0.16), transparent 36%),
+      linear-gradient(145deg, rgba(25, 35, 42, 0.94), rgba(10, 15, 20, 0.82)),
+      rgba(10, 15, 20, 0.88);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.1),
+      0 22px 64px rgba(0, 0, 0, 0.46);
+  }
+
+  :root[data-theme='dark'] .nav-links a,
+  :root[data-theme='dark'] .nav-random,
+  :root[data-theme='dark'] .nav-search,
+  :root[data-theme='dark'] .nav-console,
+  :root[data-theme='dark'] .theme-toggle {
+    border-color: rgba(125, 211, 199, 0.16);
+    background: rgba(125, 211, 199, 0.08);
   }
 
   .control-console {

src/styles/site/14-animations.css

@@ -89,7 +89,9 @@
   }
 
   .random-post-transition,
-  .random-post-transition-card {
+  .random-post-transition-card,
+  .nav-drawer-backdrop,
+  .nav-menu {
     transition: none;
   }
 }