diff --git a/frontend/src/routes/home3/+page.svelte b/frontend/src/routes/home3/+page.svelte index daa65f3..d04b7b3 100644 --- a/frontend/src/routes/home3/+page.svelte +++ b/frontend/src/routes/home3/+page.svelte @@ -7,6 +7,7 @@ // prototype (noindex), alongside /home2 so we can compare. let news = $state(null); // {id, title, summary, image} let art = $state(null); // {title, artist, year, image} + let newsFit = $state('cover'); // 'cover' = full-bleed photo; 'contain' = framed-plate figure // headline truncated on a whole-word boundary (no mid-word ellipsis) function clampWords(s, max = 48) { @@ -38,6 +39,15 @@ try { const it = (await getJSON(`/api/brief?limit=1${homeq}`))?.items?.[0]; if (it) news = { id: it.id, title: it.title, summary: it.summary || it.description || '', image: it.image_url || null }; + // Photos display full (cover); only wide/tall figures (diagrams) get the framed plate. + if (news?.image) { + const probe = new Image(); + probe.onload = () => { + const a = probe.naturalWidth / probe.naturalHeight; + newsFit = a >= 0.85 && a <= 1.9 ? 'cover' : 'contain'; + }; + probe.src = news.image; + } } catch { /* fall back to design copy */ } }); @@ -107,7 +117,7 @@
-
+
@@ -288,18 +298,20 @@ background: #fff; border: 1px solid var(--news-border); display: flex; flex-direction: column; box-shadow: 0 6px 20px -14px rgba(0, 131, 173, 0.4); } - /* soft tinted matte + white framed plate: figures sit whole with breathing room, like a - framed plate (not pillarboxed). The image is contained inside the white plate. */ - .news-photo { - aspect-ratio: 5/4; background: linear-gradient(160deg, #eaf2f3, #eef0ea); + /* Photos fill edge-to-edge (cover, no box). Only figures/diagrams (detected by their + wide/tall shape) get the soft tinted matte + white framed plate, so labels stay whole. */ + .news-photo { aspect-ratio: 5/4; } + .news-plate { background-position: center; background-repeat: no-repeat; } + .news-photo.cover .news-plate { width: 100%; height: 100%; background-size: cover; } + .news-photo.contain { + background: linear-gradient(160deg, #eaf2f3, #eef0ea); display: flex; align-items: center; justify-content: center; padding: 20px; } - .news-plate { + .news-photo.contain .news-plate { width: 100%; height: 100%; box-sizing: border-box; padding: 12px; background-color: #fff; border: 1px solid #e7edee; border-radius: 8px; box-shadow: 0 6px 18px -10px rgba(30, 60, 70, 0.28); - background-size: contain; background-position: center; background-repeat: no-repeat; - background-origin: content-box; + background-size: contain; background-origin: content-box; } .news-body { padding: 24px 26px; flex: 1; display: flex; flex-direction: column; } .news h2 {