thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home3 news image: photos display full-bleed (cover); only wide/tall figures get the framed plate (aspect-detected on load)

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-22 12:30:12 -04:00
parent 390bf5f43d
commit 6925a6951b
1 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/home3/+page.svelte
+20 -8
View File
@@ -7,6 +7,7 @@
// prototype (noindex), alongside /home2 so we can compare. // prototype (noindex), alongside /home2 so we can compare.
let news = $state(null); // {id, title, summary, image} let news = $state(null); // {id, title, summary, image}
let art = $state(null); // {title, artist, year, 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) // headline truncated on a whole-word boundary (no mid-word ellipsis)
function clampWords(s, max = 48) { function clampWords(s, max = 48) {
@@ -38,6 +39,15 @@
try { try {
const it = (await getJSON(`/api/brief?limit=1${homeq}`))?.items?.[0]; 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 }; 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 */ } } catch { /* fall back to design copy */ }
}); });
</script> </script>
@@ -107,7 +117,7 @@
<main class="bento"> <main class="bento">
<!-- Good News (tall) — a card with TWO links, so it's a div, not a single anchor --> <!-- Good News (tall) — a card with TWO links, so it's a div, not a single anchor -->
<div class="card news"> <div class="card news">
<div class="news-photo"> <div class="news-photo {newsFit}">
<div class="news-plate" style={news?.image ? `background-image:url(${news.image})` : ''}></div> <div class="news-plate" style={news?.image ? `background-image:url(${news.image})` : ''}></div>
</div> </div>
<div class="news-body"> <div class="news-body">
@@ -288,18 +298,20 @@
background: #fff; border: 1px solid var(--news-border); 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); 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 /* Photos fill edge-to-edge (cover, no box). Only figures/diagrams (detected by their
framed plate (not pillarboxed). The image is contained inside the white plate. */ wide/tall shape) get the soft tinted matte + white framed plate, so labels stay whole. */
.news-photo { .news-photo { aspect-ratio: 5/4; }
aspect-ratio: 5/4; background: linear-gradient(160deg, #eaf2f3, #eef0ea); .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; 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; width: 100%; height: 100%; box-sizing: border-box; padding: 12px;
background-color: #fff; border: 1px solid #e7edee; border-radius: 8px; background-color: #fff; border: 1px solid #e7edee; border-radius: 8px;
box-shadow: 0 6px 18px -10px rgba(30, 60, 70, 0.28); box-shadow: 0 6px 18px -10px rgba(30, 60, 70, 0.28);
background-size: contain; background-position: center; background-repeat: no-repeat; background-size: contain; background-origin: content-box;
background-origin: content-box;
} }
.news-body { padding: 24px 26px; flex: 1; display: flex; flex-direction: column; } .news-body { padding: 24px 26px; flex: 1; display: flex; flex-direction: column; }
.news h2 { .news h2 {