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; }