mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
YoussefandClaude Opus 4.7
ddfcd6a283
## Banner - Combine .banner__random + .banner__kbd into one .banner__shuffle pill. - New SVG: Lucide-style shuffle (two crossing arrows). Old icon clipped at the viewBox edges; this one is sized 24×24 with stroke well inside. - Click randomises (was already so); icon rotates 15° on hover; T kbd label inside the pill as a hint, separated by a small vertical rule. - Banner now uses display:flex with a spacer so the theme-name sits immediately to the LEFT of the picker (closer, smaller text 0.95rem) rather than centered far from the dots. - New responsive breakpoints: 50rem (smaller dots), 44rem (hide picker entirely on phones, keep mark + name + shuffle), 26rem (drop name). - Shuffle now sits OUTSIDE the picker so it stays visible when the picker is hidden on narrow screens. ## Gallery thumb fit - Width was `100%` which only fills the content-area, leaving padding visible to the right (negative margin-right doesn't extend element width). Switched to `width: calc(100% + 2 * var(--space-lg))` so the thumb truly bleeds to the card's inner-border on both sides. - Added explicit `aspect-ratio: 16/10` + `object-fit: cover` + `object-position: top left` so the thumb crops from the right (where empty page-paper tends to live) rather than top/bottom (where hero content usually is). - Re-captured all 8 thumbnails at 1024×640 (matches the most common page content max-width — Maple Bakery is 64rem = 1024px exactly), so each page packs content closer to the right edge. ## Salon: centered examples intro - Salon already centers .section__title; the .examples__intro lead paragraph below it was left-aligned, looking off-axis on the centered Salon section heads. Now centers with `text-align: center` + `margin-inline: auto` for both .examples__intro and .examples__outro. ## Responsive headings (narrow viewports) - At <30rem viewports, .opening__title and .hero__display were rendering at min ~48px which is wider than the 320–375px content area for headers longer than ~14ch. Body's `overflow-x: hidden` was masking the issue visually but text was being clipped. - New media query caps display at clamp(1.75rem, 9vw, 2.75rem) and forces `max-width: 12ch` so long headers wrap. - .section__title gets clamp(1.375rem, 5.5vw, 1.875rem) + 100% max-width so multi-clause section titles wrap to multiple lines instead of being clipped. - .hero__lede / .opening__sub get 1rem font-size + 100% max-width on narrow viewports so the lede paragraph fits. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>