wait4xandGLM-5.3
cfe508ff14
视觉终审对开源页改版判「需修」，逐条修完并量化复验。
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
105 lines
6.1 KiB
XML
105 lines
6.1 KiB
XML
<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>
|
|
|
|
|
|
</style>
|
|
<defs>
|
|
<clipPath id='outer_rectangle'>
|
|
<rect width='495' height='195' rx='4.5'/>
|
|
</clipPath>
|
|
<mask id='mask_out_ring_behind_fire'>
|
|
<rect width='495' height='195' fill='white'/>
|
|
<ellipse id='mask-ellipse' cx='247.5' cy='32' rx='13' ry='18' fill='black'/>
|
|
</mask>
|
|
|
|
</defs>
|
|
<g clip-path='url(#outer_rectangle)'>
|
|
<g style='isolation: isolate'>
|
|
<rect stroke='#000000' stroke-opacity='0' fill='#000000' fill-opacity='0' rx='4.5' x='0.5' y='0.5' width='494' height='194'/>
|
|
</g>
|
|
<g style='isolation: isolate'>
|
|
<line x1='165' y1='28' x2='165' y2='170' vector-effect='non-scaling-stroke' stroke-width='1' stroke='#E4E2E2' stroke-linejoin='miter' stroke-linecap='square' stroke-miterlimit='3'/>
|
|
<line x1='330' y1='28' x2='330' y2='170' vector-effect='non-scaling-stroke' stroke-width='1' stroke='#E4E2E2' stroke-linejoin='miter' stroke-linecap='square' stroke-miterlimit='3'/>
|
|
</g>
|
|
<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: 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='#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='#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>
|
|
</g>
|
|
<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: 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='#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: 1'></circle>
|
|
</g>
|
|
<!-- Fire icon -->
|
|
<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' >
|
|
0
|
|
</text>
|
|
</g>
|
|
|
|
</g>
|
|
<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: 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='#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='#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>
|
|
</g>
|
|
|
|
</g>
|
|
</svg>
|