| commit 48fd81024925279e6f7e864fee036ceb238dafce parent 81189e7b43b4e14ac964740c70f038dfe649d39b Author: sqzer <110329244+sqzer-x@users.noreply.github.com> Date: Wed, 5 Aug 2026 18:34:01 +0900 The featured card stops being flat Ours was 1235 x 400 = 3.09:1 against the reference's 1123 x 422 = 2.66:1. The card was visibly flatter and that was the whole of the difference in height. The cause: the <video>'s width and height attributes state 16:9, and with no CSS ratio that intrinsic figure became the grid row. So the picture's own file decided the card's proportion. This site's picture ratio is 16:10 — the project frames on /projects/ already use it — and this card was the one place not following it. With aspect-ratio declared, the row is the greater of the label's natural height and the picture's width over 1.6, so a long title still wins and grows the card. 1235 x 464 = 2.66:1, the reference's proportion exactly. The crop is horizontal now, which is the safe direction for this poster: the mandala and the figure are both centred, so what leaves the frame is background. Flat would have cropped vertically, and vertically the first thing to go is her head. The split moves 1.35fr to 1.5fr, near the reference's 1.55, and the title to 49.4px at 1440. That is not a size picked for effect: the label's measure is 401px there and the title now runs 396 of it. A headline that fills its column is why the reference's card reads as a headline and ours read as a caption — theirs runs 353 of 353. Past this size a fifteen-character title breaks in two, which looks forced; a longer one breaks on its own and the card grows with it. What still differs is the one thing no stylesheet reaches. Their label is 87.7% full because their title is thirty-nine characters and wraps to three lines. Ours is 56% full because "A New Beginning" is fifteen and takes one. Below 1000px ours already fills completely, because the column narrows until the title wraps. Diffstat:
|
www~ Personal site — projects, posts, about. Built with sqzass. |
| git clone https://github.com/debuman/www.git |