From 5d36e6b63942c938d9d851b1905584fcdb87f570 Mon Sep 17 00:00:00 2001 From: jay Date: Tue, 9 Jun 2026 15:55:14 -0400 Subject: [PATCH] Cards: tighter media on phones (single-column) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit On phones the feed is a single column, so the banner no longer needs to keep a uniform grid height. Below 540px: trim photo banners (16/9 → 2/1) and shrink image-less placeholders to a slim 54px topic-label band. Desktop/2-column unchanged (uniform heights still matter there). Co-Authored-By: Claude Opus 4.8 (1M context) --- frontend/src/lib/components/ArticleCard.svelte | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/frontend/src/lib/components/ArticleCard.svelte b/frontend/src/lib/components/ArticleCard.svelte index f82b6db..d46b9d4 100644 --- a/frontend/src/lib/components/ArticleCard.svelte +++ b/frontend/src/lib/components/ArticleCard.svelte @@ -373,4 +373,13 @@ .hero h3, .herotype h3 { font-size: 1.6rem; } .herotype .body { padding: 30px 24px; } } + + /* On phones the feed is a single column, so the banner no longer carries the + job of keeping a uniform grid height. Trim photos to reclaim vertical + space, and shrink image-less placeholders to a slim topic label band. */ + @media (max-width: 540px) { + .tile .media { aspect-ratio: 2 / 1; } + .tile .media.placeholder { aspect-ratio: auto; height: 54px; } + .tile .media.placeholder .ph-word { font-size: 1.15rem; } + }