| commit 53a51e97f8ed015e7d5ad0e1afc2ef3ab36e50b8 parent de7ce867449aeb946b35c6cbf08b2fb90a750182 Author: sqzer <110329244+sqzer-x@users.noreply.github.com> Date: Wed, 5 Aug 2026 18:00:45 +0900 The featured card fills its own box Measured against the reference at 1440: their text block occupies 70% of the label half with 64px of air above and below. Ours occupied 37%, with 96px. The complaint was that our box is not roomy, and the cause was the opposite of what that sounds like — three short lines stranded in the middle of a much taller rectangle. More padding alone would have made it worse. Four things fill it. The block gets a fourth line, "Read post", underlined like the doors elsewhere on this page, which gives the type a bottom edge instead of leaving the description hanging in mid-air. The title steps up to 2.35rem and takes text-wrap: pretty rather than balance, because balance minimises line count and line count is where a text block gets its mass. Internal gaps go 0.6 to 1.15rem and padding to 3.4vw, which is the reference's 43px at this width. The block is 198px now against 184 before, and it is anchored rather than floating. The writing room widens from the reading measure to the full one. The card was 950px while the project grid directly beneath it was 1235 — the narrowest block on the page, overhung by 142px on each side, which reads as pinched whatever its padding says. Both are 1235 now. The reading measure was the right container for a ledger of prose and the wrong one for a two-column picture card; the ledger keeps it on /posts/. The media's min-height goes. It was clamp(11rem, 20vw, 15rem) and it never once bound: the width and height attributes already state 16:9, so that ratio is the row's floor at every width, and the label wins whenever it is taller. A rule that cannot fire is worse than no rule, because the next person reads it as the thing controlling the height. Two things I looked at and did not do. Narrowing the project grid to match the card instead drops it from three columns to two and doubles the section's height. And the label's air grows with the card — 100px each side at 1235 against 61 at 950 — which is the price of the wider card; it reads as margin rather than void because the block beneath it is anchored and the picture beside it is large, but it is a real trade and a longer title is what would close it. Diffstat:
|
www~ Personal site — projects, posts, about. Built with sqzass. |
| git clone https://github.com/debuman/www.git |