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

页脚
- 「最新文章」和「联系」也套上 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

@@ -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），所以是「柔和」不是「发灰」。**暗色模式没动。**
 

src/components/footer.astro

@@ -30,7 +30,7 @@ const statCells = [
 
 <footer class="border-t border-border/50 bg-background">
   <div class="max-w-6xl mx-auto px-6 py-16">
-    <div class="grid gap-12 md:grid-cols-3">
+    <div class="grid gap-5 md:grid-cols-3">
       {/*
         站点信息卡片：沿用侧栏作者卡片/分类卡片的语言
         （bg-card + border/50 + rounded-xl + 红色短竖线标题）。
@@ -58,8 +58,11 @@ const statCells = [
         最新文章：手机端上面就是文章列表，再列一遍没意义，所以只在 md 以上显示。
         页脚原来那栏「导航」是顶部导航的逐项复制（9 条完全一样），已删掉。
       */}
-      <div class="hidden md:block md:justify-self-center">
-        <h4 class="text-sm font-medium text-foreground mb-4 uppercase tracking-wide">最新文章</h4>
+      <div class="hidden md:block bg-card border border-border/50 rounded-xl p-5">
+        <div class="flex items-center gap-2 mb-4">
+          <div class="w-1 h-4 bg-primary rounded-full" />
+          <h4 class="font-medium text-foreground">最新文章</h4>
+        </div>
         <ul class="flex flex-col gap-3">
           {stats.latestPosts.map((post) => (
             <li>
@@ -75,8 +78,11 @@ const statCells = [
         </ul>
       </div>
 
-      <div class="md:justify-self-end">
-        <h4 class="text-sm font-medium text-foreground mb-4 uppercase tracking-wide">联系</h4>
+      <div class="bg-card border border-border/50 rounded-xl p-5">
+        <div class="flex items-center gap-2 mb-4">
+          <div class="w-1 h-4 bg-primary rounded-full" />
+          <h4 class="font-medium text-foreground">联系</h4>
+        </div>
         <div class="flex items-center gap-4">
           {contactLinks.map((link) => {
             const Icon = iconMap[link.type]

src/components/site-header.astro

@@ -39,14 +39,16 @@ const isCurrent = (href: string) =>
       <span class="text-foreground font-medium tracking-tight hidden sm:block">{site.name}</span>
     </a>
 
-    <nav class="hidden md:flex items-center gap-8 justify-self-center">
+    {/* 字号只在 lg 以上放大：768–1023 这段页眉本来就挤（导航 + 搜索框 + 主题按钮
+        加起来超过可用宽度），再放大只会更难看 */}
+    <nav class="hidden md:flex items-center gap-6 lg:gap-7 justify-self-center">
       {navItems.map((item) => (
         <a
           href={item.href}
           target={item.external ? "_blank" : undefined}
           rel={item.external ? "noreferrer" : undefined}
           data-astro-prefetch={item.external ? undefined : ""}
-          class="text-sm text-muted-foreground hover:text-foreground transition-colors duration-200 relative group"
+          class="text-sm lg:text-[15px] text-muted-foreground hover:text-foreground transition-colors duration-200 relative group"
         >
           {item.name}
           <span class="absolute -bottom-1 left-0 w-0 h-px bg-primary transition-all duration-300 group-hover:w-full" />
@@ -86,7 +88,7 @@ const isCurrent = (href: string) =>
   <div class="mobile-menu-bg absolute inset-0" data-dismiss aria-hidden="true"></div>
 
   <div
-    class="mobile-menu-panel absolute left-3 right-3 top-[calc(var(--header-h)+7px)] p-2 rounded-2xl border max-h-[calc(100dvh-96px)] overflow-y-auto overscroll-contain"
+    class="mobile-menu-panel absolute right-3 top-[calc(var(--header-h)+7px)] w-60 max-w-[calc(100vw-1.5rem)] p-2 rounded-2xl border max-h-[calc(100dvh-96px)] overflow-y-auto overscroll-contain"
     role="dialog"
     aria-modal="true"
     aria-label="站点导航"
@@ -169,7 +171,7 @@ const isCurrent = (href: string) =>
   .mobile-menu-panel {
     opacity: 0;
     transform: translateY(-10px) scale(0.985);
-    transform-origin: top center;
+    transform-origin: top right;
     background-color: var(--glass-bg);
     border-color: var(--glass-border);
     box-shadow: 0 18px 48px -14px oklch(0 0 0 / 0.24);

src/data/reading.json

@@ -1,5 +1,5 @@
 {
-  "updatedAt": "2026-09-15T03:11:22.026Z",
+  "updatedAt": "2026-09-15T04:04:45.323Z",
   "source": "weread",
   "books": [
     {

src/styles/global.css

@@ -90,8 +90,10 @@
   --admonitions-color-warning: oklch(0.7 0.18 70);
   --admonitions-color-caution: oklch(0.62 0.2 var(--primary-hue, 25));
   /* Code block colors - light mode */
-  --codeblock-bg: oklch(0.97 0.003 85);
-  --codeblock-topbar-bg: oklch(0.94 0.003 85);
+  /* 暖色阴槽。原来是 0.97/0.003 的中性灰白，在暖纸底（#f8f3e9）上
+     就是一块冷白补丁，很跳。现在比页面底更深、并带上同样的暖色相。 */
+  --codeblock-bg: oklch(0.925 0.017 84);
+  --codeblock-topbar-bg: oklch(0.893 0.018 84);
   --math-color: oklch(0.24 0.01 25);
   --math-display-color: oklch(0.28 0.01 25);
   --math-display-shadow: 0 1px 0 oklch(1 0 0 / 0.6);