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

feat: full responsive layout — mobile-first, lg breakpoint, fluid typography

Browse Source 
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
2026-06-30 22:04:23 +00:00
parent ed575d5aa0
commit 2505a87717
9 changed files with 222 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/About.tsx
+15 -16
View File
@@ -1,32 +1,31 @@
export function About() {
return (
<section id="ueber-bjoern" className="bg-[#111] flex items-stretch w-full">
<section id="ueber-bjoern" className="bg-[#111] flex flex-col lg:flex-row items-stretch w-full">
{/* Left: text content — flex-[1_0_0] = flex: 1 0 0, no shrink, exactly 50% */}
<div className="flex-[1_0_0] flex flex-col gap-4 justify-center px-[5rem] py-8 min-w-0">
{/* Left: text content */}
<div className="flex-[1_0_0] flex flex-col gap-4 justify-center px-4 md:px-8 lg:px-[5rem] py-10 lg:py-8 min-w-0">
{/* Large serif statement — width-constrained as per design */}
{/* Large serif statement */}
<p
className="font-semibold text-white text-[1.75rem] leading-normal w-[17.625rem]"
style={{ fontFamily: "var(--font-lora)" }}
className="font-semibold text-white leading-normal"
style={{ fontFamily: "var(--font-lora)", fontSize: "clamp(1.375rem, 2.5vw, 1.75rem)", maxWidth: "17.625rem" }}
>
Ich glaube nicht, dass Menschen mehr Disziplin brauchen.
</p>
{/* Quote row: script quote + golden divider + author bio */}
<div className="flex items-start justify-between w-full">
<div className="flex items-start justify-between w-full gap-4">
{/* Caveat script text with signature positioned below */}
{/* Caveat script text with signature */}
<div className="relative flex-1" style={{ minHeight: "8rem" }}>
<div
className="font-normal text-[#f6a701] text-[2.25rem]"
style={{ fontFamily: "var(--font-caveat)", lineHeight: "2rem" }}
className="font-normal text-[#f6a701]"
style={{ fontFamily: "var(--font-caveat)", fontSize: "clamp(1.75rem, 3vw, 2.25rem)", lineHeight: "2rem" }}
>
<p>Ich glaube,</p>
<p>sie brauchen&nbsp;</p>
<p>weniger Reibung.</p>
</div>
{/* Signature — absolute, sits just below the three Caveat lines (3 × 32px = 96px) */}
<div
className="absolute overflow-hidden pointer-events-none"
style={{ top: "6.44rem", left: "1.5rem", width: "9.375rem", height: "1.375rem" }}
@@ -40,12 +39,12 @@ export function About() {
</div>
</div>
{/* Golden vertical divider + author lines */}
<div className="flex gap-6 items-start shrink-0">
{/* Golden divider + author */}
<div className="flex gap-4 lg:gap-6 items-start shrink-0">
<div className="bg-[#f6a701] w-[2px] h-24 shrink-0" />
<div
className="text-white font-normal whitespace-nowrap"
style={{ fontSize: "1rem", lineHeight: "1.5rem" }}
style={{ fontSize: "clamp(0.875rem, 1.5vw, 1rem)", lineHeight: "1.5rem" }}
>
<p>Björn.</p>
<p>Führungskraft.</p>
@@ -57,8 +56,8 @@ export function About() {
</div>
</div>
{/* Right: author photo — flex-[1_0_0] keeps it at exactly 50% */}
<div className="flex-[1_0_0] relative overflow-hidden" style={{ minHeight: "14rem" }}>
{/* Right: author photo */}
<div className="flex-[1_0_0] relative overflow-hidden" style={{ minHeight: "18rem" }}>
<img
alt="Björn"
src="/about-author.jpg"