From cd0da2a19d9e84ac7418e8f099f816cdd19a9b58 Mon Sep 17 00:00:00 2001 From: dsh Date: Tue, 15 Sep 2026 12:04:50 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E8=84=9A=E4=B8=89=E6=A0=8F=E7=BB=9F?= =?UTF-8?q?=E4=B8=80=E6=88=90=E5=8D=A1=E7=89=87=EF=BC=9B=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E5=9D=97=E6=94=B9=E6=9A=96=E8=89=B2=E9=98=B4=E6=A7=BD=EF=BC=9B?= =?UTF-8?q?=E5=AF=BC=E8=88=AA=E5=AD=97=E5=8F=B7/=E7=A7=BB=E5=8A=A8?= =?UTF-8?q?=E7=AB=AF=E8=8F=9C=E5=8D=95=E4=BD=8D=E7=BD=AE=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 页脚 - 「最新文章」和「联系」也套上 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 --- README.md | 4 ++++ src/components/footer.astro | 16 +++++++++++----- src/components/site-header.astro | 10 ++++++---- src/data/reading.json | 2 +- src/styles/global.css | 6 ++++-- 5 files changed, 26 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 0140d7f..d689786 100644 --- a/README.md +++ b/README.md @@ -188,6 +188,10 @@ epigraph: 题记 # 可选 | `--foreground` | `oklch(0.235 0.013 68)` | 暖墨 `#221d18`，不是 `#000` | | `--muted-foreground` | `oklch(0.505 0.012 70)` | 元信息，对比度 5.3:1 | | `--border` / `--input` | `oklch(0.888 0.016 84)` | | +| `--codeblock-bg` | `oklch(0.925 0.017 84)` | 代码块阴槽 `#ece6da`，比页面底更深且同色相 | +| `--codeblock-topbar-bg` | `oklch(0.893 0.018 84)` | 代码块顶栏 | + +> `--codeblock-bg` 原来（`oklch(0.97 0.003 85)`）是**中性灰白**，在暖纸底上会变成一块冷白补丁，很跳。改配色时注意：代码块要比 `--background` 更深、色相一致，不能只是"接近白"。 对比度都还留得很足（正文 15:1、次要文字 7.5:1、主色链接 4.9:1，WCAG AA 要求 4.5:1），所以是「柔和」不是「发灰」。**暗色模式没动。** diff --git a/src/components/footer.astro b/src/components/footer.astro index 1566f0d..2a5d11b 100644 --- a/src/components/footer.astro +++ b/src/components/footer.astro @@ -30,7 +30,7 @@ const statCells = [