导航站
导航站样式
样式调整的目标是让导航站更清晰、更稳定，而不是频繁换主题。
设计目标
导航站首页需要做到：
- 第一眼能看清分类。
- 卡片标题和描述容易扫描。
- 图标尺寸统一，不忽大忽小。
- 在线状态点不抢内容，但能快速提示异常。
- 深色或浅色背景下都有足够对比。
- 移动端卡片不挤压、不溢出。
卡片内容
每张卡片建议保持统一结构：
| 元素 | 说明 |
|---|---|
| 图标 | 使用本地图标或稳定 favicon |
| 标题 | 保持短名称 |
| 描述 | 一句话写清用途 |
| 状态点 | 显示链接检测结果 |
标题不要写成完整句子，描述也不要超过一行太多。导航站是入口，不是文章。
图标维护
优先级：
- 本地
static/assets/images/中的稳定图标。 - 官方 favicon。
- Google S2 favicon。
Google S2 示例：
logo: "https://www.google.com/s2/favicons?sz=64&domain=example.com"
如果图标无法加载：
- 先确认
logo路径是否拼错。 - 再确认远程图标服务是否可访问。
- 长期重要站点建议下载图标到本地。
在线状态点
状态点样式要遵守两个原则：
- 能看到，但不要压过标题和描述。
- 颜色含义固定，不随主题随意改变。
建议含义：
| 状态 | 颜色 | 说明 |
|---|---|---|
online | 绿色 | 链接正常 |
restricted | 黄色或绿色弱化 | 受限但可能可用 |
offline | 红色 | 链接异常 |
检测结果来自 data/link_status.yml。调整样式后，要检查至少一个正常链接和一个异常链接。
布局检查
每次改样式后至少检查：
- 首页首屏。
- 有多组分类的区域。
- 图标加载失败时的占位效果。
- 状态点显示。
- 手机宽度。
- 公开域名
https://nav.example.com/。
常见问题
卡片高度不一致
通常是标题或描述太长。先改内容，再考虑 CSS。
图标变形
检查图标容器是否固定宽高，并确认图片是否设置了 object-fit。
状态点遮挡文字
状态点应放在卡片角落或标题旁边，避免压到描述。
线上样式没变化
先区分三件事：
- 源码是否改了。
docs/是否重新构建。- 公开域名是否完成部署。
只看本地文件不能证明线上已经更新。