fix(listing): make the mobile archive reachable and clear the AA misses
Deploy / build (push) Successful in 33s
Deploy / build (push) Successful in 33s
Review pass on the 041471d delivery, measured rather than eyeballed.
/posts/ on a phone put its first archive row 2.36 screens down (featured block
1235 px + 435 px of controls = row at 1996 px at 390x844), so a reader who came
to browse had to scroll past three stacked 16:9 cards. Below 700 px the cards are
now horizontal — thumb 38 %, excerpt dropped, title clamped to three lines — and
the block header carries `All 91 posts ↓` into #archive-list (with scroll-margin
for the sticky header), which doubles as the bypass-block affordance. Block
1235 → 523 px, card 392 → 153 px, first row 1996 → 1309 px.
Two new small-text colours measured under WCAG AA (.feat-min 3.04:1,
.archive-status 3.67:1 at ~12 px) move to --muted → 5.78:1 and 6.99:1. The
featured heading went with them; pre-existing --faint dates (3.67:1) were left
alone rather than restyling 91 rows.
/categories/ still showed the old Gemini case-studies.webp while the category
page had the new topology banner — one category, two art languages. The tile now
uses case-studies-banner-1200.webp (14 KB) letterboxed on #0b1613: a 16:9 centre
crop sliced the outer host panels in half, the letterbox was measured seamless.
`6min read` was emitted without its space (template-literal fix → `6 min read`,
`6 分钟`, verified in dist/). Both /posts/ ledes stopped claiming the page is
purely newest-first.
probe-layout: 72/72 viewport checks, collapse still 425→0→425 (1280) and
523→0→523 (390) in EN and ZH.
This commit is contained in:
1 parent
050d73305d
commit
4e64bfc9ae
7 files changed
+124
-17
No files matched your search
@@ -464,6 +464,33 @@ reports **72/72** page×viewport checks with `scrollWidth == clientWidth`, plus
|
||||
stops breaking; the nav gained `aria-current="page"` (it had no active state at all).
|
||||
- **Docs:** `scripts/probe-layout.mjs` is committed as the repeatable gate for this class of bug.
|
||||
|
||||
### 4e-bis. Review pass on the delivery (same day) — what measurement changed
|
||||
|
||||
An independent read of the shipped pages turned up four things the first pass missed. Fixed, remeasured:
|
||||
|
||||
- **Mobile archive was 2.4 screens away from its own list.** At 390×844 the featured block ran
|
||||
688→1923 px (3 × 392 px stacked cards) plus 435 px of controls, so the first `2026` row sat at
|
||||
**1996 px = 2.36 screens** — a reader who came to browse had to scroll past everything.
|
||||
Below 700 px each featured card is now horizontal (thumb 38 %, excerpt dropped, title clamped to
|
||||
three lines): card 392 → **153 px**, block 1235 → **523 px**, first row at **1309 px = 1.55
|
||||
screens**. The block header gained `All 91 posts ↓` (→ `#archive-list`, `scroll-margin-top`
|
||||
clears the sticky header), which doubles as the bypass-block affordance.
|
||||
- **Two new small-text colours failed WCAG AA.** Measured against their own backgrounds:
|
||||
`.feat-min` **3.04:1** and `.archive-status` **3.67:1** (`--faint`), where AA wants 4.5:1 under
|
||||
18.66 px. Both moved to `--muted` → **5.78:1** and **6.99:1**; the featured block's own heading
|
||||
moved with them. Pre-existing `--faint` dates (3.67:1) were left alone rather than restyling 91 rows.
|
||||
- **One category, two art languages.** `/categories/` still showed the old Gemini
|
||||
`/categories/case-studies.webp` while the category page had the new 21:9 topology banner.
|
||||
The tile now points at `case-studies-banner-1200.webp` (14 KB) and letterboxes it
|
||||
(`object-fit: contain` on `#0b1613`, measured seamless) instead of centre-cropping — a 16:9 crop
|
||||
sliced the outer host panels in half.
|
||||
- **`6min read` had no space.** `{f.minutes} {labels.minutes}` inside the nested `feat-cta` span is
|
||||
emitted without the separating space (the same pattern elsewhere in the repo *does* keep it, so
|
||||
this is compiler-adjacent, not universal). Replaced with a template literal → `6 min read` /
|
||||
`6 分钟`, verified in `dist/`.
|
||||
|
||||
`/posts/` and `/zh/posts/` ledes no longer claim the page is purely newest-first.
|
||||
|
||||
## 5. Conventions (non-negotiable)
|
||||
|
||||
- Push git.hoelee.com first, then GitHub
|
||||
|
||||
Reference in new issue
Block a user