视觉语言

主题可以有自己的字体、色板和装饰，但阅读、导航和反馈应保持一致。先让文章、文档和手机页面可用，再增加首页视觉效果。

阅读宽度与空间

Paper 基础布局使用统一的站点宽度变量：

:root {
  --site-width: min(60vw, 1080px);
}

.site-frame {
  width: var(--site-width);
  margin-inline: auto;
}

这只是桌面基础值，窄屏需要对应断点覆盖。首页、列表、归档与文档页面应保持整体边界一致；长标题、表格、代码块和连续 URL 不能把页面撑出横向滚动条。

内置布局的文章卡片支持两列或三列，手机收为单列。三列每页固定 9 篇，两列使用站点分页设置；不要用 JavaScript 再删除一部分卡片来模拟分页。

Paper 的纸白、雾青、夜幕、清透是同一布局的不同配色。其他主题可以使用黑白、粉色或终端风格，不需要强制套用暖色系。

为页面画布、内容块、正文、次要文字、强调色和边框分别建立稳定变量。选中、悬浮、键盘焦点及错误状态也需要明确反馈。避免直接把浅色主题的文字颜色带入深色背景。

当前内置主题页头和页脚与页面共用背景，页头保留阴影与背景模糊，滚动后使用导航色的 30% 透明混合。下拉菜单与手机抽屉保留足够实的底色，避免正文透出干扰阅读。页脚不再添加顶部横线。

边框是否出现由主题层级需要决定。Mono 可以使用清楚的直线，Terminal 保留低对比灰青色细轮廓；不应为了“少边框”而让可点击区域或键盘焦点无法辨认。

设置背景透明度时，只对背景应用透明混合，不要直接降低整个容器的 opacity，否则文字、图片和控件也会一起变淡。正文图片与作者头像保留原色，不添加统一变色滤镜。

文档左侧树中，同级条目文字对齐，子级每层缩进 14px，展开图标紧随名称。选中使用文字色与下划线，不改变字号或字重，避免展开或选中时布局跳动。

右侧本页目录来自编译器的标题锚点，随阅读滚动高亮；窄屏移到正文前。固定页头不能遮住锚点标题。文档正文、前后章节和评论沿正文列同宽排列。

年份和文章列表保持固定的视觉关系，同一年跨批次时继续追加到原列表。加载中按钮要禁用重复提交，失败时显示可操作的重试提示。

全部加载完成后保留完成提示，隐藏加载按钮和底部分页。没有 JavaScript、加载失败或尚未完成时仍能访问静态分页。动态追加的文章要使用与首批静态文章相同的样式。

检查手机窄屏下的页头、文档抽屉、表格和分页。点击目标需要留出足够空间；抽屉、弹窗应能通过 Esc 或关闭按钮退出，并把焦点交还给打开入口。

按钮使用 button，跳转使用 a，不要仅在 div 上绑定点击事件来替代语义控件。触发动态加载时保留状态反馈，避免键盘使用者丢失阅读位置。

动画遵循 prefers-reduced-motion，没有对应页面元素时不启动动画循环或计时器。装饰不应挡住链接、正文选取和触摸滚动。

完成设计后按资源合并与验证检查真实构建页面。