From 17338fc3b4c6f8159913029009172e6d36add3c9 Mon Sep 17 00:00:00 2001 From: ilia Date: Wed, 20 May 2026 22:50:45 -0400 Subject: [PATCH] Tighten stack overlap; fix folder top tabs; replace paper with rack. Cards and trace use negative-margin overlap; folder tabs stay above bodies; new server-rack variant. Co-authored-by: Cursor --- README.md | 6 +- index.html | 24 ++-- stack-folder/folder.css | 135 +++++++++++++-------- stack-folder/index.html | 2 +- stack-paper/index.html | 26 ---- stack-paper/paper.css | 46 ------- stack-rack/index.html | 31 +++++ stack-rack/rack.css | 128 +++++++++++++++++++ stack-paper/paper.js => stack-rack/rack.js | 9 +- stack-trace/index.html | 2 +- stack-trace/trace.css | 54 ++++++--- stack/index.html | 2 +- stack/stack.css | 63 +++++----- vite.config.js | 2 +- 14 files changed, 342 insertions(+), 188 deletions(-) delete mode 100644 stack-paper/index.html delete mode 100644 stack-paper/paper.css create mode 100644 stack-rack/index.html create mode 100644 stack-rack/rack.css rename stack-paper/paper.js => stack-rack/rack.js (59%) diff --git a/README.md b/README.md index 6b2d9c0..1fe564f 100644 --- a/README.md +++ b/README.md @@ -15,10 +15,10 @@ Design concepts for the Levkin software development company homepage. | Variant | Path | Metaphor | |---------|------|----------| -| **Cards** | `/stack/` | Dark sticky cards with stack lips | -| **Folder** | `/stack-folder/` | Manila folders, side tabs | -| **Paper** | `/stack-paper/` | Cream document pile | +| **Cards** | `/stack/` | Dark overlapping sticky cards | +| **Folder** | `/stack-folder/` | Manila folders, top tabs stay visible | | **Trace** | `/stack-trace/` | Call-stack / devtools frames | +| **Rack** | `/stack-rack/` | Server rack 1U units with status LEDs | Open `/` to compare all. diff --git a/index.html b/index.html index 5ed90a6..d0f0969 100644 --- a/index.html +++ b/index.html @@ -173,9 +173,13 @@ font-size: 0.65rem; border-left: 12px solid #c9a86c; } - .preview--paper { - background: #3d3832; - font-size: 2rem; + .preview--rack { + background: #12141a; + color: #4ade80; + font-family: 'DM Mono', monospace; + font-size: 0.55rem; + letter-spacing: 0.15em; + border: 2px solid #2a3040; } .preview--trace { background: #0d0d0f; @@ -241,7 +245,7 @@

Stack · Cards

-

L0–L6 sticky cards with stack lips. Scroll stops at L6.

+

L0–L6 overlapping sticky cards. Scroll stops at L6.

default · dark · technical
@@ -249,16 +253,16 @@
L0│tab

Stack · Folder

-

Manila folders — colored side tabs, vertical labels.

+

Manila folders — name tabs on top, always visible when stacked.

folder · tabs · office
- -
📄
+ +
U0▮U1▮
-

Stack · Paper

-

Offset document pile — cream sheets, slight rotation.

- paper · desk · serif +

Stack · Rack

+

Server rack 1U units — LEDs, handles, infra stack.

