Marco/einfach-produktiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Home Blog featured post: stack image-then-text through 1024px, not 640px

Browse Source 
Side-by-side kicked in at sm (640px), squeezing the text column hard on
tablet widths. Moved the breakpoint to lg (1024px), matching the
secondary posts' grid below, which already used lg for the same reason.
This commit is contained in:
Marco
2026-08-25 20:35:53 +00:00
parent 168f17bcef
commit bf48a1561c
1 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Blog.tsx
+10 -7
View File
@@ -32,25 +32,28 @@ export async function Blog() {
{/* Posts grid */}
<RevealGroup className="flex flex-col gap-10 items-start px-[var(--layout-padding-x)] w-full">
{/* Featured post — image on top on Mobile, side-by-side from sm+.
{/* Featured post — image on top through lg (1024px), side-by-side
only from lg+ (was sm+, but that squeezed the text column too
hard on tablet widths — same reasoning as the secondary posts'
grid below, which already used this lg breakpoint).
lg:min-h stretches the row taller on large screens (the image's
sm:h-full and the text column's justify-between both follow) —
lg:h-full and the text column's justify-between both follow) —
without it the card's height was purely driven by the text
column's content, which stays short regardless of viewport
width. */}
<RevealItem className="w-full border border-border rounded-xl overflow-hidden grid grid-cols-1 sm:grid-cols-12 lg:min-h-[26rem] transition-transform duration-300 hover:-translate-y-1">
<div className="relative w-full aspect-video sm:aspect-auto sm:col-span-7 sm:h-full bg-bg-muted">
<RevealItem className="w-full border border-border rounded-xl overflow-hidden grid grid-cols-1 lg:grid-cols-12 lg:min-h-[26rem] transition-transform duration-300 hover:-translate-y-1">
<div className="relative w-full aspect-video lg:aspect-auto lg:col-span-7 lg:h-full bg-bg-muted">
{featured.thumbnail && (
<Image
alt=""
src={featured.thumbnail}
fill
sizes="(min-width: 640px) 58vw, 100vw"
sizes="(min-width: 1024px) 58vw, 100vw"
className="object-cover pointer-events-none"
/>
)}
</div>
<div className="flex flex-col justify-between gap-4 py-4 px-4 sm:pr-4 sm:pl-4 sm:col-span-5 min-w-0">
<div className="flex flex-col justify-between gap-4 py-4 px-4 lg:pr-4 lg:pl-4 lg:col-span-5 min-w-0">
<div className="flex flex-col gap-3">
<div className="flex gap-2 items-center font-semibold text-text-muted text-body uppercase whitespace-nowrap">
<span>{featured.categories.join(", ")}</span>
@@ -64,7 +67,7 @@ export async function Blog() {
>
{featured.title}
</p>
<p className="font-normal text-body leading-6 line-clamp-2 sm:line-clamp-none">
<p className="font-normal text-body leading-6 line-clamp-2 lg:line-clamp-none">
{featured.excerpt}
</p>
</div>