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

Scope sub-page .visual-mode-preview styles so they don't leak to homepage

Browse Source 
The /visual-mode sub-page rules added in 27d1b13 duplicated
.visual-mode-preview (and its header/dot/title children) in
sub-pages.css with a max-width + margin: 0 auto. Because sub-pages.css
loads after main.css on index.html, those styles won on the homepage
too. Auto margins on a grid item disable justify-self: stretch, so the
preview collapsed to the iframe's 300px intrinsic width instead of
filling its 3fr cell in .visual-mode-demo.

Scope the rules to .visual-mode-page so they only apply on the sub-page
and the homepage falls back to main.css's .visual-mode-preview rule.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Paul Bakaus
2026-04-08 13:57:43 -07:00
co-authored by Claude Opus 4.6
parent a6a58f712c
commit b0c78cacda
1 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/sub-pages.css
+12 -9
View File
@@ -1146,9 +1146,12 @@ main#main {
text-align: center;
}
/* Mac-window chrome around the iframe (same shape as the homepage
preview; ported here so sub-pages.css is self-contained). */
.visual-mode-preview {
/* Mac-window chrome around the iframe. Scoped to .visual-mode-page so
the sub-page's preview styles don't leak onto the homepage, which
carries its own .visual-mode-preview rules in main.css. The auto
margins below would disable grid-item stretch on the homepage and
collapse the preview to the iframe's 300px intrinsic width. */
.visual-mode-page .visual-mode-preview {
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--color-mist);
@@ -1157,7 +1160,7 @@ main#main {
margin: 0 auto;
}
.visual-mode-preview-header {
.visual-mode-page .visual-mode-preview-header {
display: flex;
align-items: center;
gap: 6px;
@@ -1166,18 +1169,18 @@ main#main {
border-bottom: 1px solid var(--color-mist);
}
.visual-mode-preview-dot {
.visual-mode-page .visual-mode-preview-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.visual-mode-preview-dot.red { background: #ff5f56; }
.visual-mode-preview-dot.yellow { background: #ffbd2e; }
.visual-mode-preview-dot.green { background: #27c93f; }
.visual-mode-page .visual-mode-preview-dot.red { background: #ff5f56; }
.visual-mode-page .visual-mode-preview-dot.yellow { background: #ffbd2e; }
.visual-mode-page .visual-mode-preview-dot.green { background: #27c93f; }
.visual-mode-preview-title {
.visual-mode-page .visual-mode-preview-title {
margin-left: auto;
font-family: var(--font-mono);
font-size: 0.75rem;