mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 06:06:37 +03:00
Paul Bakaus
282987ad7b
Two problems with the previous hero pass: 1. The whole .skill-detail was capped at 720px, so the hero grid got squeezed into that same width. The demo column tried to hold its fixed 360px height but lost width, forcing the split-container into a portrait aspect ratio with no room for the intended 500x360 landscape layout. 2. The grid used grid-template-columns: minmax(0, 1fr) auto, which meant the demo column was sized to its content (max 564px) but competed with the text column for the shared 720px. The demo got cramped instead of floating as a proper hero module. Fix: drop the max-width from .skill-detail itself. Apply it per body section (.skill-detail-hero, .skill-detail-editorial, .skill-source-card, .skill-references) so each one keeps its readable 720px cap by default but the hero can override it. At >=1280px viewport, .skill-detail-hero--has-demo switches to a grid with a FIXED 564px demo column (guaranteeing the split-container holds its 500x360 landscape) and a minmax(0,1fr) text column, capped at max-width: 1200px. The editorial body below still renders at 720px for line length. Below 1280px the hero stacks as before (header then demo) within the 720px body column, same layout as a minute ago.