Six photo cards in 2 columns (3 rows) at desktop widths; phones collapse to a single full-width column and still show only the first four. Drops the 900px two-column step (now the base) and the cramped-card type overrides that only existed for the 2-up phone grid.
This commit is contained in:
1 parent
7f2680ea92
commit
84b412470b
3 files changed
+5
-17
No files matched your search
@@ -254,7 +254,7 @@ No topics were killed by the user in this sweep.
|
||||
|
||||
### Phase G — Related-posts photo grid (2026-10-20)
|
||||
- ✅ `Related Posts` / `相关文章` went from 4 text-only cards to **6 cards carrying each post's own share card**: `ogImage` per post means the EN page shows `/og/<slug>.jpg` and the ZH page `/og/zh-<slug>.jpg` — no cross-language art. Measured in the built HTML: 6 `<img class="related-thumb">`, all 6 files 200, ZH page resolves all 6 to `zh-` files.
|
||||
- Layout: 3 across (>900px), 2 across (≤900px), and on ≤600px the same 2 columns show only the **first 4** (`.related-extra` hidden, `i >= 4` in `[...slug].astro`). Read-time span (`.related-read`) is dropped on phones so the date fits a 160px card.
|
||||
- Layout: **2 across on desktop**, **1 across on phones** (≤600px), where only the **first 4** cards are shown (`.related-extra` hidden, `i >= 4` in `[...slug].astro`). The 3-across version was tried first and reverted same day — two-up at 1200px keeps the baked-in OG type readable.
|
||||
- Verified with headless Chrome by injecting the built `<section class="related">` + built CSS into a probe at 1264 / 884 / 500 px: `gridTemplateColumns` = 3 / 2 / 2 columns, visible cards 6 / 6 / 4, `scrollWidth == clientWidth` everywhere (no overflow), 6/6 images decoded.
|
||||
- ⚠ Headless `--window-size=390` is silently clamped to **500** on Windows — the right-hand column looks clipped in the screenshot, but that is the capture, not the layout. Verify <500px by putting the probe in a 390px `<iframe>` and screenshotting that.
|
||||
- ⚠ `--virtual-time-budget` can expire before lazy images paint (5 of 6 cards came out as empty `var(--border)` rectangles at budget 6000). Use ≥20000 before declaring an image broken.
|
||||
|
||||
Reference in new issue
Block a user