feat: full responsive layout — mobile-first, lg breakpoint, fluid typography
Strategy: one layout breakpoint at lg (1024px), clamp() for fluid type. Navbar: hamburger menu (animated ✕) with max-h dropdown, resize-close, h-20 mobile / h-[6.25rem] desktop, blur triggers on scroll or menu-open. Hero: flex-col→lg:flex-row, clamp(2rem,5vw,4rem) heading, background-image scales responsively, gradient mask via .hero-mask only at lg+ in CSS. Divider: flex-wrap + gap-y for smaller screens. Tools: grid-cols-1→md:2→lg:3, removed fixed height and per-card paddingRight. Blog: featured flex-col→lg:flex-row, secondary flex-col→md:flex-row, excerpt hidden on mobile secondary cards to save space. About: flex-col→lg:flex-row, clamp on quote size, min-h-[18rem] for photo. Newsletter: flex-col→lg:flex-row, input+button stack on xs / row on sm+. Footer: flex-col→lg:flex-row, flex-wrap on legal links. globals.css: scroll-padding-top 5rem mobile / 6.25rem desktop. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marco
+24
-25
@@ -33,44 +33,44 @@ const secondary = [
|
||||
|
||||
export function Blog() {
|
||||
return (
|
||||
<div id="blog" className="flex flex-col gap-[3rem] items-start pb-[4rem] w-full bg-[#f5f0e8]">
|
||||
<div id="blog" className="flex flex-col gap-8 lg:gap-[3rem] items-start pb-10 lg:pb-[4rem] w-full bg-[#f5f0e8]">
|
||||
|
||||
{/* Section header */}
|
||||
<div className="flex flex-col gap-[0.5rem] items-start px-[5rem] w-full">
|
||||
<div className="flex flex-col gap-2 items-start px-4 md:px-8 lg:px-[5rem] w-full">
|
||||
<p className="font-bold text-[#f6a701] text-[1.25rem]">
|
||||
Neue Impulse
|
||||
</p>
|
||||
<p
|
||||
className="font-semibold text-[#222221] text-[1.75rem] leading-normal"
|
||||
style={{ fontFamily: "var(--font-lora)" }}
|
||||
className="font-semibold text-[#222221] leading-normal"
|
||||
style={{ fontFamily: "var(--font-lora)", fontSize: "clamp(1.375rem, 2.5vw, 1.75rem)" }}
|
||||
>
|
||||
Gedanken, Methoden & Impulse
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Posts grid */}
|
||||
<div className="flex flex-col gap-[2.5rem] items-start px-[5rem] w-full">
|
||||
<div className="flex flex-col gap-4 lg:gap-[2.5rem] items-start px-4 md:px-8 lg:px-[5rem] w-full">
|
||||
|
||||
{/* Featured post — thumbnail flush left, card clips with overflow-hidden */}
|
||||
<div className="w-full border border-[#d9d9d9] rounded-xl overflow-hidden flex gap-3">
|
||||
<div className="relative h-[220px] shrink-0 w-[60%]">
|
||||
{/* Featured post: stacked on mobile, side-by-side on lg+ */}
|
||||
<div className="w-full border border-[#d9d9d9] rounded-xl overflow-hidden flex flex-col lg:flex-row lg:gap-3">
|
||||
<div className="relative h-[200px] md:h-[240px] lg:h-[220px] w-full lg:w-[60%] lg:shrink-0">
|
||||
<img
|
||||
alt=""
|
||||
src={featured.thumbnail}
|
||||
className="absolute inset-0 w-full h-full object-cover pointer-events-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col justify-between py-4 pr-4 min-w-0">
|
||||
<div className="flex flex-1 flex-col justify-between p-4 lg:py-4 lg:pr-4 lg:pl-0 min-w-0">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex gap-2 items-center font-semibold text-[#777] text-[1rem] uppercase whitespace-nowrap">
|
||||
<div className="flex gap-2 items-center font-semibold text-[#777] text-[0.875rem] uppercase whitespace-nowrap">
|
||||
<span>{featured.category}</span>
|
||||
<span>•</span>
|
||||
<span>{featured.readTime}</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-[#222221]">
|
||||
<div className="flex flex-col gap-3 text-[#222221]">
|
||||
<p
|
||||
className="font-semibold text-[1.75rem] leading-normal"
|
||||
style={{ fontFamily: "var(--font-lora)" }}
|
||||
className="font-semibold leading-normal"
|
||||
style={{ fontFamily: "var(--font-lora)", fontSize: "clamp(1.25rem, 2vw, 1.75rem)" }}
|
||||
>
|
||||
{featured.title}
|
||||
</p>
|
||||
@@ -81,22 +81,21 @@ export function Blog() {
|
||||
</div>
|
||||
<Link
|
||||
href={featured.href}
|
||||
className="font-bold text-[1rem] text-[#222221] whitespace-nowrap hover:text-[#f6a701] transition-colors"
|
||||
className="font-bold text-[1rem] text-[#222221] whitespace-nowrap hover:text-[#f6a701] transition-colors mt-4 lg:mt-0"
|
||||
>
|
||||
→ Zum Beitrag
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Secondary posts — thumbnail with own rounded-xl, card py-2 only */}
|
||||
<div className="flex gap-3 w-full">
|
||||
{/* Secondary posts: 1-col mobile → 2-col md+ */}
|
||||
<div className="flex flex-col md:flex-row gap-4 lg:gap-3 w-full">
|
||||
{secondary.map((post) => (
|
||||
<div
|
||||
key={post.title}
|
||||
className="flex-1 border border-[#d9d9d9] rounded-xl flex gap-3 h-[230px] items-center py-2"
|
||||
className="flex-1 border border-[#d9d9d9] rounded-xl flex gap-3 items-center py-2"
|
||||
>
|
||||
{/* Thumbnail: own border-radius so it sits neatly inside the padded card */}
|
||||
<div className="rounded-xl overflow-hidden shrink-0 h-full w-[14.7rem]">
|
||||
<div className="rounded-xl overflow-hidden shrink-0 h-[120px] w-[9rem] md:h-[160px] md:w-[12rem] lg:h-[calc(230px-1rem)] lg:w-[14.7rem]">
|
||||
<img
|
||||
alt=""
|
||||
src={post.thumbnail}
|
||||
@@ -104,27 +103,27 @@ export function Blog() {
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col justify-between h-full min-w-0 py-2 pr-2 text-[#222221]">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex gap-2 items-center font-semibold text-[#777] text-[1rem] uppercase whitespace-nowrap">
|
||||
<div className="flex flex-col gap-2 lg:gap-3">
|
||||
<div className="flex gap-2 items-center font-semibold text-[#777] text-[0.8rem] lg:text-[1rem] uppercase whitespace-nowrap">
|
||||
<span>{post.category}</span>
|
||||
<span>•</span>
|
||||
<span>{post.readTime}</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-2 lg:gap-4">
|
||||
<p
|
||||
className="font-semibold text-[1.25rem] leading-normal"
|
||||
className="font-semibold leading-normal text-[1.1rem] lg:text-[1.25rem]"
|
||||
style={{ fontFamily: "var(--font-lora)" }}
|
||||
>
|
||||
{post.title}
|
||||
</p>
|
||||
<p className="font-normal text-[1rem] leading-6">
|
||||
<p className="font-normal text-[0.9rem] lg:text-[1rem] leading-6 hidden md:block">
|
||||
{post.excerpt}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
href={post.href}
|
||||
className="font-bold text-[1rem] whitespace-nowrap hover:text-[#f6a701] transition-colors"
|
||||
className="font-bold text-[0.9rem] lg:text-[1rem] whitespace-nowrap hover:text-[#f6a701] transition-colors mt-2"
|
||||
>
|
||||
→ Zum Beitrag
|
||||
</Link>
|
||||
|
||||
Reference in New Issue
Block a user