diff --git a/LOG.md b/LOG.md index fed43d4..e21c5b3 100644 --- a/LOG.md +++ b/LOG.md @@ -10,6 +10,7 @@ - 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. +- Increased Dock button translucency contrast so the buttons remain glassy while sitting slightly more opaque than the Dock background. - 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. @@ -20,6 +21,7 @@ - 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. +- Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on `http://localhost:3110/` confirmed Dock buttons remain translucent but render slightly more opaque than the Dock background for clearer contrast. - 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 diff --git a/src/components/layout/DesktopDock.tsx b/src/components/layout/DesktopDock.tsx index 216e8bd..71c6135 100644 --- a/src/components/layout/DesktopDock.tsx +++ b/src/components/layout/DesktopDock.tsx @@ -88,9 +88,9 @@ const dockGlassTone = createDockTone( ); const homeDockTone = createDockTone( - 'rgba(255, 255, 255, 0.36)', - 'rgba(255, 255, 255, 0.5)', - 'rgba(255, 255, 255, 0.62)', + 'rgba(255, 255, 255, 0.58)', + 'rgba(255, 255, 255, 0.68)', + 'rgba(255, 255, 255, 0.76)', 'rgba(255, 255, 255, 0.28)', 'rgba(255, 255, 255, 0.46)', 'var(--color-text-muted)', @@ -100,16 +100,16 @@ const homeDockTone = createDockTone( const dockToneStyles: Record = { home: homeDockTone, - 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: 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: 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: 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: 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: 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: 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: 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: 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: 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)'), + archive: createDockTone('rgba(222, 216, 255, 0.54)', 'rgba(222, 216, 255, 0.64)', 'rgba(222, 216, 255, 0.72)', 'rgba(255, 255, 255, 0.26)', 'rgba(151, 132, 214, 0.34)', '#6f668f', '#514274', 'rgba(151, 132, 214, 0.2)'), + chess: createDockTone('rgba(255, 229, 162, 0.54)', 'rgba(255, 229, 162, 0.64)', 'rgba(255, 229, 162, 0.72)', 'rgba(255, 255, 255, 0.28)', 'rgba(184, 134, 42, 0.34)', '#7b6d4a', '#665125', 'rgba(184, 134, 42, 0.2)'), + admin: createDockTone('rgba(192, 226, 255, 0.54)', 'rgba(192, 226, 255, 0.64)', 'rgba(192, 226, 255, 0.72)', 'rgba(255, 255, 255, 0.27)', 'rgba(81, 145, 195, 0.34)', '#627f96', '#3f6686', 'rgba(81, 145, 195, 0.2)'), + write: createDockTone('rgba(255, 209, 184, 0.54)', 'rgba(255, 209, 184, 0.64)', 'rgba(255, 209, 184, 0.72)', 'rgba(255, 255, 255, 0.28)', 'rgba(187, 106, 70, 0.34)', '#8c705f', '#724d38', 'rgba(187, 106, 70, 0.2)'), + login: createDockTone('rgba(190, 236, 238, 0.54)', 'rgba(190, 236, 238, 0.64)', 'rgba(190, 236, 238, 0.72)', 'rgba(255, 255, 255, 0.27)', 'rgba(68, 150, 158, 0.34)', '#63898c', '#446d72', 'rgba(68, 150, 158, 0.2)'), + signup: createDockTone('rgba(237, 207, 250, 0.54)', 'rgba(237, 207, 250, 0.64)', 'rgba(237, 207, 250, 0.72)', 'rgba(255, 255, 255, 0.27)', 'rgba(153, 91, 176, 0.34)', '#846c8e', '#684a78', 'rgba(153, 91, 176, 0.2)'), + logout: createDockTone('rgba(255, 207, 216, 0.54)', 'rgba(255, 207, 216, 0.64)', 'rgba(255, 207, 216, 0.72)', 'rgba(255, 255, 255, 0.28)', 'rgba(188, 84, 99, 0.34)', '#8f6970', '#714850', 'rgba(188, 84, 99, 0.2)'), + pin: createDockTone('rgba(255, 219, 170, 0.56)', 'rgba(255, 219, 170, 0.66)', 'rgba(255, 219, 170, 0.74)', 'rgba(255, 255, 255, 0.28)', 'rgba(184, 118, 44, 0.36)', '#8a704e', '#6b4f2d', 'rgba(184, 118, 44, 0.22)'), + menu: createDockTone('rgba(213, 234, 203, 0.54)', 'rgba(213, 234, 203, 0.64)', 'rgba(213, 234, 203, 0.72)', 'rgba(255, 255, 255, 0.27)', 'rgba(98, 143, 80, 0.34)', '#6f8366', '#526f44', 'rgba(98, 143, 80, 0.2)'), + more: createDockTone('rgba(210, 228, 255, 0.54)', 'rgba(210, 228, 255, 0.64)', 'rgba(210, 228, 255, 0.72)', 'rgba(255, 255, 255, 0.27)', 'rgba(86, 126, 183, 0.34)', '#6d7f98', '#4f688d', 'rgba(86, 126, 183, 0.2)'), default: dockGlassTone, };