skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-12 06:06:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Let the editorial hero break out wider than the body text column

Browse Source 
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.
This commit is contained in:
Paul Bakaus
2026-04-08 11:32:57 -07:00
parent b3a23e651e
commit 282987ad7b
1 changed files with 30 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/sub-pages.css
+30 -15
View File
@@ -265,7 +265,11 @@ main#main {
}
.skill-detail {
max-width: 720px;
/* No max-width on the article itself. The editorial body sections
(header, editorial wrapper, skill source, references) each cap
themselves at 720px for readable line length, while the hero is
allowed to break out on wide viewports. */
width: 100%;
}
.sub-page-header {
@@ -1110,38 +1114,49 @@ main#main {
============================================ */
/* Editorial hero: on wide viewports, text header on the left and the
before/after demo floats to the right as a hero module. On narrow
viewports everything stacks. */
before/after demo floats to the right as a hero module and is allowed
to break out of the 720px body cap. On narrow viewports everything
stacks within the 720px column. */
.skill-detail-hero {
max-width: 720px;
margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 1100px) {
/* Stacked spacing between header and demo on narrow viewports; cancelled
when the hero switches to two columns at >=1280px. */
.skill-detail-hero--has-demo .skill-demo {
margin-top: clamp(2rem, 4vw, 2.5rem);
}
@media (min-width: 1280px) {
.skill-detail-hero--has-demo {
/* Wider editorial hero at large viewports. Fixed 564px demo column
(500px visible + 64px hover buffer) keeps the split-container at
its designed 500x360 landscape aspect ratio. Text column takes
whatever's left, clamped by the hero's own max-width. */
max-width: 1200px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(var(--spacing-lg), 4vw, var(--spacing-2xl));
align-items: start;
grid-template-columns: minmax(0, 1fr) 564px;
gap: clamp(var(--spacing-xl), 4vw, var(--spacing-2xl));
align-items: center;
}
.skill-detail-hero--has-demo .skill-detail-header {
margin-bottom: 0;
align-self: center;
}
.skill-detail-hero--has-demo .skill-demo {
/* 500px visible container + 64px padding buffer stays 564px total.
Keep the eyebrow and labels vertically centered with the title.
Cancel the narrow-viewport stacking margin. */
align-self: center;
margin-top: 0;
}
}
/* Stacked spacing between header and demo on narrow viewports; overridden
by the grid gap when the hero switches to two columns at >=1100px. */
.skill-detail-hero--has-demo .skill-demo {
margin-top: clamp(2rem, 4vw, 2.5rem);
/* Body sections stay at a readable line length regardless of the hero
width above them. */
.skill-detail-editorial,
.skill-source-card,
.skill-references {
max-width: 720px;
}
.skill-detail-eyebrow {