From 8695e53f6702a74673aa770b4c826e799e2c3a02 Mon Sep 17 00:00:00 2001 From: RisingOrange Date: Sat, 18 Jul 2026 13:52:32 +0200 Subject: [PATCH 1/5] Show news card images without cutting them off Match the card image frame to the 1200/628 post-banner crop and switch image fit by source: internal post images (curated to frame well at that ratio) keep object-fit: cover, while Substack/press images (arbitrary shapes we don't control) use object-fit: contain so charts, posters and banners aren't cropped. The container gets a bg-subtle background so the contained letterbox blends with the card. --- src/lib/components/NewsCard.svelte | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/src/lib/components/NewsCard.svelte b/src/lib/components/NewsCard.svelte index 32891ac79..ee3281099 100644 --- a/src/lib/components/NewsCard.svelte +++ b/src/lib/components/NewsCard.svelte @@ -44,12 +44,12 @@ (hasImageError = true)} /> {:else} - {item.title} + {item.title} {/if} {:else}
@@ -105,18 +105,31 @@ .image-container { width: 100%; - aspect-ratio: 16 / 10; + /* Match the 1200/628 post-banner crop so curated banner images fill the + card the same way they frame the post header. */ + aspect-ratio: 1200 / 628; overflow: hidden; + background: var(--bg-subtle); } .image-container :global(.image) { width: 100%; height: 100%; - object-fit: cover; border-radius: 0; transition: transform 0.3s ease; } + /* Internal post images are curated to frame well at the banner ratio, so + cover-crop them. Substack/press images are arbitrary shapes we don't + control, so contain them to avoid cutting off charts, posters, etc. */ + .image-container :global(.image-cover) { + object-fit: cover; + } + + .image-container :global(.image-contain) { + object-fit: contain; + } + * :global(.news-card:hover .image-container .image) { transform: scale(1.03); } From 6390e76dc3ee82ad78982d4caeda95d491c7a360 Mon Sep 17 00:00:00 2001 From: RisingOrange Date: Sat, 18 Jul 2026 14:06:08 +0200 Subject: [PATCH 2/5] Don't zoom contained images on hover (would re-crop them) The hover scale(1.03) was applied to all card images; for contained (external) images the container's overflow:hidden then clips the enlarged image, cutting off ~1.5% on hover and defeating the point of contain. Scope the zoom to cover-cropped internal images only. --- src/lib/components/NewsCard.svelte | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/lib/components/NewsCard.svelte b/src/lib/components/NewsCard.svelte index ee3281099..3d32019bd 100644 --- a/src/lib/components/NewsCard.svelte +++ b/src/lib/components/NewsCard.svelte @@ -130,7 +130,10 @@ object-fit: contain; } - * :global(.news-card:hover .image-container .image) { + /* Only zoom cover-cropped (internal) images on hover. Zooming a contained + image would re-crop it under the container's overflow:hidden, defeating + the point of showing it in full. */ + * :global(.news-card:hover .image-container .image-cover) { transform: scale(1.03); } From 2cd328b730a28d620ad092eba6a9de9040cfa178 Mon Sep 17 00:00:00 2001 From: RisingOrange Date: Sat, 18 Jul 2026 15:26:07 +0200 Subject: [PATCH 3/5] Align news card subtitles with a fixed, centered title area Titles vary from one to three lines, so subtitles started at different heights across a row. Reserve a fixed two-line title area and vertically center the title within it: subtitles now line up regardless of title length, and short one-line titles no longer leave a gap above the subtitle. The line clamp moves to an inner span because -webkit-line-clamp needs display:-webkit-box, which can't coexist with the flex centering. --- src/lib/components/NewsCard.svelte | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/lib/components/NewsCard.svelte b/src/lib/components/NewsCard.svelte index 2f1acae7b..2aa6f8711 100644 --- a/src/lib/components/NewsCard.svelte +++ b/src/lib/components/NewsCard.svelte @@ -68,7 +68,7 @@ {/if}

- {item?.title} + {item?.title}

{#if loading || item?.subtitle} @@ -170,6 +170,23 @@ line-height: 1.2; margin: 0; text-transform: none; + /* Reserve a fixed two-line area and center the title within it, so every + card's subtitle starts at the same height regardless of title length, + and short one-line titles don't leave a gap above the subtitle. */ + min-height: calc(1.1rem * 1.2 * 2); + display: flex; + align-items: center; + justify-content: center; + } + + /* Clamp lives on the inner element because -webkit-line-clamp needs + display: -webkit-box, which can't coexist with the flex centering above. */ + .card-title-text { + display: -webkit-box; + -webkit-line-clamp: 2; + line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; } .card-outlet { From ad3c0aa94af9bdf5107593c3f65e0259141e4387 Mon Sep 17 00:00:00 2001 From: RisingOrange Date: Sat, 18 Jul 2026 15:49:34 +0200 Subject: [PATCH 4/5] Stack loading title skeleton bars (fix flex regression) The fixed-height title area uses display:flex; making it column so the two loading skeleton bars stack on separate lines again instead of shrinking side-by-side, while keeping the loaded single-line/two-line title vertically centered. --- src/lib/components/NewsCard.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/components/NewsCard.svelte b/src/lib/components/NewsCard.svelte index 2aa6f8711..6385a0a28 100644 --- a/src/lib/components/NewsCard.svelte +++ b/src/lib/components/NewsCard.svelte @@ -175,6 +175,7 @@ and short one-line titles don't leave a gap above the subtitle. */ min-height: calc(1.1rem * 1.2 * 2); display: flex; + flex-direction: column; align-items: center; justify-content: center; } From c1b8bf7846f08fb6a4528f1dc3f82e807ac9a483 Mon Sep 17 00:00:00 2001 From: RisingOrange Date: Tue, 21 Jul 2026 22:33:58 +0200 Subject: [PATCH 5/5] Reserve three title lines so real titles aren't truncated Two lines was enough in a mockup but not with the site's actual condensed heading font, where several real titles need three lines and were being clipped mid-word ("...back i...", "...used to smear..."). Reserve three lines instead; subtitles still align and the clamp only engages for titles longer than that. --- src/lib/components/NewsCard.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/components/NewsCard.svelte b/src/lib/components/NewsCard.svelte index 6385a0a28..6ff5a4895 100644 --- a/src/lib/components/NewsCard.svelte +++ b/src/lib/components/NewsCard.svelte @@ -173,7 +173,7 @@ /* Reserve a fixed two-line area and center the title within it, so every card's subtitle starts at the same height regardless of title length, and short one-line titles don't leave a gap above the subtitle. */ - min-height: calc(1.1rem * 1.2 * 2); + min-height: calc(1.1rem * 1.2 * 3); display: flex; flex-direction: column; align-items: center; @@ -184,8 +184,8 @@ display: -webkit-box, which can't coexist with the flex centering above. */ .card-title-text { display: -webkit-box; - -webkit-line-clamp: 2; - line-clamp: 2; + -webkit-line-clamp: 3; + line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }