ilia/levkin.ca
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix stack cover: single sticky folder unit, hide inactive bodies.

Browse Source 
Tested all four variants in browser — only active layer body visible while
tabs stay staggered; scroll covers previous layers correctly.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
ilia
2026-05-20 23:11:57 -04:00
co-authored by Cursor
parent bb8469ca10
commit cfe1cf3922
14 changed files with 499 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stack-rack/rack.css
+23 -14
View File
@@ -37,17 +37,16 @@ body {
.mount { padding: 0 0.25rem; }
.unit {
position: relative;
position: sticky;
margin: 0;
border: 1px solid #2a3448;
background: #161a22;
border-radius: 2px;
box-shadow: 0 6px 0 #0a0c10, 0 12px 24px rgba(0,0,0,0.4);
z-index: 10;
}
.unit-head {
position: sticky;
z-index: 60;
display: flex; align-items: center; gap: 0.5rem;
padding: 0.4rem 0.65rem;
background: #1a2030;
@@ -72,26 +71,36 @@ body {
.unit-head a.ext { color: #60a5fa; text-decoration: none; font-size: 0.58rem; }
.unit-body {
position: sticky;
top: var(--stack-reveal);
padding: 0.6rem 0.7rem 2rem;
min-height: var(--stack-body-h);
z-index: 10;
background: #161a22;
}
.u0 { top: calc(var(--stack-stick) + var(--stack-step) * 0); }
.u0 .unit-body { margin-top: calc(var(--stack-reveal) - var(--stack-stick) - var(--stack-tab-h)); }
.u1 { top: calc(var(--stack-stick) + var(--stack-step) * 1); }
.u1 .unit-body { margin-top: calc(var(--stack-reveal) - var(--stack-stick) - var(--stack-step) * 1 - var(--stack-tab-h)); }
.u2 { top: calc(var(--stack-stick) + var(--stack-step) * 2); }
.u2 .unit-body { margin-top: calc(var(--stack-reveal) - var(--stack-stick) - var(--stack-step) * 2 - var(--stack-tab-h)); }
.u3 { top: calc(var(--stack-stick) + var(--stack-step) * 3); }
.u3 .unit-body { margin-top: calc(var(--stack-reveal) - var(--stack-stick) - var(--stack-step) * 3 - var(--stack-tab-h)); }
.u4 { top: calc(var(--stack-stick) + var(--stack-step) * 4); }
.u4 .unit-body { margin-top: calc(var(--stack-reveal) - var(--stack-stick) - var(--stack-step) * 4 - var(--stack-tab-h)); }
.u5 { top: calc(var(--stack-stick) + var(--stack-step) * 5); }
.u5 .unit-body { margin-top: calc(var(--stack-reveal) - var(--stack-stick) - var(--stack-step) * 5 - var(--stack-tab-h)); }
.u6 { top: calc(var(--stack-stick) + var(--stack-step) * 6); }
.u6 .unit-body { margin-top: calc(var(--stack-reveal) - var(--stack-stick) - var(--stack-step) * 6 - var(--stack-tab-h)); }
.unit-body strong { color: #e5e7eb; display: block; margin-bottom: 0.2rem; }
.unit-body p { color: #6b7280; font-size: 0.7rem; }
.unit-body a { color: #60a5fa; text-decoration: none; }
.u0 .unit-head { top: calc(var(--stack-stick) + var(--stack-step) * 0); }
.u1 .unit-head { top: calc(var(--stack-stick) + var(--stack-step) * 1); }
.u2 .unit-head { top: calc(var(--stack-stick) + var(--stack-step) * 2); }
.u3 .unit-head { top: calc(var(--stack-stick) + var(--stack-step) * 3); }
.u4 .unit-head { top: calc(var(--stack-stick) + var(--stack-step) * 4); }
.u5 .unit-head { top: calc(var(--stack-stick) + var(--stack-step) * 5); }
.u6 .unit-head { top: calc(var(--stack-stick) + var(--stack-step) * 6); }
.foot {
display: flex; justify-content: space-between;
width: min(600px, 100%); margin: 0 auto;