38 lines
5.2 KiB
Markdown
38 lines
5.2 KiB
Markdown
# CFN页头品牌标志（2026-10-31）
|
||
|
||
**已随[2026-10-31正式发布记录](UI_RELEASE_2026-10-31.md)上线**。以下标注“仅本地”的段落为当时实施历史；当前正式品牌、窄屏居中及侧栏TG/GitHub均已发布。
|
||
|
||
**当前字标已恢复文字**：用户试看风格化图片后要求改回ClashFreeNode文字。当前为统一深灰色的HTML字标，猫仍是独立SVG，下方文案保留；图片生成记录仅作历史。
|
||
|
||
用户要求尝试将现有猫转SVG，右侧显示clashfreenode，下行显示“每天分享免费节点”。已在FNA_V3本地接入，未提交/推送/部署；旧PNG与其他实例标志保留。
|
||
|
||
- SVG：`public/sites/cfn/images/logo/cat.svg`，从现有logo.png猫的紫色轮廓提取并简化为二次贝塞尔曲线，5个轮廓包含双眼与独立腿部，原色#764679。只有矢量path，不嵌入PNG、脚本、字体或外部资源；透明背景。
|
||
- 复现脚本：`output/branding/vectorize-cat.py`，使用桌面已带的Pillow/NumPy，无项目新增依赖；读取原PNG、不修改原图。svg约7.6KB。
|
||
- 文字：`components/cfn-brand.blade.php`使用可读HTML文字，避免把字做进图片；CSS位于`public/css/cfn-brand.css`，app-layout在cfn环境单次加载。品牌名保持用户要求的小写，文案“每天分享免费节点”。
|
||
- 接入：nav-bar仅对site_code_short=cfn使用新组件，其他实例沿原PNG轻/深色分支。菜单顺序、菜单当前状态、TG/GitHub/搜索功能未改。
|
||
- 适配：桌面猫44×44、品牌文字23px；手机猫38×38/21px；小于360px猫32×32/18px。深色文字有主题分支，不引入远程字体或JS。
|
||
|
||
本地1280、390及320视口检查：SVG正常加载、两行文案正确，无导航横向溢出；320px品牌块约158px宽。截图：[页头](../../output/branding/header-logo.png)。本地HTTP/SVG XML检查通过；未点击线上落地页，未build。
|
||
|
||
回退：cfn导航切回原logo.png，移除app-layout的cfn-brand.css引用；不用删原PNG或修改其他实例。保持其他并行导航改动。
|
||
|
||
2026-10-31用户将字标明确为ClashFreeNode并要求设计，已本地改为CamelCase：Clash深灰、FreeNode呼应猫的紫色；字重700/650、字距-.65px，微调图文和两行间距，下方文案不变。保留真实文字及原SVG，无新字体请求，桌面/手机复验后仅本地。
|
||
|
||
## 风格化图片字标（2026-10-31）
|
||
|
||
原稿`output/branding/wordmark/clashfreenode-generated.png`，2172×724真实透明通道；完整提示词见[生成提示词](../../output/branding/wordmark/prompt.txt)，由内置image_gen生成，无CLI/API密钥。交付文件`public/sites/cfn/images/logo/wordmark-stylized.webp`约83KB，只做网页格式编码，不重画或合成；原PNG完整保留。CSS透明画布窗口去掉上下空白，不拉伸字形。
|
||
|
||
`cfn-brand.blade.php`已将普通字替换为带alt=ClashFreeNode的img，保留独立SVG猫与“每天分享免费节点”。桌面字标视窗182×25，手机160×22，320px小屏134×19；活动品牌块在320px宽约172px，无横向溢出、文字识别清楚。预览见[图片字标效果](../../output/branding/header-wordmark-image.png)。本次未改广告尺寸、正文、导航链接或其他实例标志，未build、提交/推送或上线。
|
||
|
||
2026-10-31按用户最新要求，已将图片字标恢复为文字ClashFreeNode及先前字重/配色/响应字号，页头不再请求wordmark-stylized.webp；图片及提示词保留归档。SVG猫、下方文案与广告高度不变，仍仅本地。
|
||
|
||
2026-10-31用户要求颜色与此前一致，已将ClashFreeNode字标统一为原PNG字标深灰#555555，取消FreeNode的紫色强调；猫的原紫色不变，深色模式字标统一继承浅色。仅本地。
|
||
|
||
## 窄屏导航对齐与GitHub（2026-10-31，仅本地）
|
||
|
||
用户反馈Logo位置不对并要求窄屏不隐藏GitHub。已为SVG品牌补回6px左侧视觉留白，菜单/Logo/Telegram/GitHub/搜索垂直中心保持一致。移动导航增设使用原config(path.url_github_href)的GitHub链接，沿用原灰色32px按钮与新窗口属性；桌面保留原GitHub，不重复显示。320px下将字标微调17px并禁止导航换行，5项中心均35px，搜索不掉到第二行，未溢出；390/499px也检查通过，最终恢复默认视口。页头预览见[窄屏导航](../../output/branding/mobile-nav-github.png)。不改变文字/猫颜色、落地页地址或菜单逻辑，未上线。
|
||
|
||
2026-10-31用户澄清原要求为“窄屏整个Logo居中”，上次补左侧留白的理解已纠正。现窄屏品牌相对导航容器绝对居中，不受左菜单/右侧三个按钮宽度差影响；按390/375/320宽度协调品牌及按钮尺寸，全部图标保留。390px品牌中心195px，320px中心160px，与视口中心一致，且不重叠；桌面品牌位置不改。仅本地。
|
||
|
||
2026-10-31按用户最新要求，窄屏Telegram和GitHub从顶部移到移动侧栏的栏目菜单下方，用分隔线与菜单区分；顶部保留左侧菜单、居中品牌和右侧搜索。桌面TG/GitHub/搜索保持原位，链接配置保持原样。窄屏品牌恢复38px猫/21px文字，无需此前为右侧三图标设置的小屏压缩规则；本地检查侧栏开关与品牌中心，未上线。
|