diff --git a/LOG.md b/LOG.md index 3bc0818..0ed2cab 100644 --- a/LOG.md +++ b/LOG.md @@ -8,6 +8,7 @@ - Changed the desktop Dock's default state to pinned/open and added distinct soft pastel tones to Dock buttons, including stronger visual treatment for pin/unpin and auth actions. - 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. - 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. @@ -16,6 +17,7 @@ - Validation: `npm run lint` passed and `npm run build` passed. In-app browser verification on a local `next start` server confirmed the Dock opens by default and Home/Archive/Chess/Login/Signup/Pin buttons render distinct pastel colors. - 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. - 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/app/globals.css b/src/app/globals.css index b4f6b90..bbcfdf1 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -42,8 +42,8 @@ --control-border: rgba(39, 54, 82, 0.12); --menubar-bg: rgba(255, 255, 255, 0.5); --menubar-border: rgba(255, 255, 255, 0.7); - --dock-bg: rgba(255, 255, 255, 0.86); - --dock-border: rgba(255, 255, 255, 0.92); + --dock-bg: rgba(248, 250, 252, 0.46); + --dock-border: rgba(255, 255, 255, 0.62); --sidebar-bg: rgba(255, 255, 255, 0.48); --sidebar-border: rgba(255, 255, 255, 0.6); --color-surface: var(--card-bg); @@ -62,7 +62,7 @@ --shadow-menubar: 0 16px 40px rgba(70, 92, 130, 0.12), 0 1px 0 rgba(255, 255, 255, 0.58) inset; --shadow-panel: var(--shadow-sidebar); --shadow-card: 0 14px 34px rgba(70, 92, 130, 0.09), 0 1px 0 rgba(255, 255, 255, 0.5) inset; - --shadow-dock: 0 22px 58px rgba(70, 92, 130, 0.18), 0 8px 18px rgba(70, 92, 130, 0.1), 0 1px 0 rgba(255, 255, 255, 0.68) inset; + --shadow-dock: 0 28px 78px rgba(15, 23, 42, 0.18), 0 12px 32px rgba(15, 23, 42, 0.12), 0 1px 0 rgba(255, 255, 255, 0.68) inset, 0 -1px 0 rgba(15, 23, 42, 0.06) inset; --shadow-control: 0 12px 26px rgba(70, 92, 130, 0.1), 0 1px 0 rgba(255, 255, 255, 0.46) inset; --focus-ring: 0 0 0 4px rgba(0, 102, 204, 0.14); --background: var(--color-page); @@ -96,8 +96,8 @@ html[data-theme="dark"] { --control-border: rgba(255, 255, 255, 0.13); --menubar-bg: rgba(24, 27, 38, 0.62); --menubar-border: rgba(255, 255, 255, 0.16); - --dock-bg: rgba(27, 30, 42, 0.66); - --dock-border: rgba(255, 255, 255, 0.18); + --dock-bg: rgba(18, 20, 28, 0.46); + --dock-border: rgba(255, 255, 255, 0.16); --sidebar-bg: rgba(21, 24, 34, 0.64); --sidebar-border: rgba(255, 255, 255, 0.14); --color-surface: var(--card-bg); @@ -116,7 +116,7 @@ html[data-theme="dark"] { --shadow-menubar: 0 18px 46px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.09) inset; --shadow-panel: var(--shadow-sidebar); --shadow-card: 0 16px 34px rgba(0, 0, 0, 0.32), 0 1px 0 rgba(255, 255, 255, 0.08) inset; - --shadow-dock: 0 26px 68px rgba(0, 0, 0, 0.44), 0 10px 24px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.12) inset; + --shadow-dock: 0 30px 86px rgba(0, 0, 0, 0.48), 0 12px 34px rgba(0, 0, 0, 0.34), 0 1px 0 rgba(255, 255, 255, 0.14) inset, 0 -1px 0 rgba(0, 0, 0, 0.36) inset; --shadow-control: 0 14px 30px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.08) inset; --focus-ring: 0 0 0 4px rgba(41, 151, 255, 0.18); --background: var(--color-page); diff --git a/src/components/layout/DesktopDock.tsx b/src/components/layout/DesktopDock.tsx index b7c820d..8815011 100644 --- a/src/components/layout/DesktopDock.tsx +++ b/src/components/layout/DesktopDock.tsx @@ -76,19 +76,41 @@ const createDockTone = ( '--dock-item-ring': ring, }); +const dockGlassTone = createDockTone( + 'rgba(255, 255, 255, 0.24)', + 'rgba(255, 255, 255, 0.36)', + 'rgba(255, 255, 255, 0.46)', + 'rgba(255, 255, 255, 0.2)', + 'rgba(255, 255, 255, 0.34)', + 'var(--color-text-muted)', + 'var(--color-text)', + 'rgba(255, 255, 255, 0.34)', +); + +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.28)', + 'rgba(255, 255, 255, 0.46)', + 'var(--color-text-muted)', + 'var(--color-text)', + 'rgba(255, 255, 255, 0.42)', +); + const dockToneStyles: Record = { - home: createDockTone('rgba(255, 255, 255, 0.78)', 'rgba(255, 255, 255, 0.92)', 'rgba(255, 255, 255, 0.98)', 'rgba(148, 163, 184, 0.16)', 'rgba(148, 163, 184, 0.26)', '#687386', '#334155', 'rgba(148, 163, 184, 0.18)'), - archive: createDockTone('rgba(239, 235, 255, 0.56)', 'rgba(231, 226, 250, 0.72)', 'rgba(224, 217, 246, 0.8)', 'rgba(111, 92, 176, 0.15)', 'rgba(111, 92, 176, 0.23)', '#7a6d9f', '#5f5289', 'rgba(111, 92, 176, 0.15)'), - chess: createDockTone('rgba(255, 247, 222, 0.62)', 'rgba(255, 240, 207, 0.78)', 'rgba(252, 234, 194, 0.84)', 'rgba(164, 122, 36, 0.16)', 'rgba(164, 122, 36, 0.24)', '#8a7a4b', '#6f5d2e', 'rgba(164, 122, 36, 0.15)'), - admin: createDockTone('rgba(232, 244, 255, 0.6)', 'rgba(220, 238, 252, 0.76)', 'rgba(209, 232, 247, 0.84)', 'rgba(60, 129, 181, 0.16)', 'rgba(60, 129, 181, 0.25)', '#5f86a8', '#3d6f98', 'rgba(60, 129, 181, 0.15)'), - write: createDockTone('rgba(255, 239, 229, 0.62)', 'rgba(255, 230, 215, 0.78)', 'rgba(251, 221, 203, 0.84)', 'rgba(177, 94, 58, 0.16)', 'rgba(177, 94, 58, 0.24)', '#9a755f', '#7e5843', 'rgba(177, 94, 58, 0.15)'), - login: createDockTone('rgba(230, 248, 249, 0.58)', 'rgba(218, 241, 244, 0.74)', 'rgba(205, 235, 239, 0.82)', 'rgba(47, 139, 148, 0.16)', 'rgba(47, 139, 148, 0.24)', '#5f9298', '#3d7880', 'rgba(47, 139, 148, 0.15)'), - signup: createDockTone('rgba(249, 235, 255, 0.58)', 'rgba(243, 225, 251, 0.74)', 'rgba(236, 216, 246, 0.82)', 'rgba(139, 75, 160, 0.16)', 'rgba(139, 75, 160, 0.24)', '#94739f', '#795586', 'rgba(139, 75, 160, 0.15)'), - logout: createDockTone('rgba(255, 237, 240, 0.62)', 'rgba(255, 226, 231, 0.78)', 'rgba(249, 216, 223, 0.84)', 'rgba(173, 70, 86, 0.16)', 'rgba(173, 70, 86, 0.25)', '#9a6870', '#7e4b55', 'rgba(173, 70, 86, 0.15)'), - pin: createDockTone('rgba(255, 244, 226, 0.72)', 'rgba(255, 235, 210, 0.86)', 'rgba(250, 227, 197, 0.92)', 'rgba(181, 115, 45, 0.2)', 'rgba(181, 115, 45, 0.32)', '#957049', '#765530', 'rgba(181, 115, 45, 0.18)'), - menu: createDockTone('rgba(238, 247, 232, 0.58)', 'rgba(228, 241, 221, 0.74)', 'rgba(219, 235, 211, 0.82)', 'rgba(91, 140, 75, 0.16)', 'rgba(91, 140, 75, 0.24)', '#728c64', '#58734a', 'rgba(91, 140, 75, 0.15)'), - more: createDockTone('rgba(235, 243, 255, 0.6)', 'rgba(225, 236, 252, 0.76)', 'rgba(214, 228, 246, 0.84)', 'rgba(76, 118, 178, 0.16)', 'rgba(76, 118, 178, 0.24)', '#6e86a8', '#526d91', 'rgba(76, 118, 178, 0.15)'), - default: createDockTone('rgba(246, 247, 250, 0.58)', 'rgba(237, 240, 246, 0.76)', 'rgba(228, 233, 242, 0.84)', 'rgba(98, 110, 132, 0.14)', 'rgba(98, 110, 132, 0.22)', '#747d8d', '#596578', 'rgba(98, 110, 132, 0.14)'), + home: homeDockTone, + archive: dockGlassTone, + chess: dockGlassTone, + admin: dockGlassTone, + write: dockGlassTone, + login: dockGlassTone, + signup: dockGlassTone, + logout: dockGlassTone, + pin: dockGlassTone, + menu: dockGlassTone, + more: dockGlassTone, + default: dockGlassTone, }; const getDockToneStyle = (key: string) => dockToneStyles[key] ?? dockToneStyles.default;