diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index 5d6d3c8..d67e2c0 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -132,6 +132,7 @@ newsImgOk = true; }; probe.onerror = () => { if (++tries <= 2) setTimeout(load, 500 * tries); }; + probe.referrerPolicy = 'no-referrer'; // match the below: don't leak the referrer to the publisher CDN probe.src = url; }; load(); @@ -195,7 +196,8 @@ {#if news?.image && newsImgOk}
-
+ (newsImgOk = false)} />
{:else} @@ -401,8 +403,10 @@ .news-photo { aspect-ratio: 5/4; animation: news-photo-in 0.45s ease both; } @keyframes news-photo-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .news-photo { animation: none; } } - .news-plate { background-position: center; background-repeat: no-repeat; } - .news-photo.cover .news-plate { width: 100%; height: 100%; background-size: cover; } + /* real (referrerpolicy=no-referrer) rather than a CSS background, so the homepage + hero behaves like every other image request. object-fit replaces background-size. */ + .news-plate { display: block; } + .news-photo.cover .news-plate { width: 100%; height: 100%; object-fit: cover; } .news-photo.contain { /* silvery at top, fading down into the card's white so the matte isn't a hard band */ background: linear-gradient(180deg, #e6edef 0%, #f3f6f5 55%, #ffffff 100%); @@ -412,7 +416,7 @@ 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-origin: content-box; + object-fit: contain; /* contained within the content box → the padding reads as a mat */ } /* pictureless fallback: topic word on a soft topic-tinted field, same footprint as the photo */ .news-typo { aspect-ratio: 5/4; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }