ilia
21c75cdcba
L0–L7 folders stack on scroll with aligned max depth, labeled tabs that stay consistent when L7 joins the rail, Cal embeds, preview screenshots, Playwright tests, and updated README. Co-authored-by: Cursor <cursoragent@cursor.com>
165 lines
5.1 KiB
HTML
165 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>levkin.ca — design options</title>
|
||
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||
<style>
|
||
:root {
|
||
--bg: #08080a;
|
||
--fg: #eceae6;
|
||
--muted: #6e6c68;
|
||
--accent: #c4a574;
|
||
--border: #1c1b19;
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body {
|
||
font-family: 'DM Sans', system-ui, sans-serif;
|
||
background: var(--bg);
|
||
color: var(--fg);
|
||
min-height: 100vh;
|
||
line-height: 1.5;
|
||
}
|
||
.wrap { max-width: 900px; margin: 0 auto; padding: 4rem 1.5rem 6rem; }
|
||
header { margin-bottom: 3rem; }
|
||
.eyebrow {
|
||
font-family: 'DM Mono', monospace;
|
||
font-size: 0.72rem;
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
color: var(--accent);
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
h1 {
|
||
font-size: clamp(2rem, 5vw, 2.75rem);
|
||
font-weight: 600;
|
||
letter-spacing: -0.03em;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
.lead { color: var(--muted); font-size: 1.05rem; max-width: 48ch; }
|
||
.grid {
|
||
display: grid;
|
||
gap: 1.25rem;
|
||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||
}
|
||
a.card {
|
||
display: block;
|
||
text-decoration: none;
|
||
color: inherit;
|
||
border: 1px solid var(--border);
|
||
border-radius: 14px;
|
||
overflow: hidden;
|
||
transition: border-color 0.2s, transform 0.2s;
|
||
}
|
||
a.card:hover {
|
||
border-color: var(--accent);
|
||
transform: translateY(-3px);
|
||
}
|
||
.preview {
|
||
height: 110px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.7rem;
|
||
}
|
||
.preview--spec {
|
||
background: #f4f1ec;
|
||
color: #1a1a18;
|
||
font-family: 'DM Mono', monospace;
|
||
letter-spacing: 0.06em;
|
||
}
|
||
.preview--stack {
|
||
background: #0e0e10;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
padding: 1.5rem;
|
||
}
|
||
.preview--stack .card-layer {
|
||
width: 70%;
|
||
height: 12px;
|
||
border-radius: 3px;
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
background: linear-gradient(90deg, #2a2a32, #3a3a46);
|
||
}
|
||
.preview--stack .card-layer:nth-child(1) { width: 55%; opacity: 0.5; }
|
||
.preview--stack .card-layer:nth-child(2) { width: 62%; opacity: 0.7; }
|
||
.preview--stack .card-layer:nth-child(3) { width: 75%; background: #4a4a58; }
|
||
.preview--folder {
|
||
background: #e8e2d4;
|
||
color: #2a2824;
|
||
font-family: 'DM Mono', monospace;
|
||
font-size: 0.65rem;
|
||
border-left: 12px solid #c9a86c;
|
||
}
|
||
.card-body { padding: 1.15rem 1.25rem 1.35rem; }
|
||
.card-body h2 { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.3rem; }
|
||
.card-body p { font-size: 0.82rem; color: var(--muted); line-height: 1.4; }
|
||
.tag {
|
||
display: inline-block;
|
||
margin-top: 0.65rem;
|
||
font-family: 'DM Mono', monospace;
|
||
font-size: 0.62rem;
|
||
color: var(--accent);
|
||
letter-spacing: 0.06em;
|
||
}
|
||
footer {
|
||
margin-top: 3.5rem;
|
||
padding-top: 2rem;
|
||
border-top: 1px solid var(--border);
|
||
font-size: 0.8rem;
|
||
color: var(--muted);
|
||
}
|
||
footer a { color: var(--accent); text-decoration: none; }
|
||
footer code { font-family: 'DM Mono', monospace; font-size: 0.75rem; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<header>
|
||
<p class="eyebrow">levkin.ca</p>
|
||
<h1>Three directions.</h1>
|
||
<p class="lead">Spec for the company story. Cards and Folder for the L0–L6 scroll stack — click a layer to bring it to the front.</p>
|
||
</header>
|
||
|
||
<div class="grid">
|
||
<a class="card" href="/spec/">
|
||
<div class="preview preview--spec">GET /company → 200</div>
|
||
<div class="card-body">
|
||
<h2>Spec</h2>
|
||
<p>Levkin as an RFC. Endpoints, schemas, required properties.</p>
|
||
<span class="tag">paper · RFC</span>
|
||
</div>
|
||
</a>
|
||
|
||
<a class="card" href="/stack/">
|
||
<div class="preview preview--stack">
|
||
<span class="card-layer"></span><span class="card-layer"></span><span class="card-layer"></span>
|
||
</div>
|
||
<div class="card-body">
|
||
<h2>Cards</h2>
|
||
<p>Dark sticky stack. Scroll or click L0–L6 to focus a layer.</p>
|
||
<span class="tag">stack · scroll</span>
|
||
</div>
|
||
</a>
|
||
|
||
<a class="card" href="/stack-folder/">
|
||
<div class="preview preview--folder">L0│ L1│ L2│</div>
|
||
<div class="card-body">
|
||
<h2>Folder</h2>
|
||
<p>Spec as a filing cabinet — manila tabs, clause sections, pull a file forward.</p>
|
||
<span class="tag">folder · spec</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
<footer>
|
||
<p><a href="https://git.levkin.ca">git.levkin.ca</a> · <code>cd ~/Documents/code/levkin.ca && npm run dev</code></p>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|