.

LOG.md

@@ -9,6 +9,7 @@
 - Softened the Dock button palette to quieter pastel tones and made the light-mode Dock bar read as a cleaner white glass surface.
 - Fixed the Dock pin toggle so mouse-based unpinning no longer leaves button focus holding the Dock open, and changed the Dock Home button to a white neutral tone.
 - Reworked the Dock material away from cute pastel tiles into a more macOS-like neutral frosted glass texture with translucent white glass buttons.
+- Corrected the Dock button direction so only Home stays white, while the other actions keep subtle pastel tints with a translucent macOS-style glass material.
 - Rebalanced the home page around latest posts with popular posts as a supporting panel, converted the post detail page into a quieter reader surface, and hardened Markdown/code/table wrapping against mobile overflow.
 - Added a client-side archive explorer with year, month, category, and compact/comfort density controls over the existing server-fetched post list.
 - Rebuilt the chess page with safer viewport-aware board sizing, quieter puzzle panels, and enough layout clearance for the Dock.
@@ -18,6 +19,7 @@
 - Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on `http://localhost:3106/` confirmed the light-mode Dock bar renders as a cleaner white glass surface and the Dock button colors use quieter pastel tones.
 - Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on `http://localhost:3107/` confirmed the Dock Home button renders white and mouse-based unpinning collapses the Dock after the pointer leaves.
 - Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on `http://localhost:3108/` confirmed the Dock uses neutral translucent glass material, with non-home buttons rendering as subtle white glass rather than pastel color tiles.
+- Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on `http://localhost:3109/` confirmed Home stays white while the other Dock buttons keep pastel-tinted translucent glass backgrounds with button-level blur.
 - Recommended next task: run a browser pass against a reachable backend API, especially one real post detail route and the populated chess puzzle board, then tune any remaining content-specific long-title or board-height edge cases.
 
 ## 2026-05-29

src/components/layout/DesktopDock.tsx

