Improve news card image framing and text alignment#987
Draft
RisingOrange wants to merge 7 commits into
Draft
Conversation
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.
👷 Deploy request for pauseai pending review.Visit the deploys page to approve it
|
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.
Resolve NewsCard.svelte image conflict: combine the source-based object-fit (cover internal / contain external) with main's new Image aspectRatio prop, updating it to 1200/628 to match the new card image frame.
RisingOrange
added a commit
to RisingOrange/pauseai-website
that referenced
this pull request
Jul 18, 2026
RisingOrange
marked this pull request as ready for review
July 18, 2026 12:52
RisingOrange
marked this pull request as draft
July 18, 2026 13:12
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.
RisingOrange
changed the title
RisingOrange
added a commit
to RisingOrange/pauseai-website
that referenced
this pull request
Jul 18, 2026
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.
RisingOrange
marked this pull request as ready for review
July 18, 2026 14:10
Collaborator
|
The screenshots looks very different from what I get in production (font etc), why is that? |
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.
RisingOrange
added a commit
to RisingOrange/pauseai-website
that referenced
this pull request
Jul 21, 2026
RisingOrange
marked this pull request as draft
July 21, 2026 21:00
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Two related improvements to the news cards: images are no longer cropped, and card text lines up across a row.
Image framing
The cards used
aspect-ratio: 16/10withobject-fit: coverfor every image, cropping the edges of anything that wasn't already a matching landscape shape — posters, charts and Substack banners lost content.Following the existing post-banner design system (#702), which standardizes internal post images to a curated
1200/628crop:aspect-ratio: 1200 / 628to match the post banner ratio.object-fit: cover— they're curated to frame well at this ratio. TheirImageaspectRatiohint is updated to1200/628so the responsivesizesmath stays accurate.object-fit: contain, so charts, posters and tall portraits show in full instead of being cropped.--bg-subtlebackground so the contained letterbox blends with the card body.scale(1.03)) is scoped to cover-cropped images only — zooming a contained image would re-crop it underoverflow: hidden.Text alignment
Titles run from one to three lines, so each card's description started at a different height and short titles left a gap above their description.
-webkit-line-clampneedsdisplay: -webkit-box, which can't coexist with the flex centering. The title area is a column flex so the loading skeleton bars still stack.Before / After
These are real screenshots of the running site (dev server, live news data, actual fonts and theme) — not mockups.
In before: PauseCon's wordmark is clipped, Fable 5 is cut off on both sides, the chart and portraits are cropped, and the row-1 descriptions ("Apply now" / "Hundreds of…" / "The US reaction…") sit at three different heights. In after: images show in full and the descriptions line up.
Before:
After:
Verification
pnpm check— 0 errors;pnpm _lint:knip— passes; eslint cleanobject-fit: containresolves correctly for external images inside NetlifyImage's<picture>wrapper, that no title is truncated, and that the loading skeleton still stacks.