From d4fe273812298609b1440b48059ef3c85ad29ab0 Mon Sep 17 00:00:00 2001 From: wait4xx Date: Mon, 2 Nov 2026 20:56:00 +0800 Subject: [PATCH] =?UTF-8?q?fix(visual):=20=E4=BF=AE=E8=A7=86=E8=A7=89?= =?UTF-8?q?=E7=BB=88=E5=AE=A1=E7=9A=84=E6=8A=98=E8=A1=8C/=E8=B1=86?= =?UTF-8?q?=E8=85=90=E5=9D=97=E4=B8=8E=E7=81=B0=E9=98=B6=E7=BA=AA=E5=BE=8B?= =?UTF-8?q?=E8=BF=9D=E8=A7=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 视觉终审（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 缺空格（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 --- content/moments/2026-11-02.md | 10 ++++++++++ content/site/about.yaml | 12 ++++++------ content/site/opensource.yaml | 4 ++-- src/components/Header.astro | 4 ++++ src/components/blocks/Prose.astro | 3 +++ src/components/geek/BuildInfo.astro | 2 +- src/components/geek/GithubProfile.astro | 7 +++++-- src/components/geek/ProjectWall.astro | 19 ++++++++++++------- src/components/pages/MomentsPage.astro | 10 +++++++--- src/styles/tokens.css | 8 ++++++-- 10 files changed, 56 insertions(+), 23 deletions(-) create mode 100644 content/moments/2026-11-02.md diff --git a/content/moments/2026-11-02.md b/content/moments/2026-11-02.md new file mode 100644 index 0000000..a99811c --- /dev/null +++ b/content/moments/2026-11-02.md @@ -0,0 +1,10 @@ +--- +pubDate: 2026-11-02 +tags: [站点更新] +text: | + 瞬间现在和文章同级表达力：`text` 支持 markdown 与排版类，这一句是青色 + 楷体，也可以**加粗**。 + + 另外每条瞬间自带评论区——展开才加载，不刷时间线就不为它付成本。 +--- + +站点更新记录：瞬间富文本与逐条评论上线。 diff --git a/content/site/about.yaml b/content/site/about.yaml index 0be8622..83c5740 100644 --- a/content/site/about.yaml +++ b/content/site/about.yaml @@ -70,19 +70,19 @@ blocks: zh: | 气象是我起点的专业——一个想做预报的人，依旧把云图当日常读物。 - 💻 写代码是第二条主线：Linux、容器、自托管，把日常工具一件件磨顺手。 + 写代码是第二条主线：Linux、容器、自托管，把日常工具一件件磨顺手。 - 🌐 作品大多在 [wait4x.online](https://wait4x.online/)。 + 作品大多在 [wait4x.online](https://wait4x.online/)。 - ⚡ 信条：**拥抱开源，热爱开源**。 + 信条：**拥抱开源，热爱开源**。 en: | Meteorology is where I started — an aspiring forecaster who still reads weather charts for fun. - 💻 Coding is the second thread: Linux, containers, self-hosting — polishing everyday tools one by one. + Coding is the second thread: Linux, containers, self-hosting — polishing everyday tools one by one. - 🌐 Most of my work lives at [wait4x.online](https://wait4x.online/). + Most of my work lives at [wait4x.online](https://wait4x.online/). - ⚡ Motto: **embrace open source, love open source**. + Motto: **embrace open source, love open source**. - type: linklist title: diff --git a/content/site/opensource.yaml b/content/site/opensource.yaml index da5eb7f..fe7a110 100644 --- a/content/site/opensource.yaml +++ b/content/site/opensource.yaml @@ -4,8 +4,8 @@ blurb: repo_url: https://git.wait4x.online/wait4x/blog repo_label: git.wait4x.online/wait4x/blog blurb_after: - zh: —— Astro SSG、双写作流、构建发布全链皆在仓中。以下是我在自托管 gitea 与 GitHub 上的全部公开仓库，以及最近一年的贡献活动。 - en: — the Astro SSG, dual-writing workflow, and the full build & deploy pipeline live in the repo. Below are all my public repositories on self-hosted gitea and GitHub, plus contributions from the past year. + zh: ' —— Astro SSG、双写作流、构建发布全链皆在仓中。以下是我在自托管 gitea 与 GitHub 上的全部公开仓库，以及最近一年的贡献活动。' + en: ' — the Astro SSG, dual-writing workflow, and the full build & deploy pipeline live in the repo. Below are all my public repositories on self-hosted gitea and GitHub, plus contributions from the past year.' # ---- 项目墙可见性与排序（后台「开源页」可改；留空/缺省 = 现状） ---- # mode: all=全部（默认） | only=仅 include 列出 | exclude=排除 exclude 列出 diff --git a/src/components/Header.astro b/src/components/Header.astro index cbd5d0a..54c4adb 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -154,6 +154,10 @@ const switchLabel = curLocale === 'zh' ? 'EN' : '中'; 阈值 350→450（E 车道 6 项后 en 词长实测：360-430px 页溢 42-51px；zh 无感知） */ @media (max-width: 450px) { nav ul { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } + /* 视觉终审 P1：flex 子项默认可压缩，中文词被压到就地折成两行（开/源）， + overflow-x 永远不触发。钉死不许压缩 + 不许换行，内滚才真正接管 */ + nav ul > li { flex: none; } + .nav-link { white-space: nowrap; } nav { min-width: 0; } .header-inner { flex-wrap: nowrap; } /* 中段再收一档地板（en 五词在 360-430 差 55-61px）：字号 11px 下限仍可读， diff --git a/src/components/blocks/Prose.astro b/src/components/blocks/Prose.astro index a3eb237..d293d27 100644 --- a/src/components/blocks/Prose.astro +++ b/src/components/blocks/Prose.astro @@ -27,6 +27,9 @@ const { block } = Astro.props; margin-top: var(--space-3); } .prose-body.full { max-width: none; } + /* 标题下正文不再叠一档 margin：同级标题到内容统一 16px（tracks 块实测 16px， + prose 原来 16+16=32，两块相邻时节奏不齐——视觉终审） */ + .sec-title + .prose-body { margin-top: 0; } .prose-body :global(p) { margin-block: 0 var(--space-2); } .prose-body :global(ul) { margin: var(--space-1) 0 var(--space-2); diff --git a/src/components/geek/BuildInfo.astro b/src/components/geek/BuildInfo.astro index 3dcacf8..90f2dec 100644 --- a/src/components/geek/BuildInfo.astro +++ b/src/components/geek/BuildInfo.astro @@ -7,7 +7,7 @@ const commitUrl = `https://git.wait4x.online/wait4x/blog/commit/${sha}`; ---

- built from + built from{' '} {short === 'dev' ? dev : {short}} · {new Date(date).toISOString().slice(0, 16).replace('T', ' ')}Z · Astro

diff --git a/src/components/geek/GithubProfile.astro b/src/components/geek/GithubProfile.astro index ce4372f..66b0075 100644 --- a/src/components/geek/GithubProfile.astro +++ b/src/components/geek/GithubProfile.astro @@ -45,6 +45,9 @@ try { console.warn('[profile] 仓库数据不可用，语言占比与星标汇总已隐藏'); } +// 并列判定用百分比最大值（四舍五入后并列很常见：Python/TS 各 36%）： +// 只给第一根上强调色会让并列者显得"落后"，故并列者一并着色 +const maxPct = langs.reduce((m, l) => Math.max(m, l.pct), 0); const stats = await githubUserStats(); const L = { zh: { followers: '关注者', repos: '公开仓库', stars: '总星标', langs: '语言占比' }, @@ -108,8 +111,8 @@ const L = {

{L.langs}

    - {langs.map((l, i) => ( -
  • + {langs.map((l) => ( +
  • {l.name}