wait4x/blog
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(opensource): 修视觉终审的四个 P1 与灰阶/对齐细节

Browse Source 
视觉终审对开源页改版判「需修」，逐条修完并量化复验。

P1-1 数据板空档与三段右缘不齐：streak 只占半栏、snake 通栏 → 右侧空 306px。
- 网格改 `repeat(auto-fit, minmax(320px, 1fr))`，仅一张非通栏卡时加 `.pf-card-solo`
  （`grid-column: 1/-1`），语言条去掉 max-width
- 实测：统计行/语言条/数据板右缘统一 959px，streak 卡宽 298→638

P1-2 卡内 SVG 文字不可读：streak 固有 495px 被压到 298px（0.6×），14px 标签变 8.4px。
- 卡改全宽后 1:1 渲染（实测 rendered=495=natural）；抓取参数把次级灰换成站点 ink：
  亮色 #3f424a（10.05:1）、暗色 #b9bec8（9.07:1），旧值 #9aa0aa 仅 2.63:1

P1-3 移动端打字机折行推挤：390 下第 4 句 260px > 可用 230px 必折两行，
min-height:1.6em 挡不住 → 每轮下推 21px 再弹回。
- `@media(max-width:560px){.typing{min-height:calc(1.6em*2)}}`（实测 42px 恒定零推挤）
- 光标收成 2px 竖条 + baseline 对齐（原来是 0.5em 实心块，两行时被拉到行间）
- typing 第 4 句裁短（中文 ≤16 字、英文 ≤36 字符）

P1-4 streak 卡入场动画空壳帧：SVG 内 fadein 序列（环 0.4s/数字 0.6s/…/1.2s）+ lazy
加载 → 用户先看到 0.5–1.5s 半成品，截图也会随机拍到空卡。
- 抓取脚本新增 freezeAnimations()：剥掉全部 animation 声明、opacity:0 改 1、
  删除 @keyframes；重抓后 grep animation:/opacity: 0 均为 0（streak 各 6KB、
  snake 35KB→20KB）

P2 一并：
- streak 亮色容器 grayscale(1) 回到灰阶基调；暗色蛇卡改 grayscale+invert+contrast+
  brightness 组合，空网格不再与底色同色
- 项目墙描述 text-wrap: pretty（长描述末行孤词）
- 统计口径注释改为「三格」，不硬塞第 4 格（贡献数已由热力图承载）
- 社交图标行负 margin 做光学对齐

附：content-lint 增加 SKIP_ALL 白名单（一次性预览路由 /books-preview/ 无 en 对应页，
语言切换链接会误报断链+配对缺）

验证: 构建 51 页 exit 0；content-lint 54 页 0/0/0；E2E 46/46；
      Playwright 实测三段右缘 959 一致、streak 1:1、1280/390 零横向溢出、
      移动打字机高度 42px 恒定、光标 2px、项目墙 text-wrap=pretty

Spec: 2026-11-02_blog-5i-fonts-polish (T8 修复)

