Fix stack overlap, staggered folder tabs with click-to-jump.
Shared scroll driver for all variants; wider folders; tab rail; trace and rack aligned. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Cursor
+12
-8
@@ -6,21 +6,25 @@
|
||||
<title>Levkin — Stack Trace</title>
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="../shared/stack-vars.css" />
|
||||
<link rel="stylesheet" href="./trace.css" />
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav"><a href="/">← options</a><a href="/stack/">cards</a><a href="/stack-folder/">folder</a><a href="/stack-rack/">rack</a><span id="depth">#0</span></nav>
|
||||
<main class="mount">
|
||||
<div class="scroll-section" data-layer="0"><article class="frame f0"><code>at Levkin.foundation (levkin.ca:0)</code><div class="frame-body"><strong>Levkin</strong><p>Canadian software practice · 15+ yrs · remote</p></div></article></div>
|
||||
<div class="scroll-section" data-layer="1"><article class="frame f1"><code>at Levkin.application (levkin.ca:1)</code><div class="frame-body"><strong>custom_software()</strong><p>TS · Python · .NET · APIs</p></div></article></div>
|
||||
<div class="scroll-section" data-layer="2"><article class="frame f2"><code>at Levkin.automation (auto.levkin.ca:2)</code><div class="frame-body"><strong>automation_pipeline()</strong><p>n8n · CI/CD · LLMs</p></div></article></div>
|
||||
<div class="scroll-section" data-layer="3"><article class="frame f3"><code>at Levkin.caseware (caseware.levkin.ca:3)</code><div class="frame-body"><strong>enterprise_module()</strong><p>CaseWare · MNP · JazzIt</p></div></article></div>
|
||||
<div class="scroll-section" data-layer="4"><article class="frame f4"><code>at Levkin.quality (iliadobkin.com:4)</code><div class="frame-body"><strong>sdet_suite()</strong><p><a href="https://iliadobkin.com">iliadobkin.com</a> — traces · Playwright</p></div></article></div>
|
||||
<div class="scroll-section" data-layer="5"><article class="frame f5"><code>at Levkin.operations (jobs.levkin.ca:5)</code><div class="frame-body"><strong>job_ops()</strong><p>internal · auth required</p></div></article></div>
|
||||
<div class="scroll-section scroll-section--final" data-layer="6"><article class="frame f6"><code>at Levkin.engage (interface:6)</code><div class="frame-body"><strong>main()</strong><p><a href="https://cal.levkin.ca/ilia/consult">book_consult()</a> · <a href="mailto:hello@levkine.ca">send_mail()</a></p></div></article></div>
|
||||
<div class="scroll-section" data-layer="0"><article class="frame f0"><button type="button" class="frame-line" data-goto="0">at Levkin.foundation (levkin.ca:0)</button><div class="frame-body"><strong>Levkin</strong><p>Canadian software practice · 15+ yrs · remote</p></div></article></div>
|
||||
<div class="scroll-section" data-layer="1"><article class="frame f1"><button type="button" class="frame-line" data-goto="1">at Levkin.application (levkin.ca:1)</button><div class="frame-body"><strong>custom_software()</strong><p>TS · Python · .NET · APIs</p></div></article></div>
|
||||
<div class="scroll-section" data-layer="2"><article class="frame f2"><button type="button" class="frame-line" data-goto="2">at Levkin.automation (auto.levkin.ca:2)</button><div class="frame-body"><strong>automation_pipeline()</strong><p>n8n · CI/CD · LLMs</p></div></article></div>
|
||||
<div class="scroll-section" data-layer="3"><article class="frame f3"><button type="button" class="frame-line" data-goto="3">at Levkin.caseware (caseware.levkin.ca:3)</button><div class="frame-body"><strong>enterprise_module()</strong><p>CaseWare · MNP · JazzIt</p></div></article></div>
|
||||
<div class="scroll-section" data-layer="4"><article class="frame f4"><button type="button" class="frame-line" data-goto="4">at Levkin.quality (iliadobkin.com:4)</button><div class="frame-body"><strong>sdet_suite()</strong><p><a href="https://iliadobkin.com">iliadobkin.com</a> — traces · Playwright</p></div></article></div>
|
||||
<div class="scroll-section" data-layer="5"><article class="frame f5"><button type="button" class="frame-line" data-goto="5">at Levkin.operations (jobs.levkin.ca:5)</button><div class="frame-body"><strong>job_ops()</strong><p>internal · auth required</p></div></article></div>
|
||||
<div class="scroll-section scroll-section--final" data-layer="6"><article class="frame f6"><button type="button" class="frame-line" data-goto="6">at Levkin.engage (interface:6)</button><div class="frame-body"><strong>main()</strong><p><a href="https://cal.levkin.ca/ilia/consult">book_consult()</a> · <a href="mailto:hello@levkine.ca">send_mail()</a></p></div></article></div>
|
||||
<div class="stop"></div>
|
||||
</main>
|
||||
<footer class="foot"><span>// end of stack</span><a href="https://git.levkin.ca">git.levkin.ca</a></footer>
|
||||
<script src="./trace.js" type="module"></script>
|
||||
<script type="module">
|
||||
import { initStackScroll } from '../shared/stack-scroll.js';
|
||||
initStackScroll({ depthPrefix: '#' });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+42
-35
@@ -1,18 +1,16 @@
|
||||
:root {
|
||||
--nav: 2.5rem;
|
||||
--stick: 0.5rem;
|
||||
--step: 1.75rem;
|
||||
--scroll-tick: 26vh;
|
||||
--overlap: 22vh;
|
||||
--mono: 'IBM Plex Mono', monospace;
|
||||
}
|
||||
@import '../shared/stack-vars.css';
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body { font-family: var(--mono); background: #0d0d0f; color: #b8b4af; font-size: 0.8rem; }
|
||||
body {
|
||||
font-family: 'IBM Plex Mono', ui-monospace, monospace;
|
||||
background: #0d0d0f;
|
||||
color: #b8b4af;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
|
||||
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(13,13,15,0.95); border-bottom: 1px solid #2a2a30;
|
||||
}
|
||||
@@ -21,48 +19,57 @@ body { font-family: var(--mono); background: #0d0d0f; color: #b8b4af; font-size:
|
||||
.nav a:hover { color: #7eb87a; }
|
||||
#depth { margin-left: auto; color: #7eb87a; font-weight: 600; }
|
||||
|
||||
.mount { max-width: 560px; margin: 0 auto; padding-top: var(--nav); }
|
||||
.mount {
|
||||
width: min(600px, 100%);
|
||||
margin: 0 auto;
|
||||
padding-top: var(--stack-nav);
|
||||
}
|
||||
|
||||
.scroll-section { height: var(--scroll-tick); position: relative; }
|
||||
.scroll-section--final { height: 16vh; min-height: 180px; }
|
||||
.stop { height: 1px; margin-bottom: 3rem; }
|
||||
.scroll-section { height: var(--stack-tick); position: relative; }
|
||||
.scroll-section--final { height: 12vh; min-height: 200px; }
|
||||
.stop { height: 1px; margin-bottom: 4rem; }
|
||||
|
||||
.frame {
|
||||
position: sticky;
|
||||
margin: 0 0.75rem calc(-1 * var(--overlap)) 0.75rem;
|
||||
margin: 0 0.5rem calc(-1 * var(--stack-overlap)) 0.5rem;
|
||||
border-left: 3px solid #3a3a44;
|
||||
background: #141418;
|
||||
padding: 0.6rem 0 0.6rem 0.9rem;
|
||||
box-shadow: 0 6px 0 #0a0a0c, 0 12px 24px rgba(0,0,0,0.4);
|
||||
padding: 0.65rem 0 0.65rem 1rem;
|
||||
min-height: 180px;
|
||||
box-shadow: 0 8px 0 #0a0a0c, 0 14px 28px rgba(0,0,0,0.45);
|
||||
}
|
||||
|
||||
.frame code {
|
||||
.frame-line {
|
||||
display: block;
|
||||
font-size: 0.66rem;
|
||||
color: #6b9b6b;
|
||||
margin-bottom: 0.35rem;
|
||||
margin-bottom: 0.4rem;
|
||||
background: none;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.frame-body strong { color: #e8e6e3; font-weight: 500; }
|
||||
.frame-body p { color: #6b6966; font-size: 0.72rem; margin-top: 0.15rem; }
|
||||
.frame-line:hover { color: #9fdf9f; text-decoration: underline; }
|
||||
|
||||
.frame-body strong { color: #e8e6e3; font-weight: 500; display: block; margin-bottom: 0.2rem; }
|
||||
.frame-body p { color: #6b6966; font-size: 0.74rem; }
|
||||
.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;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.f0 { top: calc(var(--stack-nav) + var(--stack-stick)); z-index: 1; border-color: #c4a574; }
|
||||
.f1 { top: calc(var(--stack-nav) + var(--stack-stick) + var(--stack-step)); z-index: 2; }
|
||||
.f2 { top: calc(var(--stack-nav) + var(--stack-stick) + var(--stack-step) * 2); z-index: 3; }
|
||||
.f3 { top: calc(var(--stack-nav) + var(--stack-stick) + var(--stack-step) * 3); z-index: 4; }
|
||||
.f4 { top: calc(var(--stack-nav) + var(--stack-stick) + var(--stack-step) * 4); z-index: 5; border-color: #6b8b9b; }
|
||||
.f5 { top: calc(var(--stack-nav) + var(--stack-stick) + var(--stack-step) * 5); z-index: 6; }
|
||||
.f6 { top: calc(var(--stack-nav) + var(--stack-stick) + var(--stack-step) * 6); z-index: 7; border-color: #7eb87a; margin-bottom: 0; }
|
||||
|
||||
.foot {
|
||||
display: flex; justify-content: space-between; max-width: 560px; margin: 0 auto;
|
||||
display: flex; justify-content: space-between;
|
||||
width: min(600px, 100%); margin: 0 auto;
|
||||
padding: 0 1.5rem 2.5rem; font-size: 0.6rem; color: #3a3a40;
|
||||
}
|
||||
.foot a { color: #3a3a40; text-decoration: none; }
|
||||
|
||||
@@ -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 = `#${a}`;
|
||||
}
|
||||
window.addEventListener('scroll', tick, { passive: true });
|
||||
tick();
|
||||
Reference in New Issue
Block a user