mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
YoussefandClaude Opus 4.7
70dfe21464
Several mobile issues reported by user manifested across themes:
photographic hero overflowing viewport, hero text wrapping into the
next line incorrectly, tab clicks jumping the page, section titles
overlapping section labels on Sport (and any theme overriding the
default section-head grid).
Changes:
· site/css/components.css — .hero--photo: grid-template-columns is
now minmax(0, 1fr) so the column shrinks below the 1600 px image
natural width on narrow viewports. .hero__photo-grid switches to
2 cols × 3 rows at <= 40rem with 4/3 aspect-ratio (was 3 × 2 at
16/7 and forced page wider than viewport on phones). Studio's
redundant aspect-ratio: 16/7 override removed so the mobile rule
can apply.
· site/css/base.css — html, body now use overflow-x: clip (previously
body alone had overflow-x: hidden). `.hero__display`,
`.section__title`, `.skill-row__title` get overflow-wrap: anywhere
and min-width: 0 — long hyphenated words like "AI-generated" in
uppercase Inter Tight 900 (Brutal) no longer overflow with their
hyphen as the only break opportunity.
· site/css/sections.css — diptych breakpoint pushed 40rem → 48rem so
Refine + Redesign demos stack vertically at the Chrome-headless
500 px floor (and on real phones below 768 px). Added a final-block
mobile rule [data-theme] .section__head { grid-template-columns:
1fr; gap; align-items } at <= 48rem to win cascade specificity
against per-theme overrides (Sport, Atelier, Newsprint, Terminal,
Manifesto, Salon, Linen, Almanac, Brutal). Without this, Sport's
6rem 1fr override kept the section head 2-column on mobile and
the italic Anton title wrapped onto the "02 / EXAMPLES" label.
· site/js/main.js — tab scroll-jump fix. The CSS-only radio tab
pattern in Section 04 (without/with) and Section 05 (foundations)
positions the radio inputs at top:0 of their section. Clicking a
label focuses the input → browser scrolls the section's top into
view → page jumps upward on every tab click. Fix intercepts label
clicks, prevents default, manually toggles checked, dispatches
change, and focuses with preventScroll so keyboard navigation
still works without the unwanted scroll. Older browsers without
preventScroll fall back to scroll-position save/restore.
Verified across all 23 themes at 500 px headless (Chrome's mobile
floor — real-phone-equivalent rules also fire below 576 px). No
horizontal overflow, no overlapping titles, photographic-hero
themes (Studio, Brutal) now show 6 thumbnails in a 2 × 3 grid that
fits the viewport, all section titles collapse cleanly under their
section labels.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>