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/globals.css
+57 -53
View File
@@ -2,10 +2,10 @@
/*
* Fluid design tokens — every value below scales continuously via clamp()
* between the Tablet breakpoint (768px) and Desktop (1440px). Below 768px
* the clamp() floor freezes the value automatically (no separate mobile
* media query needed for sizing — only for structural layout changes,
* see the `md:` breakpoint usage in components).
* between the structural breakpoint (640px) and Desktop (1440px). Below
* 640px the clamp() floor freezes the value automatically (no separate
* mobile media query needed for sizing — only for structural layout
* changes, see the `sm:` breakpoint usage in components).
*
* Spacing overrides Tailwind's own numeric scale (--spacing-4 etc.) at the
* exact numbers the styleguide already used (n times 0.25rem equals the
@@ -53,10 +53,10 @@
--shadow-modal: 0 8px 40px rgba(26, 26, 24, 0.16);
--shadow-sidebar: 0 2px 8px rgba(26, 26, 24, 0.08);
/* Type scale (fluid 768->1440) */
--text-display: clamp(2.75rem, 1.3214rem + 2.9762vw, 4rem);
/* Type scale (fluid 640->1440) */
--text-display: clamp(2.75rem, 1.75rem + 2.5vw, 4rem);
--text-display--line-height: 1.1;
--text-h-feature: clamp(1.875rem, 1.1607rem + 1.4881vw, 2.5rem);
--text-h-feature: clamp(1.875rem, 1.375rem + 1.25vw, 2.5rem);
--text-h-feature--line-height: 1.2;
/* New role, added for page-todo-karten's hero heading (48px Desktop) —
doesn't match any existing scale step (h-feature=40, h1=36), Figma's
@@ -67,21 +67,21 @@
etc.)" per styleguide.md §2.2 — a different, smaller role). Also used
by page-weekly-impulses's hero heading — same 48px role, reused
rather than minting a near-duplicate token. */
--text-h-page: clamp(2.5rem, 1.9286rem + 1.1905vw, 3rem);
--text-h-page: clamp(2.5rem, 2.1rem + 1vw, 3rem);
--text-h-page--line-height: 1.15;
--text-h1: clamp(1.75rem, 1.1786rem + 1.1905vw, 2.25rem);
--text-h1: clamp(1.75rem, 1.35rem + 1vw, 2.25rem);
--text-h1--line-height: 1.15;
--text-h2: clamp(1.625rem, 1.1964rem + 0.8929vw, 2rem);
--text-h2: clamp(1.625rem, 1.325rem + 0.75vw, 2rem);
--text-h2--line-height: 1.25;
--text-h-section: clamp(1.4375rem, 1.0804rem + 0.744vw, 1.75rem);
--text-h-section: clamp(1.4375rem, 1.1875rem + 0.625vw, 1.75rem);
--text-h-section--line-height: 1.3;
--text-h-emphasis: clamp(1.25rem, 0.9643rem + 0.5952vw, 1.5rem);
--text-h-emphasis: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem);
--text-h-emphasis--line-height: 1.4;
--text-h3: clamp(1.1875rem, 0.9732rem + 0.4464vw, 1.375rem);
--text-h3: clamp(1.1875rem, 1.0375rem + 0.375vw, 1.375rem);
--text-h3--line-height: 1.35;
--text-h-small: clamp(1.125rem, 0.9821rem + 0.2976vw, 1.25rem);
--text-h-small: clamp(1.125rem, 1.025rem + 0.25vw, 1.25rem);
--text-h-small--line-height: 1.4;
--text-h4: clamp(1rem, 0.8571rem + 0.2976vw, 1.125rem);
--text-h4: clamp(1rem, 0.9rem + 0.25vw, 1.125rem);
--text-h4--line-height: 1.4;
--text-body: 1rem;
--text-body--line-height: 1.6;
@@ -90,21 +90,21 @@
--text-label: 0.75rem;
--text-label--line-height: 1.4;
/* Spacing scale (fluid 768->1440) — overrides Tailwind's default n*0.25rem
/* Spacing scale (fluid 640->1440) — overrides Tailwind's default n*0.25rem
at these exact steps, so p-4/gap-6/px-20/etc. become fluid automatically */
--spacing-1: clamp(0.25rem, 0.25rem + 0vw, 0.25rem);
--spacing-2: clamp(0.5rem, 0.5rem + 0vw, 0.5rem);
--spacing-3: clamp(0.625rem, 0.4821rem + 0.2976vw, 0.75rem);
--spacing-4: clamp(0.875rem, 0.7321rem + 0.2976vw, 1rem);
--spacing-5: clamp(1rem, 0.7143rem + 0.5952vw, 1.25rem);
--spacing-6: clamp(1.25rem, 0.9643rem + 0.5952vw, 1.5rem);
--spacing-8: clamp(1.5rem, 0.9286rem + 1.1905vw, 2rem);
--spacing-10: clamp(1.75rem, 0.8929rem + 1.7857vw, 2.5rem);
--spacing-12: clamp(2rem, 0.8571rem + 2.381vw, 3rem);
--spacing-16: clamp(2.5rem, 0.7857rem + 3.5714vw, 4rem);
--spacing-20: clamp(3rem, 0.7143rem + 4.7619vw, 5rem);
--spacing-24: clamp(3.5rem, 0.6429rem + 5.9524vw, 6rem);
--spacing-30: clamp(4rem, 0rem + 8.3333vw, 7.5rem);
--spacing-3: clamp(0.625rem, 0.525rem + 0.25vw, 0.75rem);
--spacing-4: clamp(0.875rem, 0.775rem + 0.25vw, 1rem);
--spacing-5: clamp(1rem, 0.8rem + 0.5vw, 1.25rem);
--spacing-6: clamp(1.25rem, 1.05rem + 0.5vw, 1.5rem);
--spacing-8: clamp(1.5rem, 1.1rem + 1vw, 2rem);
--spacing-10: clamp(1.75rem, 1.15rem + 1.5vw, 2.5rem);
--spacing-12: clamp(2rem, 1.2rem + 2vw, 3rem);
--spacing-16: clamp(2.5rem, 1.3rem + 3vw, 4rem);
--spacing-20: clamp(3rem, 1.4rem + 4vw, 5rem);
--spacing-24: clamp(3.5rem, 1.5rem + 5vw, 6rem);
--spacing-30: clamp(4rem, 1.2rem + 7vw, 7.5rem);
/* Transitions */
--transition-fast: 150ms ease;
@@ -116,18 +116,22 @@
/* Layout — not part of Tailwind's numeric spacing scale, referenced via
arbitrary-value syntax (e.g. px-[var(--layout-padding-x)]) */
--layout-max-width: 75rem; /* 1200px */
--layout-padding-x: clamp(2rem, -1.4286rem + 7.1429vw, 5rem);
--layout-grid-gap: clamp(1rem, 0.4286rem + 1.1905vw, 1.5rem);
--layout-grid-gap-lg: clamp(1.25rem, 0.3929rem + 1.7857vw, 2rem);
--layout-padding-x: clamp(2rem, -0.4rem + 6vw, 5rem);
--layout-grid-gap: clamp(1rem, 0.6rem + 1vw, 1.5rem);
--layout-grid-gap-lg: clamp(1.25rem, 0.65rem + 1.5vw, 2rem);
/* One-off fluid values that aren't part of a broader scale */
--hero-avatar-size: clamp(2.25rem, 1.6071rem + 1.3393vw, 2.8125rem);
--hero-avatar-size: clamp(2.25rem, 1.8rem + 1.125vw, 2.8125rem);
/* Newsletter copy column — was a hard 38.25rem, which didn't leave enough
room for the form column at the 768px tablet floor (only 656px of
content width available for 612px column plus 56px gap), crushing the
input/button/privacy text to near-zero width and overflowing the page.
Scales down to 23rem at 768px instead. */
--newsletter-copy-width: clamp(23rem, 5.5714rem + 36.3095vw, 38.25rem);
room for the form column at the 640px structural floor (only ~576px of
content width available for a 612px column plus gap at that width),
crushing the input/button/privacy text to near-zero width and
overflowing the page. Scales down to 23rem at 640px instead. Note: the
inner input+button row still switches to a row layout at `lg:` (1024px),
not at the site's `sm:` (640px) structural line — even at this reduced
floor there isn't enough room for input+button side by side below
~900px, see Newsletter.tsx's own comment. */
--newsletter-copy-width: clamp(23rem, 10.8rem + 30.5vw, 38.25rem);
/* Divider section icons (arrow separators, sparkle) — previously hard
rem values while the "Klarheit/Fokus/Entlastung" text next to them
@@ -135,30 +139,30 @@
while the words scaled. Same fluid(minPx, maxPx) formula as the rest
of this file, floor ~82.5% of the Desktop value per the styleguide's
80-85% Mobile-ratio guidance. */
--divider-arrow-w: clamp(2.125rem, 1.5536rem + 1.1905vw, 2.625rem);
--divider-arrow-h: clamp(0.625rem, 0.4821rem + 0.2976vw, 0.75rem);
--divider-sparkle-w: clamp(1.5625rem, 1.1554rem + 0.8482vw, 1.91875rem);
--divider-sparkle-h: clamp(2.0625rem, 1.5554rem + 1.0565vw, 2.50625rem);
--divider-sparkle-inner-w: clamp(1.4375rem, 1.09875rem + 0.706vw, 1.734rem);
--divider-sparkle-inner-h: clamp(1.9375rem, 1.4375rem + 1.0417vw, 2.375rem);
--divider-arrow-w: clamp(2.125rem, 1.725rem + 1vw, 2.625rem);
--divider-arrow-h: clamp(0.625rem, 0.525rem + 0.25vw, 0.75rem);
--divider-sparkle-w: clamp(1.5625rem, 1.2775rem + 0.7125vw, 1.9188rem);
--divider-sparkle-h: clamp(2.0625rem, 1.7075rem + 0.8875vw, 2.5063rem);
--divider-sparkle-inner-w: clamp(1.4375rem, 1.2003rem + 0.593vw, 1.734rem);
--divider-sparkle-inner-h: clamp(1.9375rem, 1.5875rem + 0.875vw, 2.375rem);
/* Own token, mirrors --text-h2's clamp() exactly rather than the Word
component reading var(--text-h2) directly — that's what lets the
mobile override below shrink just this component's words without
touching every other text-h2 heading site-wide. */
--divider-word-size: clamp(1.625rem, 1.1964rem + 0.8929vw, 2rem);
--divider-word-size: clamp(1.625rem, 1.325rem + 0.75vw, 2rem);
}
/* This project's fluid() scale (see fluid.ts) is calibrated for the
768-1440px Tablet-Desktop range and floors out at the 768px value for
any narrower viewport (clamp()'s MIN bound) — by design, see the other
fluid tokens above. Divider is the one spot that floor doesn't work:
the "Klarheit → Fokus → Entlastung" phrase plus its connector icons
needs ~550px of width to lay out on one row even at the 768px floor
size, far more than a phone's ~310px content width. Below Tailwind's
sm: breakpoint, shrink these tokens further so the phrase gets much
closer to fitting on one row instead of stacking into three separate
centered lines (see Divider.tsx's gap-x-3/gap-3 mobile overrides,
same breakpoint). Scoped to these component-only tokens, not
640-1440px structural-to-Desktop range and floors out at the 640px value
for any narrower viewport (clamp()'s MIN bound) — by design, see the
other fluid tokens above. Divider is the one spot that floor doesn't
work: the "Klarheit → Fokus → Entlastung" phrase plus its connector
icons needs ~550px of width to lay out on one row even at the 640px
floor size, far more than a phone's ~310px content width. Below
Tailwind's sm: breakpoint, shrink these tokens further so the phrase
gets much closer to fitting on one row instead of stacking into three
separate centered lines (see Divider.tsx's gap-x-3/gap-3 mobile
overrides, same breakpoint). Scoped to these component-only tokens, not
--text-h2 itself. */
@media (max-width: 639px) {
:root {