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/Newsletter.tsx
+23 -19
View File
@@ -43,17 +43,17 @@ export function Newsletter({
{/* Outer section padding — same fluid horizontal padding as all other sections */}
<div className="px-[var(--layout-padding-x)] w-full">
{/* Rounded card: cream bg, stacks below md */}
<Reveal className="bg-bg-muted flex flex-col md:flex-row gap-8 md:gap-12 items-center px-8 py-8 md:py-0 rounded-md w-full">
{/* Rounded card: cream bg, stacks below sm (moved down from the old md:) */}
<Reveal className="bg-bg-muted flex flex-col sm:flex-row gap-8 sm:gap-12 items-center px-8 py-8 sm:py-0 rounded-md w-full">
{/* Left: copy — fixed width from md+ so the form always gets the remaining space.
Icon+text stacked (icon on top, centered) below md: — side by
side they squeezed the text into a ~164px column on a 375px
phone (icon width + gap eating most of the card's inner
width), wrapping awkwardly. Row layout with the icon beside
the text is fine again from md+, where the fixed copy-column
width leaves real room. */}
<div className="flex flex-col items-center gap-4 text-center w-full md:flex-row md:items-start md:gap-8 md:text-left md:w-[var(--newsletter-copy-width)] md:py-4 md:shrink-0">
{/* Left: copy — fixed width from sm+ so the form always gets the remaining space.
Icon+text stacked (icon on top, centered) below sm: — side by
side they squeezed the text into a narrow column on a phone
(icon width + gap eating most of the card's inner width),
wrapping awkwardly. Row layout with the icon beside the text
is fine again from sm+, where the fixed copy-column width
leaves real room. */}
<div className="flex flex-col items-center gap-4 text-center w-full sm:flex-row sm:items-start sm:gap-8 sm:text-left sm:w-[var(--newsletter-copy-width)] sm:py-4 sm:shrink-0">
{/* Decorative envelope icon, tilted -4° as per design.
w-[4rem], not w-16 — this project's --spacing-16 is a
@@ -89,20 +89,24 @@ export function Newsletter({
</div>
</div>
{/* Right: form — takes remaining space, centered vertically from md+ */}
<div className="flex w-full md:flex-1 items-center md:self-stretch min-w-0">
{/* Right: form — takes remaining space, centered vertically from sm+ */}
<div className="flex w-full sm:flex-1 items-center sm:self-stretch min-w-0">
{status === "success" ? (
<p className="text-body text-text-primary font-medium">{successMessage}</p>
) : (
<form onSubmit={handleSubmit} className="flex flex-1 flex-col gap-4 min-w-0 w-full">
{/* Input + submit button — stacked below lg: (was md:).
The card above already goes side-by-side at md: with a
fixed-width copy column (--newsletter-copy-width), which
only leaves ~200px for this form column at 768px — not
enough room for input+button side by side. Stacked
through the whole Tablet range instead, side by side
again once the form column has real room at lg:. */}
{/* Input + submit button — stacked below lg:, a deliberate
exception to the site's sm: (640px) structural
consolidation, not a leftover of it. The card above
already goes side-by-side at sm: with a fixed-width
copy column (--newsletter-copy-width), which only
leaves ~128px for this form column at 640px and
~197px at 768px — not enough room for input+button
side by side even at the new, lower floor. Stacked
through the whole 640-1023px range instead, side by
side again once the form column has real room (≈333px)
at lg:. */}
<div className="flex flex-col lg:flex-row gap-4 items-stretch w-full">
<input
ref={emailRef}