Migrated from Claude Design
This commit is contained in:
Zachary Levy
@@ -0,0 +1,259 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- @dsCard group="Brand" name="Navigation" subtitle="T10 Lit Divider locked for top tabs; side nav pending" viewport="960x160" -->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Navigation — Cybersteel</title>
|
||||
<link rel="stylesheet" href="../styles.css">
|
||||
<style>
|
||||
/* ────────────────────────────────────────────────────────────
|
||||
Token usage rule for this file:
|
||||
Use var(--token, #hexfallback) AT EVERY USE SITE — never
|
||||
redeclare design-system tokens here. Redeclaring them on
|
||||
:root creates circular references (e.g.
|
||||
--bg-shell: var(--bg-shell, #1d2021);
|
||||
) which CSS treats as invalid and which wipes the token,
|
||||
leaving every consumer with the initial value (transparent
|
||||
for backgrounds). The fallback in var() is the resilience
|
||||
layer; it kicks in only when the stylesheet fails to load
|
||||
and never collides with the loaded values.
|
||||
──────────────────────────────────────────────────────────── */
|
||||
|
||||
html, body {
|
||||
margin: 0; padding: 0;
|
||||
background: var(--bg-page, #313131);
|
||||
}
|
||||
body {
|
||||
font-family: var(--font-body, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
|
||||
color: var(--fg-body, #f2e2ba);
|
||||
padding: 24px 24px 64px;
|
||||
display: flex; flex-direction: column; gap: 32px;
|
||||
}
|
||||
|
||||
/* ── Page header ─────────────────────────────────────────── */
|
||||
.page-head {
|
||||
display: flex; flex-direction: column; gap: 6px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--border-subtle, #665c54);
|
||||
}
|
||||
.page-head .eyebrow {
|
||||
font-size: 11px; color: var(--fg-muted, #b8a98e);
|
||||
letter-spacing: 0.2em; text-transform: uppercase;
|
||||
}
|
||||
.page-head h1 {
|
||||
margin: 0; font-size: 28px; color: var(--fg-heading, #fbf1c7);
|
||||
font-family: var(--font-display, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em; text-transform: uppercase;
|
||||
}
|
||||
.page-head p {
|
||||
margin: 0; font-size: 13px; color: var(--fg-caption, #cebd9e);
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
/* ── Pattern header ──────────────────────────────────────── */
|
||||
.pattern { display: flex; flex-direction: column; gap: 12px; }
|
||||
.pattern-head {
|
||||
display: flex; align-items: baseline; gap: 16px;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid var(--border-subtle, #665c54);
|
||||
}
|
||||
.pattern-num {
|
||||
font-family: var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);
|
||||
font-size: 11px;
|
||||
color: var(--gold-dim, #d79921); letter-spacing: 0.2em;
|
||||
}
|
||||
.pattern-title {
|
||||
font-family: var(--font-display, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
|
||||
font-size: 18px;
|
||||
font-weight: 700; letter-spacing: 0.1em;
|
||||
text-transform: uppercase; color: var(--fg-heading, #fbf1c7);
|
||||
}
|
||||
.pattern-desc {
|
||||
font-family: var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);
|
||||
font-size: 11px;
|
||||
color: var(--fg-caption, #cebd9e); letter-spacing: 0.05em;
|
||||
}
|
||||
.pattern-status {
|
||||
font-family: var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.18em; text-transform: uppercase;
|
||||
margin-left: auto;
|
||||
}
|
||||
.status-locked { color: var(--gold-bright, #fabd2f); }
|
||||
.status-pending { color: var(--fg-muted, #b8a98e); }
|
||||
|
||||
.frame {
|
||||
border: 1px solid var(--border, #7c6f64);
|
||||
background: var(--bg-page, #313131);
|
||||
overflow: hidden;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-family: var(--font-display, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
|
||||
font-size: 13px;
|
||||
font-weight: 700; letter-spacing: 0.18em;
|
||||
text-transform: uppercase; color: var(--gold-dim, #d79921);
|
||||
}
|
||||
|
||||
.stub-content {
|
||||
padding: 24px;
|
||||
font-family: var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);
|
||||
font-size: 11px;
|
||||
color: var(--fg-muted, #b8a98e); letter-spacing: 0.2em;
|
||||
background-image:
|
||||
linear-gradient(var(--bg-surface, #3c3836) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--bg-surface, #3c3836) 1px, transparent 1px);
|
||||
background-size: 32px 32px;
|
||||
background-position: -1px -1px;
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
/* ────────────────────────────────────────────────────────────
|
||||
T10 · LIT DIVIDER — locked top tab pattern.
|
||||
The topbar's bottom divider already exists. Under the active
|
||||
tab, that segment of divider lights up in gold-bright. Cream
|
||||
text. No extra rules, no gradients.
|
||||
──────────────────────────────────────────────────────────── */
|
||||
.topframe {
|
||||
display: grid; grid-template-rows: 44px 1fr;
|
||||
min-height: 280px;
|
||||
}
|
||||
.topnav {
|
||||
display: flex; align-items: stretch;
|
||||
background: var(--bg-shell, #1d2021);
|
||||
border-bottom: 1px solid var(--border, #7c6f64);
|
||||
padding: 0 12px;
|
||||
}
|
||||
.topnav .product-name {
|
||||
display: flex; align-items: center;
|
||||
padding: 0 16px 0 8px;
|
||||
margin-right: 8px;
|
||||
border-right: 1px solid var(--border, #7c6f64);
|
||||
}
|
||||
.tab {
|
||||
position: relative;
|
||||
display: flex; align-items: center;
|
||||
padding: 0 18px;
|
||||
font-family: var(--font-body, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
|
||||
font-size: 12px;
|
||||
font-weight: 600; letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg-caption, #cebd9e);
|
||||
cursor: pointer;
|
||||
transition: color var(--transition-hover, 150ms ease-out);
|
||||
height: 100%;
|
||||
}
|
||||
.tab:hover { color: var(--fg-body, #f2e2ba); }
|
||||
.tab.active { color: var(--fg-heading, #fbf1c7); }
|
||||
.tab.active::after {
|
||||
content: ""; position: absolute;
|
||||
left: 0; right: 0; bottom: -1px;
|
||||
height: 1px; background: var(--gold-bright, #fabd2f);
|
||||
}
|
||||
|
||||
/* ────────────────────────────────────────────────────────────
|
||||
S1 · BARE BRIGHTNESS — locked side-nav pattern.
|
||||
No fills, no markers, no rules. Active = cream + 600 weight.
|
||||
Resting = muted. Selection is purely typographic.
|
||||
──────────────────────────────────────────────────────────── */
|
||||
.sideframe {
|
||||
display: grid; grid-template-columns: 200px 1fr;
|
||||
min-height: 360px;
|
||||
}
|
||||
.sidebar {
|
||||
background: var(--bg-shell, #1d2021);
|
||||
border-right: 1px solid var(--border, #7c6f64);
|
||||
padding: 12px 0;
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.sb-product-name {
|
||||
padding: 4px 20px 16px;
|
||||
border-bottom: 1px solid var(--border-subtle, #665c54);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.sb-section {
|
||||
padding: 14px 20px 6px;
|
||||
font-family: var(--font-mono, 'IBM Plex Mono', 'Courier New', monospace);
|
||||
color: var(--fg-muted, #b8a98e); font-size: 9px;
|
||||
letter-spacing: 0.22em; text-transform: uppercase;
|
||||
}
|
||||
.sb-item {
|
||||
display: flex; align-items: center;
|
||||
height: 30px; padding: 0 20px;
|
||||
color: var(--fg-muted, #b8a98e);
|
||||
cursor: pointer;
|
||||
font-family: var(--font-body, 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
|
||||
font-size: 13px;
|
||||
font-weight: 500; letter-spacing: 0.04em;
|
||||
transition: color var(--transition-hover, 150ms ease-out);
|
||||
}
|
||||
.sb-item:hover { color: var(--fg-body, #f2e2ba); }
|
||||
.sb-item.active { color: var(--fg-heading, #fbf1c7); font-weight: 600; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="page-head">
|
||||
<div class="eyebrow">Component · Navigation</div>
|
||||
<h1>Navigation</h1>
|
||||
<p>Selection lights up the existing structural rule rather than introducing new chrome. The topbar's bottom divider becomes gold under the active tab; the sidebar leans entirely on typographic contrast — cream & bold for active, muted for the rest.</p>
|
||||
</header>
|
||||
|
||||
<!-- ─────────────────────────── TOP TABS — LOCKED ─────────────────────────── -->
|
||||
<section class="pattern">
|
||||
<div class="pattern-head">
|
||||
<div class="pattern-num">01</div>
|
||||
<div class="pattern-title">Top Tabs</div>
|
||||
<div class="pattern-desc">Lit divider — the bottom rule glows gold under the active tab.</div>
|
||||
<div class="pattern-status status-locked">✓ Locked</div>
|
||||
</div>
|
||||
<div class="frame">
|
||||
<div class="topframe">
|
||||
<div class="topnav">
|
||||
<div class="product-name">Cybersteel</div>
|
||||
<div class="tab active">Dashboard</div>
|
||||
<div class="tab">Nodes</div>
|
||||
<div class="tab">Builds</div>
|
||||
<div class="tab">Alerts</div>
|
||||
<div class="tab">Logs</div>
|
||||
<div class="tab">Settings</div>
|
||||
</div>
|
||||
<div class="stub-content">CONTENT</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ─────────────────────────── SIDE NAV — LOCKED ─────────────────────────── -->
|
||||
<section class="pattern">
|
||||
<div class="pattern-head">
|
||||
<div class="pattern-num">02</div>
|
||||
<div class="pattern-title">Side Nav</div>
|
||||
<div class="pattern-desc">Bare brightness — active item is cream & bold; rest are muted.</div>
|
||||
<div class="pattern-status status-locked">✓ Locked</div>
|
||||
</div>
|
||||
<div class="frame">
|
||||
<div class="sideframe">
|
||||
<nav class="sidebar">
|
||||
<div class="sb-product-name product-name">Cybersteel</div>
|
||||
<div class="sb-section">Operate</div>
|
||||
<div class="sb-item active">Dashboard</div>
|
||||
<div class="sb-item">Nodes</div>
|
||||
<div class="sb-item">Builds</div>
|
||||
<div class="sb-item">Alerts</div>
|
||||
<div class="sb-section">Inspect</div>
|
||||
<div class="sb-item">Logs</div>
|
||||
<div class="sb-item">Metrics</div>
|
||||
<div class="sb-item">Traces</div>
|
||||
<div class="sb-section">Configure</div>
|
||||
<div class="sb-item">Settings</div>
|
||||
<div class="sb-item">Members</div>
|
||||
</nav>
|
||||
<div class="stub-content">CONTENT</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user