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/NewsletterModal.tsx
+7 -7
View File
@@ -156,14 +156,14 @@ export function NewsletterModal({ open, onClose }: { open: boolean; onClose: ()
<Image alt="" src="/icon-close.png" width={24} height={24} className="size-full object-contain" />
</button>
{/* modal-top: photo + copy/form, stacked below md */}
<div className="flex flex-col md:flex-row items-stretch border-b border-border">
<div className="relative w-full md:flex-1 aspect-[4/3] md:aspect-auto">
{/* modal-top: photo + copy/form, stacked below sm (moved down from the old md:) */}
<div className="flex flex-col sm:flex-row items-stretch border-b border-border">
<div className="relative w-full sm:flex-1 aspect-[4/3] sm:aspect-auto">
<Image
src="/newsletter-modal-photo.jpg"
alt="Notizbuch mit Kaffee und Stift"
fill
sizes="(min-width: 768px) 50vw, 100vw"
sizes="(min-width: 640px) 50vw, 100vw"
className="object-cover"
/>
</div>
@@ -172,8 +172,8 @@ export function NewsletterModal({ open, onClose }: { open: boolean; onClose: ()
{/* -scale-y-100 is required, not just -rotate-4 — the SVG
itself is authored upside-down (matches how Newsletter.tsx
uses this exact same asset); without it the icon renders
flipped. Hidden below md: — removed on mobile 2026-07-24. */}
<div className="hidden md:block w-16 h-14 -rotate-4 -scale-y-100">
flipped. Hidden below sm: — removed on mobile 2026-07-24. */}
<div className="hidden sm:block w-16 h-14 -rotate-4 -scale-y-100">
<Image alt="" src="/newsletter-icon.svg" width={64} height={56} className="w-full h-full" />
</div>
@@ -263,7 +263,7 @@ export function NewsletterModal({ open, onClose }: { open: boolean; onClose: ()
items-start + a fixed icon bounding box (icons have different
native proportions, e.g. the sparkle glyph isn't square) fixes
it without needing the flip trick. */}
<div className="flex flex-col md:flex-row items-start px-8 md:px-20 py-6 md:py-9 gap-8 md:gap-6">
<div className="flex flex-col sm:flex-row items-start px-8 md:px-20 py-6 md:py-9 gap-8 sm:gap-6">
{features.map((f) => (
<div key={f.title} className="flex-1 flex gap-6 items-start w-full">
<div className="relative h-10 w-10 shrink-0 flex items-center justify-center">