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

Bigger, truly invisible buffer around demo

Browse Source 
Two issues with the previous buffer pass:

1. The buffer was too small (20px) to feel forgiving.
2. The visible box had a cream background while the buffer area showed
   the paper page background, creating a 2% contrast inset that read
   as a card-inside-a-card border.

Bump the buffer to 32px per side (64px total) so the demo stops at
500px visible with 564px max-width. Change .split-container background
from cream to paper so it blends into the page and the buffer area is
genuinely invisible. The demo box is now defined by its 1px mist border
and 12px radius alone; individual demos still provide their own
background colors on top via the inline before/after HTML.
This commit is contained in:
Paul Bakaus
2026-04-08 11:15:15 -07:00
parent 71f46ef20f
commit 13ade4a7e2
1 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/sub-pages.css
+13 -8
View File
@@ -997,13 +997,15 @@ main#main {
.split-comparison {
position: relative;
width: 100%;
max-width: 540px;
/* 20px padding acts as an invisible hover buffer so the divider does
not immediately snap back when the pointer grazes the box edge.
Negative top/bottom margins collapse the padding out of layout flow
so the demo still sits at its intended rhythm in the page. */
padding: 20px;
margin: -20px 0 calc(clamp(2rem, 4vw, 3rem) - 20px);
/* 500px visible + 64px buffer (32px per side) = 564px total.
box-sizing: border-box is inherited, so children sit in 500px. */
max-width: 564px;
/* 32px padding is an invisible hover buffer so the divider does not
immediately snap back when the pointer grazes the visible box
edge. Negative top/bottom margins collapse the padding out of
layout flow so the demo keeps its rhythm in the page. */
padding: 32px;
margin: -32px 0 calc(clamp(2rem, 4vw, 3rem) - 32px);
}
.split-container {
@@ -1012,7 +1014,10 @@ main#main {
height: 360px;
border-radius: 12px;
overflow: hidden;
background: var(--color-cream);
/* Match the page background so the 32px padding area is invisible.
The border + border-radius define the visible box; individual
demo content provides its own colors on top. */
background: var(--color-paper);
border: 1px solid var(--color-mist);
cursor: ew-resize;
user-select: none;