fix(visual): 修视觉终审的折行/豆腐块与灰阶纪律违规
视觉终审(glm-5.3-flash:max)判 BLOCK,逐条修完并复测。
P1 阻断:
- 瞬间页日期折成两行(`2026-` / `04-29`):日期列复用 var(--space-5)=40px,
而 10 字符 mono 日期需 ≈75px 且缺 nowrap。抽 --tl-rail(5.4rem) 统一驱动
轨道宽度与两处偏移,加 nowrap;实测日期单行(高度 20px)且圆点与卡片对齐
P2 交付可见破形:
- 关于页「关于我」行首 emoji 在无彩色 emoji 字体的环境渲染成黑方块:
正文行首 emoji 全部去掉(改纯文字段落),并给 --font-serif/--font-sans
链尾补 Apple/Segoe/Noto emoji 回退——用户内容里的 emoji(瞬间、书评)
同样不再落豆腐块
移动端导航两字折行(开/源、文/章):
- ≤450px 的 overflow-x 内滚从未生效:flex 子项默认可压缩,中文词被压到就地
折行。给 nav ul > li 加 flex:none + .nav-link nowrap;实测 360/390/430
三档全部单行(Range.getClientRects 计数逐项验证)
灰阶纪律:
- 项目墙原来按 GitHub linguist 给每个仓染语言色点,开源页铺 15 个仓 = 15 种
彩色,破「外壳灰阶、彩色只作正文强调」红线 → 统一改灰阶点,语言靠文字承载
- 语言占比并列(Python/TypeScript 各 36%)只有第一名着色,读起来像谁领先 →
判定改为「百分比等于最大值者一并着色」
版式与文案细节:
- prose 标题到正文比 tracks 多一档(16+16=32 vs 16)→ .sec-title + .prose-body
margin-top: 0
- 开源页 bio 破折号贴链接(`blog—— Astro`)→ 破折号前补空格
- 页脚 built from<hash> 缺空格(Astro 吃掉换行处空白)→ 显式 {' '}
- 新增一条真实瞬间(含青色楷体富文本)替代只有占位串的样本,让评论区与标签行
的间距可在真实数据下验收
验证: 构建 51 页 exit 0;content-lint 51 页 0/0/0;E2E **46/46 PASS**;
390px 四页 scrollWidth == innerWidth(无横向滚动);
导航 360/390/430 全部单行;日期单行;config-check 全过
Spec: 2026-11-02_blog-5h-content-social (视觉修复)
Co-authored-by: GLM-5.3
This commit is contained in:
1 parent
0b0307b12f
commit
d4fe273812
10 files changed
+56
-23
No files matched your search
@@ -165,8 +165,11 @@ const iso = (d: Date) => d.toISOString();
|
||||
}
|
||||
/* 时间线骨架:左 mono 日期 + 竖线 + --accent 节点 + 右侧内容卡 */
|
||||
.tl-item {
|
||||
/* 日期轨宽度集中一处:10 字符 mono 日期(2026-04-29)在 12.5px 下约 75px,
|
||||
原来复用 var(--space-5)=40px 导致在「-」处折成两行(视觉终审 P1) */
|
||||
--tl-rail: 5.4rem;
|
||||
position: relative;
|
||||
margin: 0 0 var(--space-4) calc(var(--space-5) + var(--space-4));
|
||||
margin: 0 0 var(--space-4) calc(var(--tl-rail) + var(--space-4));
|
||||
padding-left: var(--space-4);
|
||||
border-left: 1px solid var(--line);
|
||||
}
|
||||
@@ -184,9 +187,10 @@ const iso = (d: Date) => d.toISOString();
|
||||
}
|
||||
.tl-date {
|
||||
position: absolute;
|
||||
left: calc(-1 * (var(--space-5) + var(--space-4)));
|
||||
left: calc(-1 * (var(--tl-rail) + var(--space-4)));
|
||||
top: 4px;
|
||||
width: var(--space-5);
|
||||
width: var(--tl-rail);
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12.5px;
|
||||
|
||||
Reference in new issue
Block a user