设计语言
这个站点的取值与规则。改样式之前先看这里，新页面照这里取值。
定位
这是一个索引站点，不是产品主页。访客来这里是为了取一个地址、确认一个包在不在、 看一个目录里有什么。所有决定都服从这一点：信息密度优先于留白， 数据可读优先于版面漂亮。
与 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，写 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 不触发媒体查询。
组件
数据表
| 包 | 说明 | 二进制包 | 版本 |
|---|---|---|---|
| app-admin/chezmoi | Manage your dotfiles across machines | ✓ | 2.71.1 |
| app-misc/crush | A command line shell | 不构建 | |
| app-text/goldendict | Feature-rich dictionary lookup program | 待构建 |
搜索同时比对包名和说明。说明列被藏起来的宽度上，靠说明命中的行在包名下面
补一句说明，命中的词用 <mark> 圈出来，底色 --accent-weak。
否则结果里会出现名字与搜索词无关的包，页面上找不到理由。
代码块
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 的源码，不能替代官方源。
三样东西都可以直接浏览和下载哦。
禁止的句式
| 句式 | 问题 |
|---|---|
| 不是 X，而是 Y | 否定式对比，绕一圈才说到点 |
| 这不仅是…更是… | 伪广度，没有增加信息 |
| 从 X 到 Y | 同上 |
| 无缝、直观、强大 | 三项形容词堆叠，都不可验证 |
| 值得注意的是 | 该注意的直接写，不用预告 |
| 总的来说 / 综上所述 | 总结段本身就不写 |
| 随着…的不断发展 | 套话开头 |
| 其实 / 说白了 / 坦白讲 | 口语开头 |
禁止的词
| 类别 | 例 |
|---|---|
| 互联网黑话 | 赋能、抓手、闭环、底层逻辑、颗粒度、心智、护城河、沉淀、生态位 |
| 公文腔 | 不断深化、持续推动、有力支撑、彰显、诠释、注入新的活力 |
| 翻译腔空转词 | 作为、关于、基于、进行、通过（能删则删） |
| 口语 | 的话、就行、拉下来、装上、搞定 |
标点
| 符号 | 规则 |
|---|---|
| “ ” | 只用于引述与专有名称，不用于强调 |
| —— | 全角，两侧不加空格，每千字不超过 1 次 |
| — | 不用 em dash 加空格的英式写法 |
| …… | 省略号用这个，不用三个点 |
| emoji | 不用 |
刻意不做的
渐变光晕、彩色渐变标题、玻璃拟态
大圆角卡片加投影堆成的网格
超大字号的营销式首屏
图标装饰每一个标题
动效。除按钮的即时反馈外，没有动画
这些是当下生成式工具的默认产物，堆在一起会让任何站点看着像同一个模板。 这个站点靠排版和信息组织成立，不靠装饰。