fix(opensource): 项目墙卡片左对齐与 bio 间隙兜底(视觉终审二轮)
Finding 1(P1)项目墙卡片内容被居中:
- 根因是全局 `.tap { display:inline-flex; align-items:center; justify-content:center }`
沿列向 flex 的交叉轴生效,`.repo`(scoped)只赢下 display 没接管 align-items,
于是标题与「● 语言 ★ n」行落在卡中部、卡片间左缘参差
- `.repo` 显式 align-items: stretch + text-align: left;实测四张卡的
.repo-name 与 .repo-meta 左缘全部 313px(= 卡左 296 + 内距 16 + 边框 1)
Finding 2(P2)bio 破折号间隙修在数据不在模板:
- 原靠 opensource.yaml 串前导空格产生间隙,后台清空走兜底串时缺陷回归
- 模板改为 `{a}{' '}{blurbAfter.trim()}`:间隙由模板保证,数据怎么改都不会贴链接
验证: 构建 51 页 exit 0;content-lint 0/0/0;spec_verify 七项 exit=0(新指纹
62086ce4cccd);check 收敛;DOM 实测对齐与间隙均符合预期
Spec: 2026-11-02_blog-5h-content-social (视觉终审二轮)
Co-authored-by: GLM-5.3
This commit is contained in:
1 parent
c7d1e7b975
commit
bdaf02f9ca
3 files changed
+12
-1
No files matched your search
@@ -67,7 +67,7 @@ const L = {
|
||||
wait4x<span class="pf-handle mono">@wait4xx</span>
|
||||
</p>
|
||||
<p class="pf-bio">
|
||||
{copy.blurb}<a class="pf-link" href={copy.repoUrl}>{copy.repoLabel}</a>{copy.blurbAfter}
|
||||
{copy.blurb}<a class="pf-link" href={copy.repoUrl}>{copy.repoLabel}</a>{' '}{copy.blurbAfter.trim()}
|
||||
</p>
|
||||
<ul class="pf-socials">
|
||||
{socials.map((s) => (
|
||||
|
||||
@@ -73,6 +73,10 @@ try {
|
||||
.repo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* 显式接管交叉轴:全局 .tap 是 inline-flex + align-items:center,
|
||||
列向 flex 下会把标题/元信息行水平居中(视觉终审 P1,卡片左缘参差) */
|
||||
align-items: stretch;
|
||||
text-align: left;
|
||||
gap: 2px;
|
||||
padding: var(--space-3);
|
||||
border: 1px solid var(--line);
|
||||
|
||||
Reference in new issue
Block a user