页脚三栏统一成卡片;代码块改暖色阴槽;导航字号/移动端菜单位置调整

页脚
- 「最新文章」和「联系」也套上 bg-card + border/50 + rounded-xl + p-5,
  标题用和「站点信息」同一套红竖线样式,三栏现在是一个语言
- 栏间距 gap-12 -> gap-5,卡片自己撑开视觉分隔
- 去掉 md:justify-self-center / md:justify-self-end,卡片改为填满各自栅格

代码块(浅色)
- --codeblock-bg  oklch(0.97 0.003 85) -> oklch(0.925 0.017 84)  #f6f5f3 -> #ece6da
- --codeblock-topbar-bg 0.94/0.003 -> 0.893/0.018
- 原来那个值是中性灰白(彩度 0.003),而页面底是暖纸 #f8f3e9,
  在暖底上就是一块冷白补丁;现在比页面底更深且色相一致
- 正文对比度仍有 11.7:1,暗色模式未动

桌面导航
- 链接 text-sm -> text-sm lg:text-[15px]
- 间距 gap-8 -> gap-6 lg:gap-7
- 只在 lg 以上放大:768-1023 这段页眉本来就挤(导航 9 项 + 搜索框 + 主题按钮
  加起来超过可用宽度),再放大只会更难看,这段维持原样不做回归

移动端菜单
- 从 left-3 right-3 横向铺满,改成 right-3 w-60(240px)+ max-w 兜底
- 展开原点 top center -> top right
- 竖向空间占用不变(max-h 仍在),横向不再占满一屏

验证(dist)
- 页脚 3 个 bg-card 容器 / 3 个红竖线标题,三个标题都在卡片内
- 构建出的 CSS: codeblock-bg:oklch(92.5% .017 84),暗色分支未变
- 页眉 class 确认为 text-sm lg:text-[15px] + gap-6 lg:gap-7
- 移动端面板 class 确认为 right-3 w-60 ...,transform-origin: top right
This commit is contained in:
dsh
2026-09-15 12:04:50 +08:00
parent 0719d8ba5d
commit cd0da2a19d
5 changed files with 26 additions and 12 deletions
+1 -1
View File
@@ -1,5 +1,5 @@
{
"updatedAt": "2026-09-15T03:11:22.026Z",
"updatedAt": "2026-09-15T04:04:45.323Z",
"source": "weread",
"books": [
{