skills/pbakaus_impeccable
1
0
Fork 0
mirror of https://github.com/pbakaus/impeccable.git synced 2026-09-21 10:36:27 +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/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; }