+ rack · infra · LEDs
diff --git a/stack-folder/folder.css b/stack-folder/folder.css index 4174e2d..89fb8e0 100644 --- a/stack-folder/folder.css +++ b/stack-folder/folder.css @@ -1,68 +1,107 @@ :root { - --nav: 2.5rem; --stick: 1rem; --step: 1.1rem; --unit: 56vh; - --mono: 'IBM Plex Mono', monospace; --sans: 'Instrument Sans', system-ui, sans-serif; + --nav: 2.5rem; + --stick: 0.5rem; + --step: 1.85rem; + --tab-h: 1.65rem; + --scroll-tick: 26vh; + --overlap: 22vh; + --mono: 'IBM Plex Mono', monospace; + --sans: 'Instrument Sans', system-ui, sans-serif; } + * { box-sizing: border-box; margin: 0; padding: 0; } + body { font-family: var(--sans); background: #2a2824; color: #1a1814; } + .nav { - position: fixed; top: 0; left: 0; right: 0; z-index: 100; - display: flex; gap: 1rem; padding: 0.5rem 1rem; font-family: var(--mono); font-size: 0.62rem; + position: fixed; top: 0; left: 0; right: 0; z-index: 300; + display: flex; gap: 1rem; padding: 0.5rem 1rem; + font-family: var(--mono); font-size: 0.62rem; background: rgba(42,40,36,0.95); color: #c4b8a8; } + .nav a { color: #8a8278; text-decoration: none; } .depth { margin-left: auto; color: #d4a574; font-weight: 600; } -.mount { max-width: 520px; margin: 0 auto; padding-top: var(--nav); } -.scroll-section { height: var(--unit); } -.scroll-section--final { height: calc(var(--unit) * 0.5); min-height: 240px; } + +.mount { + max-width: 520px; + margin: 0 auto; + padding: calc(var(--nav) + 0.5rem) 1rem 0; +} + +.scroll-section { height: var(--scroll-tick); position: relative; } +.scroll-section--final { height: 16vh; min-height: 180px; } .stop { height: 1px; margin-bottom: 3rem; } + +/* Folder stacks; tab sits above body and stays visible */ .folder { position: sticky; - margin-left: 2.5rem; + margin-bottom: calc(-1 * var(--overlap)); + padding-top: 0; +} + +.tab { + position: relative; + z-index: 50; + display: inline-block; + font-family: var(--mono); + font-size: 0.58rem; + font-weight: 600; + letter-spacing: 0.05em; + padding: 0.35rem 0.85rem 0.3rem; + border-radius: 6px 6px 0 0; + border: 1px solid rgba(0,0,0,0.12); + border-bottom: none; + margin-left: 0.5rem; + box-shadow: 0 -2px 8px rgba(0,0,0,0.12); +} + +.body { + position: relative; + z-index: 1; background: #e8e2d4; border: 1px solid #c4b8a8; - border-radius: 0 6px 6px 6px; - box-shadow: 4px 4px 0 rgba(0,0,0,0.15), 0 12px 28px rgba(0,0,0,0.25); - min-height: 140px; -} -.tab { - position: absolute; - left: -2.5rem; - top: 0; - width: 2.35rem; - height: 100%; - min-height: 120px; - writing-mode: vertical-rl; - transform: rotate(180deg); - font-family: var(--mono); - font-size: 0.55rem; - letter-spacing: 0.06em; - padding: 0.5rem 0.25rem; - border-radius: 6px 0 0 6px; - display: flex; - align-items: center; - justify-content: center; - font-weight: 500; + border-radius: 0 8px 8px 8px; + padding: 1rem 1.2rem 1.1rem; + box-shadow: 3px 6px 20px rgba(0,0,0,0.2); + min-height: 100px; } + .f0 { top: calc(var(--nav) + var(--stick)); z-index: 1; } -.f0 .tab { background: #c9a86c; color: #2a2824; } +.f0 .tab { background: #c9a86c; color: #2a2824; z-index: 107; } .f1 { top: calc(var(--nav) + var(--stick) + var(--step)); z-index: 2; } -.f1 .tab { background: #a8c4d4; } -.f2 { top: calc(var(--nav) + var(--stick) + var(--step)*2); z-index: 3; } -.f2 .tab { background: #b8d4a8; } -.f3 { top: calc(var(--nav) + var(--stick) + var(--step)*3); z-index: 4; } -.f3 .tab { background: #d4b8c4; } -.f4 { top: calc(var(--nav) + var(--stick) + var(--step)*4); z-index: 5; } -.f4 .tab { background: #d4c8a8; } -.f5 { top: calc(var(--nav) + var(--stick) + var(--step)*5); z-index: 6; } -.f5 .tab { background: #c4c4c4; } -.f6 { top: calc(var(--nav) + var(--stick) + var(--step)*6); z-index: 7; } -.f6 .tab { background: #2a4a6b; color: #e8e2d4; } -.body { padding: 1.1rem 1.25rem; } -.body h1, .body h2 { font-size: 1.2rem; margin-bottom: 0.35rem; } -.body p { font-size: 0.88rem; color: #4a4844; } +.f1 .tab { background: #a8c4d4; color: #1a2830; z-index: 108; } +.f2 { top: calc(var(--nav) + var(--stick) + var(--step) * 2); z-index: 3; } +.f2 .tab { background: #b8d4a8; color: #1a2818; z-index: 109; } +.f3 { top: calc(var(--nav) + var(--stick) + var(--step) * 3); z-index: 4; } +.f3 .tab { background: #d4b8c4; color: #2a1820; z-index: 110; } +.f4 { top: calc(var(--nav) + var(--stick) + var(--step) * 4); z-index: 5; } +.f4 .tab { background: #d4c8a8; color: #2a2418; z-index: 111; } +.f5 { top: calc(var(--nav) + var(--stick) + var(--step) * 5); z-index: 6; } +.f5 .tab { background: #c4c4c4; color: #2a2a2a; z-index: 112; } +.f6 { + top: calc(var(--nav) + var(--stick) + var(--step) * 6); + z-index: 7; + margin-bottom: 0; +} +.f6 .tab { background: #2a4a6b; color: #e8e2d4; z-index: 113; } + +.body h1, .body h2 { font-size: 1.15rem; margin-bottom: 0.3rem; } +.body p { font-size: 0.86rem; color: #4a4844; } .body a { color: #2a4a6b; } -.avail { font-family: var(--mono); font-size: 0.65rem; color: #3d6b3d; margin-top: 0.35rem; } -.btn { font-family: var(--mono); font-size: 0.68rem; padding: 0.4rem 0.7rem; background: #2a4a6b; color: #fff; text-decoration: none; border-radius: 3px; margin-right: 0.35rem; } +.avail { font-family: var(--mono); font-size: 0.62rem; color: #3d6b3d; margin-top: 0.3rem; } +.btn { + font-family: var(--mono); font-size: 0.65rem; padding: 0.35rem 0.65rem; + background: #2a4a6b; color: #fff; text-decoration: none; border-radius: 3px; margin-right: 0.3rem; +} .btn.ghost { background: transparent; color: #2a4a6b; border: 1px solid #2a4a6b; } -.foot { display: flex; justify-content: space-between; max-width: 520px; margin: 0 auto; padding: 0 1rem 2rem; font-family: var(--mono); font-size: 0.6rem; color: #6a6458; } + +.foot { + display: flex; justify-content: space-between; max-width: 520px; margin: 0 auto; + padding: 0 1rem 2rem; font-family: var(--mono); font-size: 0.6rem; color: #6a6458; +} .foot a { color: #6a6458; text-decoration: none; } + +@media (max-width: 700px) { + :root { --step: 1.5rem; --overlap: 20vh; --scroll-tick: 24vh; } +} diff --git a/stack-folder/index.html b/stack-folder/index.html index 51ba390..30da629 100644 --- a/stack-folder/index.html +++ b/stack-folder/index.html @@ -9,7 +9,7 @@ - +
L0 · foundation

Levkin

Software development · Canada · remote · 15+ yrs

Taking new engagements

L1 · application

Custom software

Web apps, APIs, tools — TS · Python · .NET

diff --git a/stack-paper/index.html b/stack-paper/index.html deleted file mode 100644 index 56f22b2..0000000 --- a/stack-paper/index.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - Levkin — Stack Paper - - - - - - -
-

Levkin

Software development · Canada

15+ years · 8h→2min releases · taking new work

-

Custom software

Apps, APIs, internal tools

-
-
-
-
-
-
-
-
levkin.ca · git
- - - diff --git a/stack-paper/paper.css b/stack-paper/paper.css deleted file mode 100644 index 45a8dc3..0000000 --- a/stack-paper/paper.css +++ /dev/null @@ -1,46 +0,0 @@ -:root { - --nav: 2.5rem; --stick: 0.85rem; --step: 0.95rem; --unit: 54vh; - --desk: #3d3832; --paper: #f6f3eb; --ink: #1a1814; -} -* { box-sizing: border-box; margin: 0; padding: 0; } -body { font-family: 'Literata', Georgia, serif; background: var(--desk); color: var(--ink); } -.nav { - position: fixed; top: 0; left: 0; right: 0; z-index: 100; - display: flex; gap: 1rem; padding: 0.5rem 1rem; - font-family: 'IBM Plex Mono', monospace; font-size: 0.62rem; - background: rgba(61,56,50,0.92); color: #c4b8a8; -} -.nav a { color: #9a9288; text-decoration: none; } -#depth { margin-left: auto; color: #8b7355; font-weight: 600; } -.mount { max-width: 480px; margin: 0 auto; padding: var(--nav) 1.25rem 0; } -.scroll-section { height: var(--unit); } -.scroll-section--final { height: calc(var(--unit) * 0.48); min-height: 220px; } -.stop { height: 1px; margin-bottom: 3rem; } -.sheet { - position: sticky; - background: var(--paper); - border: 1px solid #d4cfc4; - padding: 0; - box-shadow: 2px 3px 0 #e0dcd2, 4px 6px 0 #d8d4c8, 0 16px 32px rgba(0,0,0,0.2); -} -.edge { - display: block; - height: 6px; - background: linear-gradient(180deg, #ebe6dc, #f6f3eb); - border-bottom: 1px solid #e0dcd2; -} -.inner { padding: 1.15rem 1.35rem 1.25rem; } -.inner h1 { font-size: 1.85rem; font-weight: 600; } -.inner h2 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.3rem; } -.sub { font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; color: #6a6458; margin-bottom: 0.5rem; } -.inner p { font-size: 0.9rem; color: #4a4844; line-height: 1.55; } -.inner a { color: #2a4a6b; } -.s0 { top: calc(var(--nav) + var(--stick)); z-index: 1; transform: rotate(-0.4deg); margin-left: 0; } -.s1 { top: calc(var(--nav) + var(--stick) + var(--step)); z-index: 2; transform: rotate(0.3deg); margin-left: 6px; } -.s2 { top: calc(var(--nav) + var(--stick) + var(--step)*2); z-index: 3; transform: rotate(-0.2deg); margin-left: 12px; } -.s3 { top: calc(var(--nav) + var(--stick) + var(--step)*3); z-index: 4; transform: rotate(0.5deg); margin-left: 8px; } -.s4 { top: calc(var(--nav) + var(--stick) + var(--step)*4); z-index: 5; transform: rotate(-0.3deg); margin-left: 14px; } -.s5 { top: calc(var(--nav) + var(--stick) + var(--step)*5); z-index: 6; transform: rotate(0.2deg); margin-left: 10px; } -.s6 { top: calc(var(--nav) + var(--stick) + var(--step)*6); z-index: 7; transform: rotate(0deg); margin-left: 4px; } -.foot { text-align: center; padding: 0 1rem 2.5rem; font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; color: #7a7468; } -.foot a { color: #7a7468; } diff --git a/stack-rack/index.html b/stack-rack/index.html new file mode 100644 index 0000000..90f4ed4 --- /dev/null +++ b/stack-rack/index.html @@ -0,0 +1,31 @@ + + + + + + Levkin — Stack Rack + + + + + + + +
+
LEV-RACK-01
+
+
U0foundation
Levkin

Software dev · CA · 15+ yrs · new work open

+
U1application
custom_software

TS · Python · .NET

+
U2automationauto↗
pipeline_cluster

n8n · CI/CD · LLM hooks

+
U3enterprisecaseware↗
caseware_module

MNP · JazzIt · 8h→2m

+
+
U5opsjobs↗
job_ops

auth · internal

+
+
+
+
+ + + + + diff --git a/stack-rack/rack.css b/stack-rack/rack.css new file mode 100644 index 0000000..1c4ead2 --- /dev/null +++ b/stack-rack/rack.css @@ -0,0 +1,128 @@ +:root { + --nav: 2.5rem; + --stick: 0.5rem; + --step: 1.7rem; + --scroll-tick: 26vh; + --overlap: 22vh; + --rack: #12141a; + --mono: 'IBM Plex Mono', monospace; +} + +* { box-sizing: border-box; margin: 0; padding: 0; } + +body { + font-family: var(--mono); + background: #08090c; + color: #9ca3af; + font-size: 0.75rem; +} + +.nav { + position: fixed; top: 0; left: 0; right: 0; z-index: 200; + display: flex; gap: 1rem; padding: 0.5rem 1rem; font-size: 0.62rem; + background: rgba(8,9,12,0.95); border-bottom: 1px solid #1e2430; +} + +.nav a { color: #5a6478; text-decoration: none; } +.nav a:hover { color: #4ade80; } +#depth { margin-left: auto; color: #4ade80; font-weight: 600; } + +.rack-frame { + max-width: 540px; + margin: 0 auto; + padding: calc(var(--nav) + 0.75rem) 0.75rem 0; + border-left: 4px solid #2a3040; + border-right: 4px solid #2a3040; + background: linear-gradient(90deg, #0c0e14 0%, var(--rack) 8%, var(--rack) 92%, #0c0e14 100%); + min-height: 100vh; + box-shadow: inset 0 0 40px rgba(0,0,0,0.5); +} + +.rack-label { + font-size: 0.55rem; + letter-spacing: 0.2em; + color: #3a4458; + padding: 0 0.5rem 0.75rem; + border-bottom: 1px dashed #2a3040; + margin-bottom: 0.5rem; +} + +.mount { padding: 0 0.35rem; } + +.scroll-section { height: var(--scroll-tick); position: relative; } +.scroll-section--final { height: 16vh; min-height: 160px; } +.stop { height: 1px; margin-bottom: 2rem; } + +.unit { + position: sticky; + margin-bottom: calc(-1 * var(--overlap)); + border: 1px solid #2a3448; + background: #161a22; + border-radius: 2px; + overflow: hidden; + box-shadow: 0 4px 0 #0a0c10, inset 0 1px 0 rgba(255,255,255,0.04); +} + +.unit-head { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.35rem 0.65rem; + background: #1a2030; + border-bottom: 1px solid #2a3448; + font-size: 0.62rem; + position: relative; + z-index: 20; +} + +.led { + width: 6px; + height: 6px; + border-radius: 50%; + background: #3a4458; + flex-shrink: 0; +} + +.led.on { background: #4ade80; box-shadow: 0 0 6px #4ade80; } +.led.blink { background: #fbbf24; animation: blink 1.2s ease infinite; } + +@keyframes blink { + 50% { opacity: 0.35; } +} + +.uid { color: #6b7280; font-weight: 600; min-width: 1.5rem; } +.svc { color: #9ca3af; text-transform: uppercase; letter-spacing: 0.08em; flex: 1; } +.unit-head a { + color: #60a5fa; + text-decoration: none; + font-size: 0.58rem; +} + +.unit-body { + padding: 0.55rem 0.65rem 0.65rem; + position: relative; + z-index: 1; +} + +.unit-body strong { color: #e5e7eb; font-weight: 500; display: block; margin-bottom: 0.15rem; } +.unit-body p { color: #6b7280; font-size: 0.68rem; } +.unit-body a { color: #60a5fa; text-decoration: none; } +.unit-body a:hover { text-decoration: underline; } + +.u0 { top: calc(var(--nav) + var(--stick)); z-index: 1; } +.u1 { top: calc(var(--nav) + var(--stick) + var(--step)); z-index: 2; } +.u2 { top: calc(var(--nav) + var(--stick) + var(--step) * 2); z-index: 3; } +.u3 { top: calc(var(--nav) + var(--stick) + var(--step) * 3); z-index: 4; } +.u4 { top: calc(var(--nav) + var(--stick) + var(--step) * 4); z-index: 5; } +.u5 { top: calc(var(--nav) + var(--stick) + var(--step) * 5); z-index: 6; } +.u6 { + top: calc(var(--nav) + var(--stick) + var(--step) * 6); + z-index: 7; + margin-bottom: 0; +} + +.foot { + display: flex; justify-content: space-between; max-width: 540px; margin: 0 auto; + padding: 1rem 1.25rem 2rem; font-size: 0.58rem; color: #3a4458; +} +.foot a { color: #3a4458; text-decoration: none; } diff --git a/stack-paper/paper.js b/stack-rack/rack.js similarity index 59% rename from stack-paper/paper.js rename to stack-rack/rack.js index 171d96c..5063847 100644 --- a/stack-paper/paper.js +++ b/stack-rack/rack.js @@ -1,10 +1,15 @@ const sections = document.querySelectorAll('.scroll-section'); const depthEl = document.getElementById('depth'); const mid = () => window.innerHeight * 0.42; + function tick() { let a = 0; - sections.forEach((s) => { const r = s.getBoundingClientRect(); if (r.top <= mid() && r.bottom > mid()) a = +s.dataset.layer; }); - depthEl.textContent = `L${a}`; + sections.forEach((s) => { + const r = s.getBoundingClientRect(); + if (r.top <= mid() && r.bottom > mid()) a = +s.dataset.layer; + }); + depthEl.textContent = `U${a}`; } + window.addEventListener('scroll', tick, { passive: true }); tick(); diff --git a/stack-trace/index.html b/stack-trace/index.html index 033a44a..6ca2165 100644 --- a/stack-trace/index.html +++ b/stack-trace/index.html @@ -9,7 +9,7 @@ - +
at Levkin.foundation (levkin.ca:0)
Levkin

Canadian software practice · 15+ yrs · remote

at Levkin.application (levkin.ca:1)
custom_software()

TS · Python · .NET · APIs

diff --git a/stack-trace/trace.css b/stack-trace/trace.css index 8c6edd8..9918b52 100644 --- a/stack-trace/trace.css +++ b/stack-trace/trace.css @@ -1,46 +1,66 @@ :root { - --nav: 2.5rem; --stick: 0.9rem; --step: 1rem; --unit: 54vh; - --bg: #0d0d0f; --mono: 'IBM Plex Mono', monospace; + --nav: 2.5rem; + --stick: 0.5rem; + --step: 1.75rem; + --scroll-tick: 26vh; + --overlap: 22vh; + --mono: 'IBM Plex Mono', monospace; } + * { box-sizing: border-box; margin: 0; padding: 0; } -body { font-family: var(--mono); background: var(--bg); color: #b8b4af; font-size: 0.8rem; } + +body { font-family: var(--mono); background: #0d0d0f; color: #b8b4af; font-size: 0.8rem; } + .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; gap: 1rem; padding: 0.5rem 1rem; font-size: 0.62rem; background: rgba(13,13,15,0.95); border-bottom: 1px solid #2a2a30; } + .nav a { color: #5a5854; text-decoration: none; } .nav a:hover { color: #7eb87a; } -#depth { margin-left: auto; color: #7eb87a; } +#depth { margin-left: auto; color: #7eb87a; font-weight: 600; } + .mount { max-width: 560px; margin: 0 auto; padding-top: var(--nav); } -.scroll-section { height: var(--unit); } -.scroll-section--final { height: calc(var(--unit) * 0.5); min-height: 200px; } + +.scroll-section { height: var(--scroll-tick); position: relative; } +.scroll-section--final { height: 16vh; min-height: 180px; } .stop { height: 1px; margin-bottom: 3rem; } + .frame { position: sticky; - margin: 0 1rem; + margin: 0 0.75rem calc(-1 * var(--overlap)) 0.75rem; border-left: 3px solid #3a3a44; background: #141418; - padding: 0.65rem 0 0.65rem 1rem; - box-shadow: 0 4px 0 #0a0a0c, 0 8px 20px rgba(0,0,0,0.35); + padding: 0.6rem 0 0.6rem 0.9rem; + box-shadow: 0 6px 0 #0a0a0c, 0 12px 24px rgba(0,0,0,0.4); } + .frame code { display: block; - font-size: 0.68rem; + font-size: 0.66rem; color: #6b9b6b; - margin-bottom: 0.45rem; + margin-bottom: 0.35rem; } + .frame-body strong { color: #e8e6e3; font-weight: 500; } -.frame-body p { color: #6b6966; font-size: 0.75rem; margin-top: 0.2rem; } +.frame-body p { color: #6b6966; font-size: 0.72rem; margin-top: 0.15rem; } .frame-body a { color: #8b9cb3; text-decoration: none; } .frame-body a:hover { color: #7eb87a; } + .f0 { top: calc(var(--nav) + var(--stick)); z-index: 1; border-color: #c4a574; } .f1 { top: calc(var(--nav) + var(--stick) + var(--step)); z-index: 2; } -.f2 { top: calc(var(--nav) + var(--stick) + var(--step)*2); z-index: 3; } -.f3 { top: calc(var(--nav) + var(--stick) + var(--step)*3); z-index: 4; } -.f4 { top: calc(var(--nav) + var(--stick) + var(--step)*4); z-index: 5; border-color: #6b8b9b; } -.f5 { top: calc(var(--nav) + var(--stick) + var(--step)*5); z-index: 6; } -.f6 { top: calc(var(--nav) + var(--stick) + var(--step)*6); z-index: 7; border-color: #7eb87a; } +.f2 { top: calc(var(--nav) + var(--stick) + var(--step) * 2); z-index: 3; } +.f3 { top: calc(var(--nav) + var(--stick) + var(--step) * 3); z-index: 4; } +.f4 { top: calc(var(--nav) + var(--stick) + var(--step) * 4); z-index: 5; border-color: #6b8b9b; } +.f5 { top: calc(var(--nav) + var(--stick) + var(--step) * 5); z-index: 6; } +.f6 { + top: calc(var(--nav) + var(--stick) + var(--step) * 6); + z-index: 7; + border-color: #7eb87a; + margin-bottom: 0; +} + .foot { display: flex; justify-content: space-between; max-width: 560px; margin: 0 auto; padding: 0 1.5rem 2.5rem; font-size: 0.6rem; color: #3a3a40; diff --git a/stack/index.html b/stack/index.html index bc5abc1..90b77f9 100644 --- a/stack/index.html +++ b/stack/index.html @@ -14,7 +14,7 @@ diff --git a/stack/stack.css b/stack/stack.css index 9e6ba58..a7697a8 100644 --- a/stack/stack.css +++ b/stack/stack.css @@ -3,9 +3,9 @@ --mono: 'IBM Plex Mono', ui-monospace, monospace; --sans: 'Instrument Sans', system-ui, sans-serif; --nav-h: 2.5rem; - --stick: 1.15rem; - --step: 1.25rem; - --scroll-unit: 58vh; + --step: 2rem; + --scroll-tick: 28vh; + --overlap: 24vh; } * { box-sizing: border-box; margin: 0; padding: 0; } @@ -44,53 +44,51 @@ body { padding: var(--nav-h) 1rem 0; } -/* Each section = one scroll “tick”; sticky card stacks inside */ .scroll-section { - height: var(--scroll-unit); + height: var(--scroll-tick); position: relative; } .scroll-section--final { - height: calc(var(--scroll-unit) * 0.55); - min-height: 280px; + height: 18vh; + min-height: 200px; } -.stack-stop { - height: 1px; - margin-bottom: 4rem; -} +.stack-stop { height: 1px; margin-bottom: 3rem; } .layer { position: sticky; - top: calc(var(--nav-h) + var(--stick)); - margin: 0 0.5rem; - border-radius: 6px 6px 4px 4px; + margin: 0 0.35rem calc(-1 * var(--overlap)) 0.35rem; + border-radius: 8px 8px 6px 6px; border: 1px solid rgba(255,255,255,0.08); - box-shadow: 0 8px 24px rgba(0,0,0,0.4); + box-shadow: 0 10px 32px rgba(0,0,0,0.45); } -/* Visible stack lip — previous layers peek through */ .layer-tab { position: absolute; - top: -5px; - left: 12px; - right: 12px; - height: 5px; - border-radius: 4px 4px 0 0; + top: -6px; + left: 10px; + right: 10px; + height: 6px; + border-radius: 5px 5px 0 0; background: inherit; - filter: brightness(1.15); - border: 1px solid rgba(255,255,255,0.06); + filter: brightness(1.12); + border: 1px solid rgba(255,255,255,0.07); border-bottom: none; - box-shadow: 0 -2px 6px rgba(0,0,0,0.2); } -.layer-0 { z-index: 1; background: #1c1c20; top: calc(var(--nav-h) + var(--stick)); } -.layer-1 { z-index: 2; background: #24242c; top: calc(var(--nav-h) + var(--stick) + var(--step)); } -.layer-2 { z-index: 3; background: #2c2c36; top: calc(var(--nav-h) + var(--stick) + var(--step) * 2); } -.layer-3 { z-index: 4; background: #343440; top: calc(var(--nav-h) + var(--stick) + var(--step) * 3); } -.layer-4 { z-index: 5; background: #3c3c4a; top: calc(var(--nav-h) + var(--stick) + var(--step) * 4); } -.layer-5 { z-index: 6; background: #444454; top: calc(var(--nav-h) + var(--stick) + var(--step) * 5); } -.layer-6 { z-index: 7; background: #4c4c5e; top: calc(var(--nav-h) + var(--stick) + var(--step) * 6); } +.layer-0 { z-index: 1; background: #1c1c20; top: calc(var(--nav-h) + 0.5rem); } +.layer-1 { z-index: 2; background: #24242c; top: calc(var(--nav-h) + 0.5rem + var(--step)); } +.layer-2 { z-index: 3; background: #2c2c36; top: calc(var(--nav-h) + 0.5rem + var(--step) * 2); } +.layer-3 { z-index: 4; background: #343440; top: calc(var(--nav-h) + 0.5rem + var(--step) * 3); } +.layer-4 { z-index: 5; background: #3c3c4a; top: calc(var(--nav-h) + 0.5rem + var(--step) * 4); } +.layer-5 { z-index: 6; background: #444454; top: calc(var(--nav-h) + 0.5rem + var(--step) * 5); } +.layer-6 { + z-index: 7; + background: #4c4c5e; + top: calc(var(--nav-h) + 0.5rem + var(--step) * 6); + margin-bottom: 0; +} .layer-inner { padding: 1.1rem 1.25rem 1.2rem; } .layer-head { @@ -132,7 +130,8 @@ body { font-family: var(--mono); font-size: 0.48rem; color: #2a2a30; pointer-events: none; } .stack-ruler span.active { color: #c4a574; } + @media (max-width: 700px) { .stack-ruler, .variants { display: none; } - :root { --scroll-unit: 52vh; --step: 1rem; } + :root { --scroll-tick: 26vh; --overlap: 22vh; --step: 1.65rem; } } diff --git a/vite.config.js b/vite.config.js index eac37ee..16969da 100644 --- a/vite.config.js +++ b/vite.config.js @@ -12,8 +12,8 @@ export default defineConfig({ vault: resolve(__dirname, 'vault/index.html'), stack: resolve(__dirname, 'stack/index.html'), stackFolder: resolve(__dirname, 'stack-folder/index.html'), - stackPaper: resolve(__dirname, 'stack-paper/index.html'), stackTrace: resolve(__dirname, 'stack-trace/index.html'), + stackRack: resolve(__dirname, 'stack-rack/index.html'), }, }, },