正文与段落
正文段落采用 16px / 行高 1.95 的 --site-sans。长文段落(.post-content)使用 17px 衬线、行高 1.95。
需要强调关键概念时, 可使用 粗体 或 斜体; 行内代码用 code 标签。
设计样板
本页是 Conan Xin 数字花园的全站设计样板。它仅使用 assets/site/design.css 的现有变量和公共组件, 不引入独立的第二套样式系统。读者可在此查看标题层级、正文、按钮、链接、卡片、引文、数据表格与折叠内容的呈现参考。
字体与层级
全站使用 :root 中的 --site-serif 与 --site-sans, 标题使用衬线字体, 正文与 UI 使用无衬线字体。
H1 · 衬线粗体
H2 · 章节标题
H3 · 段落小标题
H4 · 子段落
卡片
三种常用卡片样式均使用现有 token:
引文
"这是一种用于强调关键论述的呈现方式, 左侧边线为深绿色, 背景为浅米色。"
数据表格
表格会自动被 build_site.py 用 .site-table-scroll 包装以支持横向滚动。
| 项目 | 类型 | 状态 (示例) | 开始 (示例) |
|---|---|---|---|
| 示例项目甲 | 示例类型 | 示例状态 A | 20XX-01 |
| 示例项目乙 | 示例类型 | 示例状态 B | 20XX-06 |
| 示例项目丙 | 示例类型 | 示例状态 C | 20XX-08 |
折叠内容
显示技术细节
常规页面的共享主题为 unified-v1，由 scripts/build_site.py transform() 注入 body.site-unified 与主题标识。已批准的 火星长文专题 则采用 project-native，保留原生深空 / 火星沙配色，并继续使用同一全站导航与身份标识。
<body class="site-unified" data-site-theme="unified-v1" data-site-kind="content">显示无障碍设计目标与已落实项
无障碍是本站设计的持续目标, 并非已通过完整第三方审计的合规声明。已落实的具体实践包括:
- 所有可交互元素 (链接、按钮、可折叠控件) 在
:focus-visible状态下显示2px solid var(--site-accent)焦点轮廓, 配合outline-offset: 4px, 对应 WCAG 2.4.7 的可见焦点要求。 - 链接默认具备可读的
:hover与:focus状态, 颜色对比满足正文 ≥ 4.5:1 (WCAG 1.4.3)。 - 图像
<img>在源代码中需要alt属性; 当前assets/site/design.css提供.visually-hidden工具类供装饰性背景图像使用。 - 页面结构遵循
<main>+<article>/<section>的语义层级, 便于屏幕阅读器导航。
本节内容为设计目标与已落实项, 不是已通过 WCAG 2.1 AA 第三方合规审计的认证声明。需要完整无障碍评估 (含辅助技术实测) 时, 应另行委托独立审计。
焦点与可访问性
使用 Tab 键浏览以下链接, 可见焦点环: