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

site: fix homepage hero overflow + tiny title on mobile

Browse Source 
The hero clipped horizontally on phones: the collapsed grid used a plain
`1fr` track whose min-content floor wouldn't shrink below the demo's 460px
browser frame. Switch the mobile track to minmax(0,1fr) so it shrinks to the
viewport and the frame clips its own content. Drop the container's redundant
56px side padding on mobile so the hero uses the standard 24px gutter.

Also: collapse the demo's hotel-mock nav to logo + Book on mobile (its full
4-link nav overran the narrow frame and clipped mid-word), and give the
scan-terminal `overflow-x: auto` so long lines scroll instead of clipping.

The title keeps its design-system clamp (no mobile shrink): Alumni Sans
Pinstripe is condensed, so it fits at 54px down to 320px, holding a ~3.2×
hero hierarchy over the body.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-05-28 15:23:09 -07:00
co-authored by Claude Opus 4.8
parent 5793e84292
commit 06eabc144a
2 changed files with 24 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/styles/home-rebuild.css
+18 -1
View File
@@ -244,15 +244,32 @@
@media (max-width: 1080px) {
.hero-rebuild { padding: 108px 36px 80px; } /* keep top clear of the fixed header */
.hero-rebuild-container { grid-template-columns: 1fr; gap: 48px; }
/* minmax(0, 1fr), not 1fr: a plain 1fr track has an `auto` (min-content)
floor, so the demo's 460px-wide browser frame held the column wider than a
phone viewport and the hero clipped. minmax(0,…) lets it shrink and the
frame clips its own content (overflow:hidden) instead. */
.hero-rebuild-container { grid-template-columns: minmax(0, 1fr); gap: 48px; }
.hero-rebuild-right { justify-self: stretch; max-width: 100%; }
.home-kinpaku .hero-rebuild-right .split-container { height: 380px; }
}
@media (max-width: 720px) {
.hero-rebuild { padding: 92px 24px 64px; } /* clear the compact mobile header */
/* The hero's 24px gutter is the mobile margin now; the container's desktop
56px padding stacked on top of it (160px of chrome) starved the content and
forced the grid track wider than the viewport. Drop it on mobile. */
.hero-rebuild-container { padding-left: 0; padding-right: 0; }
/* Title keeps its design-system clamp (floors at 3.4rem ≈ 54px here): the
Pinstripe display face is condensed, so "interfaces" stays well within a
320px+ viewport. No mobile shrink — at 54px against 16.8px body it holds a
~3.2× hero hierarchy; shrinking it made the heading read smaller than body. */
.hero-rebuild-actions { flex-direction: column; align-items: stretch; }
.home-kinpaku .hero-rebuild-right .split-container { height: 320px; }
/* The hotel mock is authored ~460px wide; in the narrow mobile frame its full
nav (logo + 4 links + Book) overran the right edge and clipped mid-word.
Collapse to logo + Book — the realistic narrow-viewport nav, and it keeps
the hero (the picked element) as the demo's clear subject. */
.hero-live-demo .hotel-nav-links { display: none; }
}
/* ============================================================================
site/styles/workflow.css
+6
View File
@@ -1990,7 +1990,13 @@
font-size: 12px;
line-height: 1.7;
color: oklch(80% 0 0);
/* Lines stay `pre` (a terminal keeps its alignment); when they outrun the
frame on narrow viewports, scroll like a real terminal instead of clipping
mid-word. No scrollbar chrome — it reads as terminal output, not a widget. */
overflow-x: auto;
scrollbar-width: none;
}
.why-terminal-body::-webkit-scrollbar { display: none; }
.why-terminal-line { white-space: pre; }
.why-terminal-line--prompt { color: oklch(90% 0 0); }
.why-terminal-prompt { color: var(--color-accent); margin-right: 4px; }