设计语言
本页规定站点的设计规范。修改样式或新增页面时，以本页为准。
定位
本站是供用户查找地址、确认包状态和浏览目录的索引站点。设计优先保证信息密度 与数据可读性，再考虑留白和装饰。
本站与 gentoozh.org 共用色相与深色基底。 卡片网格适合导航型首页，用于数据表会拉大行距，因此本站不采用该布局。
色彩
强调色取自 gentoozh.org 的 hsl(255 55% 70%)，色相与 Gentoo 官方紫
#54487a 一致。全站只有这一个强调色，不再引入第二种色相；
状态用绿色，仅出现在表格的对勾上。
深色
浅色
| 变量 | 用途 |
|---|---|
| --bg | 页面底色 |
| --surface | 代码块、表头等需要与底色区分的面 |
| --border | 分隔线。全站用线不用阴影 |
| --fg | 标题与强调文字 |
| --fg-body | 正文 |
| --fg-soft | 次要信息：说明、时间、单位、占位 |
| --accent | 链接、当前项、代码里的值 |
| --accent-weak | 当前项的背景，极低饱和 |
| --ok | 只用于 `已构建` 这类肯定状态 |
字体
正文使用系统 sans 字体，数据使用等宽字体。包名、版本、路径、体积和时间需要纵向 对齐，比例字体无法保持字符宽度一致。中文行高为 1.8，避免汉字行距过密。
系统 sans：正文与说明文字 The quick brown fox
等宽：app-i18n/fcitx-rime-extra 5.1.8 · 12.4 M · 2026-07-27
| 尺寸 | 用途 |
|---|---|
| 1.6rem / 600 | 页面标题，每页一个。34rem 以下 1.45rem |
| 0.95rem / 400 | 引导句 |
| 0.9rem / 600 | 章节标题、步骤标题 |
| 0.88rem / 400 | 正文与说明 |
| 0.84rem / 400 | 表格数据 |
| 0.8rem / 400 | 代码块 |
| 0.74rem / 600 | 表头、状态标签 |
间距与分隔
间距使用 4 的倍数。区块之间以 1px 线条分隔，不使用卡片、阴影或圆角容器。 按钮和标签等可交互小元素使用 2px 圆角。
移动端
响应式规则包含三处表格列隐藏断点和一处布局断点。宽度不足时依次隐藏次要列， 最窄时保留包名与状态；页面布局只在 34rem 切换。新增断点前必须补充对应宽度的验证。
| 断点 | 作用 |
|---|---|
| 62rem | 隐藏体积列。视口更宽时包名不换行 |
| 52rem | 隐藏版本列。指纹改为独占一行并按分组换行 |
| 44rem | 隐藏文件浏览器的日期列 |
| 34rem | 手机布局：顶栏折两行，内边距与代码字号收紧 |
四组媒体查询都写在基准规则之后。同权重规则按源码顺序覆盖；写在基准规则之前会 被后续基准规则覆盖。
| 规则 | 原因 |
|---|---|
| 顶栏两行 | 品牌、语言与主题位于第一行，导航链接位于第二行。品牌使用 flex-basis: 0，避免顶栏换成三行 |
| 导航链接可横向滚动 | 链接保持单行，避免单个链接独占一行 |
| 表格逐列隐藏 | 依次隐藏体积列与版本列，状态列保留到最后 |
| 表头留在视口内 | thead 使用 position: sticky，top 使用 --nav-h。顶栏同样为 sticky；若 top 为 0，表头会被顶栏遮挡。util.js 测量窄屏顶栏高度并写入变量 |
| 包名在斜线处断行 | 用 <wbr> 标出断点。word-break: break-all 会把 app-admin/1password 切成无法辨认的三段 |
| 页面不横向滚动 | 代码块与地址栏在各自容器内滚动，表格通过逐列隐藏适配视口。表格外层不得设置 overflow；overflow-x 不是 visible 时，overflow-y 的 visible 会计算为 auto，sticky 表头将绑定到该容器 |
| 正文内边距 1rem | 桌面 1.25rem。更小的值会让正文紧贴视口边缘 |
修改后逐一验证 320 至 1280 的每个宽度：可见列、指纹换行、标题字号、顶栏折行、
表头吸顶、documentElement.scrollWidth 不大于
clientWidth。使用指定宽度的 iframe 测量；修改
html.style.width 不会触发媒体查询。
组件
选项切换
互斥选项沿用镜像选择器的紧凑按钮。当前项同时写入 aria-pressed，切换后立即更新相关地址、配置和状态，不保留已失效的混合内容。
数据表
| 包 | 二进制包 | 版本 |
|---|---|---|
| app-admin/chezmoi | ✓ | 2.71.1 |
| app-misc/crush | 不构建 | |
| app-text/goldendict | 待构建 |
包列表搜索只匹配包名。切换频道时，overlay 列表、主仓库依赖、统计与纯文本链接使用 同一频道的数据；频道选择保存在浏览器中，设置页与包列表保持一致。状态列保留到最窄 布局，用于直接比较发布结果。没有公开 binpkg 时，发布政策显示在二进制包列；公开索引 仍有待移除产物时，政策改为显示在包名旁。
代码块
sync-uri = https://distfiles.gentoozh.org/binpkgs/x86-64
路径位于标题栏，命令与配置位于下方。值使用强调色，键使用正文色，注释与提示符 使用次要色。复制按钮选取整个代码块。
超宽内容在代码块内横向滚动，并保留滚动条作为可滚动提示。滚动条宽度为 6px，
滑块使用 --border，悬停时使用 --fg-soft，避免系统默认样式
在深色主题下显示浅灰色粗条。
语言
简体是源文案，直接写在 HTML 中；i18n.js 在 body 末尾替换繁体与英文。
浏览器可能在替换前开始绘制，因此 early.js 位于
<head>，同步判断访客语言。简体立即显示；其他语言在替换完成前
隐藏正文，并以 1.5 秒为最长等待时间。
| 标记 | 换什么 |
|---|---|
| data-i18n | 元素的文字 |
| data-i18n-html | 整段内容，含里面的标签与链接 |
| data-i18n-href | 链接地址。gentoozh.org 按语言分路径 |
| data-langblock | 每种语言各写一份，只显示当前语言的内容 |
导航栏与页脚由全站共用，并随当前语言切换。每个页面都显示语言按钮，用户 可以修改全站语言偏好。
文字
先写结论，再说明必要理由；需要因果关系时明确写出。每段不超过 4 句，不添加重复 总结。简体使用大陆用语（软件、网络、程序、数据、默认、内存），繁体使用台湾用语， 技术术语保留英文原文。
Portage 接受二进制包时不比较 CFLAGS，因此构建端必须保证该参数。
我们非常重视兼容性，会尽力确保您的使用体验。
本站发布 overlay 二进制包及其部分 ::gentoo 运行期依赖。这些内容不替代官方 binhost。
三样内容都可以直接浏览和下载哦。
下面三张表的示例列保持简体中文，用于检查源文案。译文按目标语言单独审校。
禁止的句式
| 句式 | 问题 |
|---|---|
| 不是 X，而是 Y | 否定式对比会延后核心结论 |
| 这不仅是…更是… | 伪广度，没有增加信息 |
| 从 X 到 Y | 同上 |
| 无缝、直观、强大 | 三项形容词堆叠，都不可验证 |
| 值得注意的是 | 直接陈述重点，无需预告 |
| 总的来说 / 综上所述 | 总结段本身就不写 |
| 随着…的不断发展 | 套话开头 |
| 其实 / 说白了 / 坦白讲 | 口语开头 |
禁止的词
| 类别 | 例 |
|---|---|
| 互联网黑话 | 赋能、抓手、闭环、底层逻辑、颗粒度、心智、护城河、沉淀、生态位 |
| 公文腔 | 不断深化、持续推动、有力支撑、彰显、诠释、注入新的活力 |
| 翻译腔空转词，能删则删 | 作为、关于、基于、进行、通过 |
| 口语 | 的话、就行、拉下来、装上、搞定 |
标点
| 符号 | 规则 |
|---|---|
| “ ” | 只用于引述与专有名称，不用于强调 |
| —— | 全角，两侧不加空格，每千字不超过 1 次 |
| — | 不用 em dash 加空格的英式写法 |
| …… | 省略号用这个，不用三个点 |
| emoji | 不用 |
刻意不做的
渐变光晕、彩色渐变标题、玻璃拟态
大圆角卡片加投影堆成的网格
超大字号的营销式首屏
图标装饰每一个标题
动效。除按钮的即时反馈外，没有动画
这些元素组合后容易形成通用模板外观。本站通过排版与信息组织建立层次，装饰不承担 信息表达功能。