Co-authored-by: GLM-5.3
This commit is contained in:
wait4xandGLM-5.3 committed 2026-11-03 11:48:25 +08:00
1 parent 907f64472a
commit cfe508ff14
10 files changed
+96 -62
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/github-assets/streak-dark.svg
+13 -20
View File
@@ -1,15 +1,8 @@
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'
style='isolation: isolate' viewBox='0 0 495 195' width='495px' height='195px' direction='ltr'>
<style>
@keyframes currstreak {
0% { font-size: 3px; opacity: 0.2; }
80% { font-size: 34px; opacity: 1; }
100% { font-size: 28px; opacity: 1; }
}
@keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>
<defs>
<clipPath id='outer_rectangle'>
@@ -32,21 +25,21 @@
<g style='isolation: isolate'>
<!-- Total Contributions big number -->
<g transform='translate(82.5, 48)'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#c9ccd4' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.6s'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#c9ccd4' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' style='opacity: 1'>
344
</text>
</g>
<!-- Total Contributions label -->
<g transform='translate(82.5, 84)'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#9aa0aa' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='14px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.7s'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#b9bec8' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='14px' font-style='normal' style='opacity: 1'>
Total Contributions
</text>
</g>
<!-- Total Contributions range -->
<g transform='translate(82.5, 114)'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#9aa0aa' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.8s'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#b9bec8' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 1'>
May 24, 2019 - Present
</text>
</g>
@@ -54,31 +47,31 @@
<g style='isolation: isolate'>
<!-- Current Streak label -->
<g transform='translate(247.5, 108)'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#3454d1' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='14px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.9s'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#3454d1' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='14px' font-style='normal' style='opacity: 1'>
Current Streak
</text>
</g>
<!-- Current Streak range -->
<g transform='translate(247.5, 145)'>
<text x='0' y='21' stroke-width='0' text-anchor='middle' fill='#9aa0aa' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 0.9s'>
<text x='0' y='21' stroke-width='0' text-anchor='middle' fill='#b9bec8' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 1'>
Nov 3
</text>
</g>
<!-- Ring around number -->
<g mask='url(#mask_out_ring_behind_fire)'>
<circle cx='247.5' cy='71' r='40' fill='none' stroke='#3454d1' stroke-width='5' style='opacity: 0; animation: fadein 0.5s linear forwards 0.4s'></circle>
<circle cx='247.5' cy='71' r='40' fill='none' stroke='#3454d1' stroke-width='5' style='opacity: 1'></circle>
</g>
<!-- Fire icon -->
<g transform='translate(247.5, 19.5)' stroke-opacity='0' style='opacity: 0; animation: fadein 0.5s linear forwards 0.6s'>
<g transform='translate(247.5, 19.5)' stroke-opacity='0' style='opacity: 1'>
<path d='M -12 -0.5 L 15 -0.5 L 15 23.5 L -12 23.5 L -12 -0.5 Z' fill='none'/>
<path d='M 1.5 0.67 C 1.5 0.67 2.24 3.32 2.24 5.47 C 2.24 7.53 0.89 9.2 -1.17 9.2 C -3.23 9.2 -4.79 7.53 -4.79 5.47 L -4.76 5.11 C -6.78 7.51 -8 10.62 -8 13.99 C -8 18.41 -4.42 22 0 22 C 4.42 22 8 18.41 8 13.99 C 8 8.6 5.41 3.79 1.5 0.67 Z M -0.29 19 C -2.07 19 -3.51 17.6 -3.51 15.86 C -3.51 14.24 -2.46 13.1 -0.7 12.74 C 1.07 12.38 2.9 11.53 3.92 10.16 C 4.31 11.45 4.51 12.81 4.51 14.2 C 4.51 16.85 2.36 19 -0.29 19 Z' fill='#3454d1' stroke-opacity='0'/>
</g>
<!-- Current Streak big number -->
<g transform='translate(247.5, 48)'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#c9ccd4' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' style='animation: currstreak 0.6s linear forwards'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#c9ccd4' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' >
0
</text>
</g>
@@ -87,21 +80,21 @@
<g style='isolation: isolate'>
<!-- Longest Streak big number -->
<g transform='translate(412.5, 48)'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#c9ccd4' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 1.2s'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#c9ccd4' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='700' font-size='28px' font-style='normal' style='opacity: 1'>
6
</text>
</g>
<!-- Longest Streak label -->
<g transform='translate(412.5, 84)'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#9aa0aa' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='14px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 1.3s'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#b9bec8' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='14px' font-style='normal' style='opacity: 1'>
Longest Streak
</text>
</g>
<!-- Longest Streak range -->
<g transform='translate(412.5, 114)'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#9aa0aa' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 0; animation: fadein 0.5s linear forwards 1.4s'>
<text x='0' y='32' stroke-width='0' text-anchor='middle' fill='#b9bec8' stroke='none' font-family='"Segoe UI", Ubuntu, sans-serif' font-weight='400' font-size='12px' font-style='normal' style='opacity: 1'>
Oct 19 - Oct 24
</text>
</g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 6.1 KiB