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

Move structural breakpoint to 640px, shorten Hero heading

Browse Source 
Tablet layout (768-1023px) hit the md: grid switch exactly where the
fluid clamp() tokens were already at their floor, leaving no room to
shrink. Moves the fluid floor and structural breakpoint down together
to sm: (640px) so real tablets always get the fluid, desktop-like
structure; consolidates the ad-hoc md:+lg: patchwork in Hero/About/
Newsletter/Footer/Tools back onto one line, leaving documented lg:
exceptions where content genuinely doesn't fit yet. Also shortens the
Hero heading to a single sentence with no trailing period (the brand's
orange dot already renders one, animated).
This commit is contained in:
Marco
2026-07-29 10:49:56 +00:00
parent 94cba756c8
commit cc935420ec
25 changed files with 327 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Hero.tsx
+44 -36
View File
@@ -11,7 +11,7 @@ function HeroImage() {
alt=""
fill
priority
sizes="(min-width: 768px) 58vw, 100vw"
sizes="(min-width: 640px) 58vw, 100vw"
className="object-cover"
style={{
WebkitMaskImage:
@@ -28,44 +28,52 @@ function HeroImage() {
export function Hero() {
return (
<section className="bg-bg-base w-full overflow-hidden">
{/* Structural breakpoint is md: (768px) for the GRID only — the text
column stays ~283-320px wide through the whole 768-1023px Tablet
{/* Structural breakpoint is sm: (640px, moved down from the old md:
768px so the grid arrives exactly where the fluid token floor
also sits — see fluid.ts/globals.css) for the GRID only — the
text column stays narrow through the whole 640-1023px Tablet
range regardless. Below, every piece of *content* inside the text
column (heading/subtitle/CTA/social-proof) keeps its smaller,
fixed-below-lg: sizing all the way through Tablet too, not just
true Mobile — reusing the full fluid-token sizes at md: (as a
first pass 2026-07-24 briefly did) put the original ~19-44px
fluid floors right back in that narrow column, recreating the
exact 3-line-wrap problem the old `lg:` structural exception
existed to avoid. Splitting "grid at md:" from "full-size content
at lg:" gets both: Tablet shows the real 5/7 grid, but with
content sized for its column's actual width, not the column
width `lg:` was designed for. */}
<div className="flex flex-col md:grid md:grid-cols-12 md:items-center gap-8 md:gap-[var(--layout-grid-gap)] pt-10 md:pt-0">
column (heading/subtitle/CTA/social-proof) deliberately keeps its
smaller, fixed-below-lg: sizing all the way through Tablet too,
not just true Mobile — reusing the full fluid-token sizes that
early put the original ~19-44px fluid floors right back in that
narrow column, recreating the exact 3-line-wrap problem the old
`lg:` structural exception existed to avoid. This is a narrower,
intentional exception to the site-wide sm: consolidation — the
column's real width at sm: hasn't been visually verified yet
(no browser in this environment), so full-size content stays
gated behind lg: as a fast-follow rather than a guess. Splitting
"grid at sm:" from "full-size content at lg:" gets both: Tablet
shows the real 5/7 grid, but with content sized for its column's
actual width, not the column width `lg:` was designed for. */}
<div className="flex flex-col sm:grid sm:grid-cols-12 sm:items-center gap-8 sm:gap-[var(--layout-grid-gap)] pt-10 sm:pt-0">
{/* Text content — first in DOM/visual order at every breakpoint so
the CTA stays above the fold on Mobile (deliberate exception to
the "keep DOM order" default, see Hero decision in the plan).
Reveal fires ~immediately since Hero is already in the initial
viewport — this doubles as the page's entrance animation. */}
<Reveal className="order-1 md:order-none md:col-span-5 flex flex-col gap-7 items-start pl-[var(--layout-padding-x)] pr-10 md:pr-0">
<Reveal className="order-1 sm:order-none sm:col-span-5 flex flex-col gap-7 items-start pl-[var(--layout-padding-x)] pr-10 sm:pr-0">
{/* Heading — smaller fixed-ish size below lg: (text-h1, still a
real paired font-size+line-height token, not an arbitrary
value) — text-display's own 44px floor wraps very heavily in
a ~283-320px Tablet column (even a single word can approach
that width). Forced break after "darf" only in the sm-md
tablet range (natural wrap there landed awkwardly); removed
at true mobile widths (below sm:) 2026-07-24 — narrower
still, natural wrap reads fine there, and the forced break
made "darf" the whole first line. Full text-display only
from lg: up, where the column has real room again. */}
that width). The old forced break after "darf" only existed
for a "wide single-column, not yet grid" band (640-767px
under the old md: 768px grid switch) that no longer exists
now the grid itself starts at sm: (640px) — below sm: the
stack is narrower than that old band ever was, where natural
wrap already reads fine (confirmed 2026-07-24), so the break
is removed rather than re-anchored to a new range. Full
text-display only from lg: up, where the column has real
room again. */}
<p
className="font-semibold leading-[0] shrink-0 text-[0px] text-text-primary"
style={{ fontFamily: "var(--font-playfair)" }}
>
<span className="text-h1 lg:text-display">
Verliere dich nicht<br className="hidden sm:inline md:hidden" /> im mehr. Finde heraus, was wichtig ist.
Finde heraus, was wichtig ist
</span>
{/* Brand's signature orange dot (also in the logo/footer) —
bouncy pop-in once the heading scrolls into view, timed to
@@ -133,29 +141,29 @@ export function Hero() {
</Reveal>
{/* Image — bleeds to the true edge at every breakpoint (never
padded). Below md: (stacked layout) the full 887:583 aspect
ratio at 100vw would make the image ~600-900px tall and
dominate the page, so height is capped and object-cover crops
it into a supporting banner instead; at md:+ (grid, image only
58% width) the full aspect ratio looks right again, so the cap
is lifted. No shadow: a plain box-shadow reads as a hard
rectangular edge against the existing corner/right/bottom
mask-gradient fade below, which looked worse than no shadow at
all — tried and reverted. */}
{/* No Reveal (fade-in-on-scroll) below md: — whileInView's -80px
padded). Below sm: (stacked layout, moved down from the old
md: 768px) the full 887:583 aspect ratio at 100vw would make
the image ~600-900px tall and dominate the page, so height is
capped and object-cover crops it into a supporting banner
instead; at sm:+ (grid, image only 58% width) the full aspect
ratio looks right again, so the cap is lifted. No shadow: a
plain box-shadow reads as a hard rectangular edge against the
existing corner/right/bottom mask-gradient fade below, which
looked worse than no shadow at all — tried and reverted. */}
{/* No Reveal (fade-in-on-scroll) below sm: — whileInView's -80px
viewport margin means the image doesn't fade in until scrolled
that much further into view; on a short mobile viewport this
image sits right at the initial fold, so it stayed at
opacity:0 (a white gap, matching the section's own bg-bg-base)
above the fold until the user scrolled (reported 2026-07-24).
Plain, always-visible image below md: instead; Reveal's fade
kept from md: up, where the image is beside the text with
Plain, always-visible image below sm: instead; Reveal's fade
kept from sm: up, where the image is beside the text with
plenty of room and this was never an issue. */}
<div className="order-2 md:hidden relative w-full aspect-[887/583] max-h-[16rem]">
<div className="order-2 sm:hidden relative w-full aspect-[887/583] max-h-[16rem]">
<HeroImage />
</div>
<Reveal
className="hidden md:block md:col-span-7 relative w-full aspect-[887/583]"
className="hidden sm:block sm:col-span-7 relative w-full aspect-[887/583]"
delay={0.15}
>
<HeroImage />