Stack · Folder
-
Manila folders — name tabs on top, always visible when stacked.
+
Tabs on top, staggered left — all readable. Click tab or L0–L6 rail to jump.
folder · tabs · office
diff --git a/shared/stack-scroll.js b/shared/stack-scroll.js
new file mode 100644
index 0000000..fc585cd
--- /dev/null
+++ b/shared/stack-scroll.js
@@ -0,0 +1,43 @@
+/** Shared scroll-depth tracking + jump-to-layer for stack variants */
+export function initStackScroll(options = {}) {
+ const {
+ sectionSelector = '.scroll-section',
+ depthEl = document.getElementById('depth'),
+ depthPrefix = 'L',
+ tabSelector = '[data-goto], .jump',
+ } = options;
+
+ const sections = document.querySelectorAll(sectionSelector);
+ if (!sections.length) return;
+
+ const mid = () => window.innerHeight * 0.4;
+
+ function updateDepth() {
+ let active = 0;
+ sections.forEach((sec) => {
+ const r = sec.getBoundingClientRect();
+ if (r.top <= mid() && r.bottom > mid()) active = Number(sec.dataset.layer);
+ });
+ if (depthEl) depthEl.textContent = `${depthPrefix}${active}`;
+ document.querySelectorAll('.stack-ruler button, .stack-ruler [data-goto], .tab-rail button, .tab[data-goto]').forEach((el) => {
+ const n = el.dataset.layer ?? el.dataset.goto;
+ if (n === undefined) return;
+ el.classList.toggle('active', Number(n) === active);
+ });
+ }
+
+ document.querySelectorAll(tabSelector).forEach((tab) => {
+ tab.addEventListener('click', (e) => {
+ e.preventDefault();
+ const layer = tab.dataset.goto;
+ const target = document.querySelector(`${sectionSelector}[data-layer="${layer}"]`);
+ if (!target) return;
+ const navH = 56;
+ const y = target.getBoundingClientRect().top + window.scrollY - navH;
+ window.scrollTo({ top: y, behavior: 'smooth' });
+ });
+ });
+
+ window.addEventListener('scroll', updateDepth, { passive: true });
+ updateDepth();
+}
diff --git a/shared/stack-vars.css b/shared/stack-vars.css
new file mode 100644
index 0000000..6d1a97d
--- /dev/null
+++ b/shared/stack-vars.css
@@ -0,0 +1,8 @@
+/* Import in each stack variant: @import '../shared/stack-vars.css'; */
+:root {
+ --stack-nav: 2.5rem;
+ --stack-stick: 0.5rem;
+ --stack-step: 1.75rem;
+ --stack-tick: 13vh;
+ --stack-overlap: 11.5vh;
+}
diff --git a/stack-folder/folder.css b/stack-folder/folder.css
index 89fb8e0..04985cd 100644
--- a/stack-folder/folder.css
+++ b/stack-folder/folder.css
@@ -1,10 +1,7 @@
+@import '../shared/stack-vars.css';
+
:root {
- --nav: 2.5rem;
- --stick: 0.5rem;
- --step: 1.85rem;
- --tab-h: 1.65rem;
- --scroll-tick: 26vh;
- --overlap: 22vh;
+ --tab-offset: 2.4rem;
--mono: 'IBM Plex Mono', monospace;
--sans: 'Instrument Sans', system-ui, sans-serif;
}
@@ -14,94 +11,152 @@
body { font-family: var(--sans); background: #2a2824; color: #1a1814; }
.nav {
- position: fixed; top: 0; left: 0; right: 0; z-index: 300;
- display: flex; gap: 1rem; padding: 0.5rem 1rem;
+ position: fixed; top: 0; left: 0; right: 0; z-index: 400;
+ display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.5rem 1rem;
font-family: var(--mono); font-size: 0.62rem;
- background: rgba(42,40,36,0.95); color: #c4b8a8;
+ background: rgba(42,40,36,0.97); color: #c4b8a8;
}
.nav a { color: #8a8278; text-decoration: none; }
+.nav a:hover { color: #d4a574; }
.depth { margin-left: auto; color: #d4a574; font-weight: 600; }
-.mount {
- max-width: 520px;
- margin: 0 auto;
- padding: calc(var(--nav) + 0.5rem) 1rem 0;
+/* Quick-jump rail */
+.tab-rail {
+ position: fixed;
+ top: 2.5rem;
+ right: max(0.5rem, calc(50% - 360px));
+ z-index: 350;
+ display: flex;
+ flex-direction: column;
+ gap: 0.2rem;
+ padding: 0.35rem;
+ background: rgba(42,40,36,0.9);
+ border: 1px solid #4a4844;
+ border-radius: 6px;
}
-.scroll-section { height: var(--scroll-tick); position: relative; }
-.scroll-section--final { height: 16vh; min-height: 180px; }
-.stop { height: 1px; margin-bottom: 3rem; }
+.rail-tab {
+ font-family: var(--mono);
+ font-size: 0.55rem;
+ padding: 0.2rem 0.45rem;
+ border: none;
+ border-radius: 3px;
+ background: transparent;
+ color: #8a8278;
+ cursor: pointer;
+ text-align: left;
+}
+
+.rail-tab:hover,
+.rail-tab.active {
+ background: #c9a86c;
+ color: #2a2824;
+}
+
+.mount {
+ width: min(640px, 100%);
+ margin: 0 auto;
+ padding: calc(var(--stack-nav) + 0.25rem) 1rem 0;
+}
+
+.scroll-section {
+ height: var(--stack-tick);
+ position: relative;
+}
+
+.scroll-section--final {
+ height: 12vh;
+ min-height: 220px;
+}
+
+.stack-stop { height: 1px; margin-bottom: 4rem; }
-/* Folder stacks; tab sits above body and stays visible */
.folder {
position: sticky;
- margin-bottom: calc(-1 * var(--overlap));
- padding-top: 0;
+ width: 100%;
+ margin-bottom: calc(-1 * var(--stack-overlap));
}
+/* Tab: sticky with layer, offset left so all labels readable when stacked */
.tab {
- position: relative;
- z-index: 50;
- display: inline-block;
+ position: sticky;
+ display: block;
+ width: fit-content;
+ max-width: calc(100% - 1rem);
font-family: var(--mono);
- font-size: 0.58rem;
+ font-size: 0.62rem;
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);
+ letter-spacing: 0.04em;
+ padding: 0.4rem 1rem 0.35rem;
+ border: 1px solid rgba(0,0,0,0.15);
border-bottom: none;
- margin-left: 0.5rem;
- box-shadow: 0 -2px 8px rgba(0,0,0,0.12);
+ border-radius: 8px 8px 0 0;
+ cursor: pointer;
+ text-align: left;
+ z-index: 50;
+ box-shadow: 0 -3px 10px rgba(0,0,0,0.15);
+ transition: filter 0.15s, transform 0.15s;
}
+.tab:hover { filter: brightness(1.08); transform: translateY(-1px); }
+
.body {
- position: relative;
- z-index: 1;
background: #e8e2d4;
border: 1px solid #c4b8a8;
- 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;
+ border-radius: 0 10px 10px 10px;
+ padding: 1.25rem 1.4rem 1.35rem;
+ min-height: 200px;
+ box-shadow: 0 8px 28px rgba(0,0,0,0.22);
+ position: relative;
+ z-index: 1;
}
-.f0 { top: calc(var(--nav) + var(--stick)); z-index: 1; }
-.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; 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; }
+.f0 { top: calc(var(--stack-nav) + var(--stack-stick)); z-index: 1; }
+.f0 .tab { top: calc(var(--stack-nav) + var(--stack-stick)); margin-left: calc(var(--tab-offset) * 0); z-index: 170; background: #c9a86c; color: #2a2824; }
+
+.f1 { top: calc(var(--stack-nav) + var(--stack-stick) + var(--stack-step)); z-index: 2; }
+.f1 .tab { top: calc(var(--stack-nav) + var(--stack-stick) + var(--stack-step)); margin-left: calc(var(--tab-offset) * 1); z-index: 171; background: #a8c4d4; color: #1a2830; }
+
+.f2 { top: calc(var(--stack-nav) + var(--stack-stick) + var(--stack-step) * 2); z-index: 3; }
+.f2 .tab { top: calc(var(--stack-nav) + var(--stack-stick) + var(--stack-step) * 2); margin-left: calc(var(--tab-offset) * 2); z-index: 172; background: #b8d4a8; color: #1a2818; }
+
+.f3 { top: calc(var(--stack-nav) + var(--stack-stick) + var(--stack-step) * 3); z-index: 4; }
+.f3 .tab { top: calc(var(--stack-nav) + var(--stack-stick) + var(--stack-step) * 3); margin-left: calc(var(--tab-offset) * 3); z-index: 173; background: #d4b8c4; color: #2a1820; }
+
+.f4 { top: calc(var(--stack-nav) + var(--stack-stick) + var(--stack-step) * 4); z-index: 5; }
+.f4 .tab { top: calc(var(--stack-nav) + var(--stack-stick) + var(--stack-step) * 4); margin-left: calc(var(--tab-offset) * 4); z-index: 174; background: #d4c8a8; color: #2a2418; }
+
+.f5 { top: calc(var(--stack-nav) + var(--stack-stick) + var(--stack-step) * 5); z-index: 6; }
+.f5 .tab { top: calc(var(--stack-nav) + var(--stack-stick) + var(--stack-step) * 5); margin-left: calc(var(--tab-offset) * 5); z-index: 175; background: #c4c4c4; color: #2a2a2a; }
+
.f6 {
- top: calc(var(--nav) + var(--stick) + var(--step) * 6);
+ top: calc(var(--stack-nav) + var(--stack-stick) + var(--stack-step) * 6);
z-index: 7;
margin-bottom: 0;
}
-.f6 .tab { background: #2a4a6b; color: #e8e2d4; z-index: 113; }
+.f6 .tab { top: calc(var(--stack-nav) + var(--stack-stick) + var(--stack-step) * 6); margin-left: calc(var(--tab-offset) * 6); z-index: 176; background: #2a4a6b; color: #e8e2d4; }
-.body h1, .body h2 { font-size: 1.15rem; margin-bottom: 0.3rem; }
-.body p { font-size: 0.86rem; color: #4a4844; }
+.body h1 { font-size: 1.65rem; margin-bottom: 0.35rem; }
+.body h2 { font-size: 1.25rem; margin-bottom: 0.4rem; }
+.body p { font-size: 0.92rem; color: #4a4844; line-height: 1.5; }
.body a { color: #2a4a6b; }
-.avail { font-family: var(--mono); font-size: 0.62rem; color: #3d6b3d; margin-top: 0.3rem; }
+.avail { font-family: var(--mono); font-size: 0.68rem; color: #3d6b3d; margin-top: 0.5rem; }
.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;
+ font-family: var(--mono); font-size: 0.7rem; padding: 0.45rem 0.75rem;
+ background: #2a4a6b; color: #fff; text-decoration: none; border-radius: 4px; margin-right: 0.4rem; display: inline-block; margin-top: 0.35rem;
}
.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;
+ display: flex; justify-content: space-between;
+ width: min(640px, 100%); margin: 0 auto;
+ padding: 0 1rem 2rem; font-family: var(--mono); font-size: 0.62rem; color: #6a6458;
}
.foot a { color: #6a6458; text-decoration: none; }
-@media (max-width: 700px) {
- :root { --step: 1.5rem; --overlap: 20vh; --scroll-tick: 24vh; }
+@media (max-width: 720px) {
+ .tab-rail { display: none; }
+ :root { --tab-offset: 1.5rem; --stack-tick: 12vh; --stack-overlap: 10.5vh; }
+ .f6 .tab { margin-left: calc(var(--tab-offset) * 3); }
}
diff --git a/stack-folder/folder.js b/stack-folder/folder.js
deleted file mode 100644
index 171d96c..0000000
--- a/stack-folder/folder.js
+++ /dev/null
@@ -1,10 +0,0 @@
-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}`;
-}
-window.addEventListener('scroll', tick, { passive: true });
-tick();
diff --git a/stack-folder/index.html b/stack-folder/index.html
index 30da629..9cbc8bd 100644
--- a/stack-folder/index.html
+++ b/stack-folder/index.html
@@ -6,21 +6,101 @@