@@ -100,16 +100,16 @@ const homeDockTone = createDockTone(
 
 const dockToneStyles: Record<string, DockToneStyle> = {
   home: homeDockTone,
-  archive: dockGlassTone,
+  archive: createDockTone('rgba(222, 216, 255, 0.34)', 'rgba(222, 216, 255, 0.48)', 'rgba(222, 216, 255, 0.58)', 'rgba(255, 255, 255, 0.2)', 'rgba(151, 132, 214, 0.3)', '#6f668f', '#514274', 'rgba(151, 132, 214, 0.18)'),
-  chess: dockGlassTone,
+  chess: createDockTone('rgba(255, 229, 162, 0.34)', 'rgba(255, 229, 162, 0.48)', 'rgba(255, 229, 162, 0.58)', 'rgba(255, 255, 255, 0.22)', 'rgba(184, 134, 42, 0.3)', '#7b6d4a', '#665125', 'rgba(184, 134, 42, 0.17)'),
-  admin: dockGlassTone,
+  admin: createDockTone('rgba(192, 226, 255, 0.34)', 'rgba(192, 226, 255, 0.48)', 'rgba(192, 226, 255, 0.58)', 'rgba(255, 255, 255, 0.21)', 'rgba(81, 145, 195, 0.3)', '#627f96', '#3f6686', 'rgba(81, 145, 195, 0.17)'),
-  write: dockGlassTone,
+  write: createDockTone('rgba(255, 209, 184, 0.34)', 'rgba(255, 209, 184, 0.48)', 'rgba(255, 209, 184, 0.58)', 'rgba(255, 255, 255, 0.22)', 'rgba(187, 106, 70, 0.3)', '#8c705f', '#724d38', 'rgba(187, 106, 70, 0.17)'),
-  login: dockGlassTone,
+  login: createDockTone('rgba(190, 236, 238, 0.34)', 'rgba(190, 236, 238, 0.48)', 'rgba(190, 236, 238, 0.58)', 'rgba(255, 255, 255, 0.21)', 'rgba(68, 150, 158, 0.3)', '#63898c', '#446d72', 'rgba(68, 150, 158, 0.17)'),
-  signup: dockGlassTone,
+  signup: createDockTone('rgba(237, 207, 250, 0.34)', 'rgba(237, 207, 250, 0.48)', 'rgba(237, 207, 250, 0.58)', 'rgba(255, 255, 255, 0.21)', 'rgba(153, 91, 176, 0.3)', '#846c8e', '#684a78', 'rgba(153, 91, 176, 0.17)'),
-  logout: dockGlassTone,
+  logout: createDockTone('rgba(255, 207, 216, 0.34)', 'rgba(255, 207, 216, 0.48)', 'rgba(255, 207, 216, 0.58)', 'rgba(255, 255, 255, 0.22)', 'rgba(188, 84, 99, 0.3)', '#8f6970', '#714850', 'rgba(188, 84, 99, 0.17)'),
-  pin: dockGlassTone,
+  pin: createDockTone('rgba(255, 219, 170, 0.36)', 'rgba(255, 219, 170, 0.5)', 'rgba(255, 219, 170, 0.6)', 'rgba(255, 255, 255, 0.22)', 'rgba(184, 118, 44, 0.32)', '#8a704e', '#6b4f2d', 'rgba(184, 118, 44, 0.18)'),
-  menu: dockGlassTone,
+  menu: createDockTone('rgba(213, 234, 203, 0.34)', 'rgba(213, 234, 203, 0.48)', 'rgba(213, 234, 203, 0.58)', 'rgba(255, 255, 255, 0.21)', 'rgba(98, 143, 80, 0.3)', '#6f8366', '#526f44', 'rgba(98, 143, 80, 0.17)'),
-  more: dockGlassTone,
+  more: createDockTone('rgba(210, 228, 255, 0.34)', 'rgba(210, 228, 255, 0.48)', 'rgba(210, 228, 255, 0.58)', 'rgba(255, 255, 255, 0.21)', 'rgba(86, 126, 183, 0.3)', '#6d7f98', '#4f688d', 'rgba(86, 126, 183, 0.17)'),
   default: dockGlassTone,
 };
 
@@ -361,7 +361,7 @@ export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: De
     const active = item.isActive?.(pathname) ?? false;
     const toneStyle = getDockToneStyle(item.key);
     const itemClass = clsx(
-      'group/item relative flex h-12 w-12 items-center justify-center rounded-lg border border-[var(--dock-item-border)] bg-[var(--dock-item-bg)] text-[var(--dock-item-fg)] shadow-[var(--shadow-control)] transition duration-150 hover:-translate-y-1 hover:border-[var(--dock-item-border-hover)] hover:bg-[var(--dock-item-bg-hover)] hover:text-[var(--dock-item-fg-strong)] focus-visible:-translate-y-1',
+      'group/item relative flex h-12 w-12 items-center justify-center rounded-lg border border-[var(--dock-item-border)] bg-[var(--dock-item-bg)] text-[var(--dock-item-fg)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition duration-150 hover:-translate-y-1 hover:border-[var(--dock-item-border-hover)] hover:bg-[var(--dock-item-bg-hover)] hover:text-[var(--dock-item-fg-strong)] focus-visible:-translate-y-1',
       active && 'border-[var(--dock-item-border-hover)] bg-[var(--dock-item-bg-active)] text-[var(--dock-item-fg-strong)] ring-1 ring-[var(--dock-item-ring)]',
     );
 
@@ -413,7 +413,7 @@ export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: De
     const active = activeOverride ?? item.isActive?.(pathname) ?? false;
     const toneStyle = getDockToneStyle(item.key);
     const itemClass = clsx(
-      'flex h-12 min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-lg border border-[var(--dock-item-border)] bg-[var(--dock-item-bg)] px-1 text-[10px] font-semibold leading-none text-[var(--dock-item-fg)] shadow-[var(--shadow-control)] transition-colors',
+      'flex h-12 min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-lg border border-[var(--dock-item-border)] bg-[var(--dock-item-bg)] px-1 text-[10px] font-semibold leading-none text-[var(--dock-item-fg)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition-colors',
       'hover:border-[var(--dock-item-border-hover)] hover:bg-[var(--dock-item-bg-hover)] hover:text-[var(--dock-item-fg-strong)] focus-visible:bg-[var(--dock-item-bg-active)]',
       active && 'border-[var(--dock-item-border-hover)] bg-[var(--dock-item-bg-active)] text-[var(--dock-item-fg-strong)] ring-1 ring-[var(--dock-item-ring)]',
     );
@@ -521,7 +521,7 @@ export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: De
             }}
             onClick={handlePinnedChange}
             className={clsx(
-              'group/item relative ml-1 flex h-12 w-12 items-center justify-center rounded-lg border border-[var(--dock-item-border-hover)] bg-[var(--dock-item-bg-active)] text-[var(--dock-item-fg-strong)] shadow-[var(--shadow-control)] ring-1 ring-[var(--dock-item-ring)] transition duration-150 hover:-translate-y-1 hover:bg-[var(--dock-item-bg-hover)]',
+              'group/item relative ml-1 flex h-12 w-12 items-center justify-center rounded-lg border border-[var(--dock-item-border-hover)] bg-[var(--dock-item-bg-active)] text-[var(--dock-item-fg-strong)] shadow-[var(--shadow-control)] ring-1 ring-[var(--dock-item-ring)] backdrop-blur-[18px] transition duration-150 hover:-translate-y-1 hover:bg-[var(--dock-item-bg-hover)]',
               isPinned && 'shadow-[var(--shadow-dock)]',
             )}
             style={getDockToneStyle('pin')}
@@ -550,7 +550,7 @@ export default function DesktopDock({ isSidebarCollapsed, onOpenMobileMenu }: De
                 const active = item.isActive?.(pathname) ?? false;
                 const toneStyle = getDockToneStyle(item.key);
                 const className = clsx(
-                  'inline-flex h-10 min-w-0 items-center justify-center gap-2 rounded-lg border border-[var(--dock-item-border)] bg-[var(--dock-item-bg)] px-3 text-sm font-semibold text-[var(--dock-item-fg)] shadow-[var(--shadow-control)] transition-colors hover:border-[var(--dock-item-border-hover)] hover:bg-[var(--dock-item-bg-hover)] hover:text-[var(--dock-item-fg-strong)]',
+                  'inline-flex h-10 min-w-0 items-center justify-center gap-2 rounded-lg border border-[var(--dock-item-border)] bg-[var(--dock-item-bg)] px-3 text-sm font-semibold text-[var(--dock-item-fg)] shadow-[var(--shadow-control)] backdrop-blur-[18px] transition-colors hover:border-[var(--dock-item-border-hover)] hover:bg-[var(--dock-item-bg-hover)] hover:text-[var(--dock-item-fg-strong)]',
                   active && 'border-[var(--dock-item-border-hover)] bg-[var(--dock-item-bg-active)] text-[var(--dock-item-fg-strong)] ring-1 ring-[var(--dock-item-ring)]',
                 );