- Hero.tsx: structural breakpoint reverted from lg: back to md: — the
smaller CTA/subtitle/icon sizes added during the Mobile pass fit
comfortably in the ~283px Tablet column, so the original 3-line-wrap
problem that justified lg: doesn't recur. Tablet gets the real 5/7
grid (image beside text) again instead of a stacked mobile layout.
- Tools.tsx: full-size (56px) card icon pushed from md: to lg: — at
Tablet it dwarfed the still-close-to-floor title/description text.
- About.tsx: text/photo flex ratio swapped at Tablet (text gets the
bigger share, no overlap) vs. the original ratio + overlap trick from
lg: up, where it was designed for — Tablet's text column was too
narrow for its fixed-width statement + quote/bio row otherwise.
- Newsletter.tsx/Footer.tsx: the input+button row and the logo/handle/
legal-links row both went side-by-side at md:, but their surrounding
columns didn't leave enough width at 768px — pushed to lg:flex-row.
Clears every remaining @next/next/no-img-element warning — automatic
responsive srcset, lazy-loading, and format optimization instead of
always loading the original file at full size. Fixed-size icons got
explicit width/height; dynamic-aspect photos got fill inside a
relative wrapper.
New /todo-cards page (Hero, How-it-works, Focus, Testimonials, Pricing)
built with the fluid clamp() token system (app/lib/fluid.ts) and
scroll-reveal animations (app/components/Reveal.tsx), matching styling
consistency with /challenge's testimonial section.
Navbar: page-aware active state and anchor-link navigation from any
route (not just "/"), fixed logo click to actually navigate instead of
silently rewriting the URL, fluid nav text size, custom hash-scroll
handling for cross-page anchor links.
Hero: responsive breakpoint fix for the text/image split at Tablet
widths, entrance animation for the brand's orange dot, removed a red
dot artifact from hero.png.
Also includes prior uncommitted work on About/Blog/Newsletter/Footer
and the cart lib (app/lib/cart.ts).
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
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>
flex-1 (shrink:1) let the text column grow past 50% by shrinking the
image. flex-[1_0_0] (shrink:0) matches Figma's flex:1 0 0 so neither
column can shrink — both are exactly half the section width.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Werkzeuge→#werkzeuge, Blog→#blog, Über Björn→#ueber-bjoern.
Shop remains /shop (no matching section). Added matching id attributes
to Tools, Blog and About section root elements.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Two-column layout: left column stacks serif statement above a row of
Caveat quote (flex-1) + 2px golden divider + author bio (shrink-0).
Signature image is absolute-positioned just below the three Caveat lines
(top: 6.44rem = 3 × 32px line-height). Right column is a full-height
overflow-hidden container with object-cover author photo.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Marco