polish(gallery): 侧栏关注区改分隔线面板，顶栏主题/语言改双胶囊单键切换 - #57
Merged
Conversation
侧栏（library）： - Follow author → 关注我；展开态触发器反色实心 + 箭头朝上，压住白卡面板 - 平台面板改成"FOLLOW ME ON"标题 + 分隔线列表，行内是品牌原色图标 （小红书改红色圆角方块 wordmark）+ ↗ 外链角标，行 hover 给柔和填充； 面板底部加指向触发器的小尖角 - Showcase → 看社区作品（带 ↗），Star on GitHub 不给角标（语义是收藏不是跳转） 顶栏（library / showcase / landing）： - 三段主题开关 + 两段语言开关 → 两个同级胶囊按钮，标签写"点了会变成什么" （🌙 Dark / ☀️ 浅色、🌐 中文 / EN），图标随生效主题由 CSS 切换 - 静止两个按钮完全同色同边框同阴影 #FFFEFA，hover #F1ECE3，按下 #E7E0D3， focus 用全局 accent 焦点环（outline，不改变布局） - 去掉显式 Auto 档但保留跟随系统：state.theme 初值仍是 system，首次点击才 落到显式 light/dark - landing 页语言控件同步成单键（保留深色玻璃质感），三页交互一致 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
效果图那三行都是中文，照搬后英文界面里两个中文平台名没跟着切。改成 data-i18n：zh 抖音/小红书，en Douyin/RedNote（链接指的是国内版抖音， 不是 TikTok；RedNote 是小红书官方英文名）。aria-label 同步。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
h1 clamp 从 2/3.4vw/3.4rem 降到 1.8/3vw/3rem（1440px 下 49→43px）， ≤620px 档 2.15→1.95rem。library 与 showcase 共用这条规则，两页同步。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Vincentwei1021
added a commit
that referenced
this pull request
Aug 28, 2026
* fix(deploy): 部署时按内容哈希给 css/js 链接打 ?v=，堵住新 HTML 配旧样式 Pages 对静态资源发 cache-control: max-age=600，PR #57 部署后十分钟窗口里 浏览器拿旧 styles.css 配新 library.html，侧栏关注面板和顶栏 toggle 全崩 （图标撑满、行堆叠、链接带下划线）。装配后加一步 stamp：按文件内容 md5 前 8 位改写 site/*.html 里 styles.css / app.js / showcase.js / translations.js 的引用，每个 HTML 版本只引用自己那代资源，哈希不变则沿用 浏览器缓存。只作用于部署产物，仓库内的 gallery/ 与本地预览不受影响。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> * fix(gallery): 首页语言按钮图标与文字对齐（图标壳补 inline-flex） 图标外壳 span 默认 display:block，svg 贴在 19.5px 行高盒顶部，中线比文字 高 2.3px（线上实测 svg 36.3 / 文字 38.6）。补 .language-toggle-icon inline-flex 后两者中线都是 38.6，delta 0。library/showcase 的 .topbar-toggle-icon 本来就有这条规则，实测 delta 0，不受影响。 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
按两张效果图改的。
侧栏左下角（library.html）
Follow author→ 关注我；展开态触发器反色实心（黑底白字）+ 箭头朝上，压住上方白卡面板。FOLLOW ME ON标题 + 分隔线列表：品牌原色图标（小红书换成红色圆角方块 wordmark、抖音保留青/粉错位）+ 右侧 ↗ 外链角标，行 hover 给柔和填充；面板底部加指向触发器的小尖角。Showcase→ 看社区作品（带 ↗）；Star on GitHub不给角标——它语义是收藏不是跳转。顶栏右上角（library / showcase / landing）
Dark/ ☀️浅色、🌐中文/EN。太阳/月亮图标由 CSS 跟随生效主题切换，无需 JS。#FFFEFA（--surface），hover#F1ECE3（新增--control-hover），按下#E7E0D3（新增--control-active），focus 用全局 accent 焦点环（outline，不改变布局）。深色主题走对应的暗色档。state.theme初值仍是system，首次点击才落到显式light/dark，没点过的用户照旧跟系统走。实测
本地起 http 服务用 Playwright 过了：浅色/深色 × 中/英四种组合、面板展开与行 hover、主题与语言按钮互点、390px 窄屏顶栏不溢出、三页 console 零报错；
build-seo.py重跑后无额外 diff。🤖 Generated with Claude Code