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

Blog secondary post cards: image above text through tablet width

Browse Source 
Was sm:grid-cols-5 — with the 2-up sm:grid-cols-2 outer grid, each
card's own width through 640-1023px was too narrow for image+text
side by side. Now stacks through lg (1024px), row layout only once
each card has real width. Featured post untouched (already fine).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Marco
2026-07-30 21:32:54 +00:00
parent 6262a8ab01
commit ea7f4a4b3b
1 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Blog.tsx
+10 -6
View File
@@ -75,25 +75,29 @@ export async function Blog() {
</div>
</RevealItem>
{/* Secondary posts — image on top on Mobile, side-by-side from sm+ */}
{/* Secondary posts — image on top through lg (1024px), side-by-side
only from lg+. These sit 2-up (sm:grid-cols-2 below) well
before lg, so each card's own available width through the
640-1023px tablet range is too narrow for image+text side by
side — was sm:grid-cols-5, squeezing the text column. */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 w-full">
{secondary.map((post) => (
<RevealItem
key={post.id}
className="border border-border rounded-xl overflow-hidden grid grid-cols-1 sm:grid-cols-5 transition-transform duration-300 hover:-translate-y-1"
className="border border-border rounded-xl overflow-hidden grid grid-cols-1 lg:grid-cols-5 transition-transform duration-300 hover:-translate-y-1"
>
<div className="relative w-full aspect-video sm:aspect-auto sm:col-span-2 sm:h-[230px] bg-bg-muted">
<div className="relative w-full aspect-video lg:aspect-auto lg:col-span-2 lg:h-[230px] bg-bg-muted">
{post.thumbnail && (
<Image
alt=""
src={post.thumbnail}
fill
sizes="(min-width: 640px) 29vw, 100vw"
sizes="(min-width: 1024px) 29vw, 100vw"
className="object-cover pointer-events-none"
/>
)}
</div>
<div className="flex flex-col justify-between gap-4 py-3 px-4 sm:col-span-3 min-w-0 text-text-primary">
<div className="flex flex-col justify-between gap-4 py-3 px-4 lg:col-span-3 min-w-0 text-text-primary">
<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>{post.categories.join(", ")}</span>
@@ -107,7 +111,7 @@ export async function Blog() {
>
{post.title}
</p>
<p className="font-normal text-body leading-6 line-clamp-1 sm:line-clamp-none">
<p className="font-normal text-body leading-6 line-clamp-1 lg:line-clamp-none">
{post.excerpt}
</p>
</div>