移动端美化:悬浮磨砂导航菜单 + 保守档字号

菜单(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:
dsh
2026-09-15 09:03:24 +08:00
parent c841fa2047
commit 9d9f87a013
5 changed files with 205 additions and 48 deletions
+2 -2
View File
@@ -312,11 +312,11 @@ export function ArticleList({
style={{ animation: "fade-in-up 220ms ease-out" }}
>
{activeCategory === "all" && !activeTag ? (
<h2 className="font-serif text-2xl font-bold leading-tight tracking-tight text-foreground sm:text-3xl lg:text-[2.625rem]">
<h2 className="font-serif text-[21px] font-bold leading-tight tracking-tight text-foreground sm:text-3xl lg:text-[2.625rem]">
{headerMeta.heading}
</h2>
) : (
<h2 className="flex flex-wrap items-end gap-x-2 gap-y-1 font-serif text-2xl font-bold leading-tight tracking-tight sm:text-3xl lg:text-[2.625rem]">
<h2 className="flex flex-wrap items-end gap-x-2 gap-y-1 font-serif text-[21px] font-bold leading-tight tracking-tight sm:text-3xl lg:text-[2.625rem]">
<span className="text-foreground/68">{headerMeta.eyebrow}</span>
<span className="text-foreground/35">/</span>
<span className="text-primary">{headerMeta.heading}</span>