移动端美化:悬浮磨砂导航菜单 + 保守档字号
菜单(site-header.astro) - 全屏遮罩居中大链接 -> 仿 Firefly float-panel 的悬浮磨砂卡片: fixed top-[76px] 左右各留 12px,rounded-2xl,浅阴影,max-h 兜底防横屏溢出 - 菜单项 30px -> 18px,行高 44px,圆角 hover 底色;外链右侧加 ↗ - 当前页在构建期用 Astro.url.pathname 判定,高亮为主色文字 + 淡主色底 + 正文标题那道红色短竖线(滑入/当前项显示) - 入场动画改为「面板落下 + 逐项上浮」,节奏从 420ms 收到 300ms - 遮罩从纯色全屏改为 background/45% + 极轻模糊,点它关闭 - JS 未改:data-open / ESC / body 滚动锁 / astro:before-swap 复位 / aria 全部沿用 - 补 :focus-visible 自定义焦点环(替掉浏览器默认那圈)、prefers-reduced-motion、 prefers-reduced-transparency、@supports 回退 磨砂 - global.css 新增 --glass-bg / --glass-border / --glass-blur / --glass-saturate, 由 --card 派生所以亮暗自动跟随 - 移动端页眉仍保持关闭常驻磨砂(原来就是有意为之),只有点开的菜单面板用 字号(只动 <768px,保守档) - 正文/引用/列表 16.5px/1.85 -> 15.5px/1.78,行高密度约省 10% - 文章 h1 30 -> 27px;正文 h2 30 -> 25;h3 24 -> 21;h4 20 -> 18 - 列表区标题 24 -> 21px - 桌面端用 md: 前缀原样恢复 验证(headless Chrome 131,390x844 + 1280/800/700) - 390px:正文 15.5/27.59、h1 27、菜单项 18;面板 445px 高、底边 511 < 844 - 1280/800px:正文 16.5/30.525、h1 48px,与改动前一致 - 亮/暗两套截图正常,无横向溢出
This commit is contained in:
@@ -48,6 +48,16 @@
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--radius: 0.5rem;
|
||||
/*
|
||||
* 磨砂玻璃 token —— 只给「浮在内容上方、面积不大」的元素用
|
||||
* (移动端菜单、页眉、搜索面板…)。不要给文章卡片大面积用,
|
||||
* 一屏十几个元素同时 backdrop-filter 会明显掉帧。
|
||||
* 由 --card 派生,所以亮/暗色自动跟随。
|
||||
*/
|
||||
--glass-bg: color-mix(in oklch, var(--card) 72%, transparent);
|
||||
--glass-border: color-mix(in oklch, var(--border) 75%, transparent);
|
||||
--glass-blur: 14px;
|
||||
--glass-saturate: 1.5;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.55 0.22 var(--primary-hue, 25));
|
||||
|
||||
Reference in New Issue
Block a user