feat: fold in the portable Claude Code, zsh and git config; add a drift check
Added (all now linked from their live locations): - home_root/.claude/settings.json. The statusLine command now uses $HOME instead of a Linux-only absolute path. - home_root/.claude/bin/ratecheck and home_root/.claude/skills/australis-design. - home_config/zsh/claude-config-dir.zsh and home_root/.local/bin/claude-config-dir-init, the per-repo Claude Code login helper and its seeding script. - home_root/.gitconfig and home_config/git/ignore. - home_root/.zshenv, with the cargo env line guarded so boxes without rust start clean. link-dotfiles --check reports drift without changing anything: tracked files whose live copy is no longer a link (stow dry-run conflicts) and links into this repo that dangle. Exits 1 on drift. Verified against a clean baseline and two planted drifts, a detached .nanorc and a dangling link. .mailmap maps every earlier identity to Vuong Hoang: the repo-local 'Your Name' placeholder config (now removed), host-generated emails, and aider suffixes. CLAUDE.md: the symlink warning now lists every linked file and points at --check. README: documents what is and isn't tracked under .claude, the edit rule, and --check.
This commit is contained in:
@@ -0,0 +1,49 @@
|
||||
/* Shared shell for preview cards. Cards are 700×variable, dark canvas. */
|
||||
@import url("../colors_and_type.css");
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--bg-0);
|
||||
width: 700px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 700px;
|
||||
padding: 24px;
|
||||
background: var(--bg-0);
|
||||
color: var(--fg-1);
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
.row { display: flex; }
|
||||
.col { display: flex; flex-direction: column; }
|
||||
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; }
|
||||
.gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; }
|
||||
|
||||
.swatch {
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid rgba(255,255,255,0.04);
|
||||
}
|
||||
.swatch-label {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--fg-2);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.swatch-name {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 12px;
|
||||
color: var(--fg-0);
|
||||
font-weight: 500;
|
||||
}
|
||||
.muted {
|
||||
color: var(--fg-3);
|
||||
font-size: 11px;
|
||||
font-family: var(--font-mono);
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Iconography (Lucide)</title>
|
||||
<link rel="stylesheet" href="_card.css">
|
||||
<style>
|
||||
.grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; padding: 4px 0; }
|
||||
.ic {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 6px;
|
||||
color: var(--fg-1);
|
||||
}
|
||||
.ic svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
|
||||
.ic .nm { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); letter-spacing: 0.02em; }
|
||||
.legend { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin-top: 12px; letter-spacing:0.04em; }
|
||||
</style>
|
||||
</head><body>
|
||||
<div class="card">
|
||||
<div class="grid">
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><path d="M3 12h18M12 3v18"/></svg><span class="nm">plus</span></div>
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><path d="M3 12l6 6 12-12"/></svg><span class="nm">check</span></div>
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5-5"/></svg><span class="nm">search</span></div>
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg><span class="nm">menu</span></div>
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><path d="M12 3v12m0 0l-4-4m4 4l4-4M5 21h14"/></svg><span class="nm">download</span></div>
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1A2 2 0 1 1 4.3 17l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.3-1.8l-.1-.1A2 2 0 1 1 7 4.3l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg><span class="nm">settings</span></div>
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><path d="M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9h.5a8.5 8.5 0 0 1 8 8z"/></svg><span class="nm">message</span></div>
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg><span class="nm">user</span></div>
|
||||
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg><span class="nm">file</span></div>
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg><span class="nm">folder</span></div>
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><path d="M4 17l6-6-6-6M12 19h8"/></svg><span class="nm">terminal</span></div>
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"/></svg><span class="nm">code</span></div>
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg><span class="nm">bell</span></div>
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg><span class="nm">clock</span></div>
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><path d="M12 22s-8-4.5-8-11.8A5.2 5.2 0 0 1 9.2 5a5 5 0 0 1 2.8.9A5 5 0 0 1 14.8 5 5.2 5.2 0 0 1 20 10.2C20 17.5 12 22 12 22z"/></svg><span class="nm">heart</span></div>
|
||||
<div class="ic"><svg viewBox="0 0 24 24"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg><span class="nm">bookmark</span></div>
|
||||
</div>
|
||||
<div class="legend">Lucide · 1.75 stroke · 22px · current color · use sparingly, line over fill</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Logo</title>
|
||||
<link rel="stylesheet" href="_card.css">
|
||||
<style>
|
||||
.grid { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
||||
.pl { display:flex; align-items:center; justify-content:center; padding: 18px; border-radius: 10px; height: 100px; }
|
||||
.dark { background: #222531; border: 1px solid #373b46; }
|
||||
.light { background: #cce7ec; }
|
||||
.meta { display:flex; justify-content:space-between; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin-top:8px; letter-spacing:0.04em; }
|
||||
</style>
|
||||
</head><body>
|
||||
<div class="card">
|
||||
<div class="grid">
|
||||
<div>
|
||||
<div class="pl dark"><img src="../assets/logo-wordmark.svg" alt="Australis" height="46"/></div>
|
||||
<div class="meta"><span>logo-wordmark.svg</span><span>on bg-0</span></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="pl light"><img src="../assets/logo-mark.svg" alt="Australis mark" height="58"/></div>
|
||||
<div class="meta"><span>logo-mark.svg</span><span>on bright-white</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,25 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Syntax Mapping</title>
|
||||
<link rel="stylesheet" href="_card.css">
|
||||
<style>
|
||||
table { width:100%; border-collapse:collapse; }
|
||||
td { padding: 5px 0; vertical-align: middle; font-family: var(--font-mono); font-size: 12.5px; }
|
||||
td.tok { width: 30%; color: var(--fg-3); font-size: 11px; letter-spacing:0.04em; }
|
||||
td.role { width: 26%; color: var(--fg-2); font-size: 11px; }
|
||||
td.spec { font-weight: 500; }
|
||||
td.hex { color: var(--fg-3); font-size: 10.5px; text-align:right; width: 80px; }
|
||||
</style>
|
||||
</head><body>
|
||||
<div class="card">
|
||||
<table>
|
||||
<tr><td class="tok">--syn-keyword</td><td class="role">keyword</td><td class="spec" style="color:#9d78ff;">const · return · if</td><td class="hex">#9d78ff</td></tr>
|
||||
<tr><td class="tok">--syn-function</td><td class="role">function · type</td><td class="spec" style="color:#6388d8;">render() · paint()</td><td class="hex">#6388d8</td></tr>
|
||||
<tr><td class="tok">--syn-string</td><td class="role">string</td><td class="spec" style="color:#16b866;">'australis'</td><td class="hex">#16b866</td></tr>
|
||||
<tr><td class="tok">--syn-number</td><td class="role">number</td><td class="spec" style="color:#42dcd1;">-77.85 · 0xff</td><td class="hex">#42dcd1</td></tr>
|
||||
<tr><td class="tok">--syn-constant</td><td class="role">constant</td><td class="spec" style="color:#e1c631;">LATITUDE · PI</td><td class="hex">#e1c631</td></tr>
|
||||
<tr><td class="tok">--syn-tag</td><td class="role">tag · attribute</td><td class="spec" style="color:#00b1a8;"><section></td><td class="hex">#00b1a8</td></tr>
|
||||
<tr><td class="tok">--syn-comment</td><td class="role">comment</td><td class="spec" style="color:#6e7882;">// note this</td><td class="hex">#6e7882</td></tr>
|
||||
<tr><td class="tok">--syn-error</td><td class="role">error · diff-del</td><td class="spec" style="color:#ff491a;">undefined</td><td class="hex">#ff491a</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,23 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Aurora — Primary Colors</title>
|
||||
<link rel="stylesheet" href="_card.css">
|
||||
<style>
|
||||
.grid { display:grid; grid-template-columns: repeat(6, 1fr); gap:8px; }
|
||||
.sw { border-radius:6px; padding:10px; height:120px; display:flex; flex-direction:column; justify-content:space-between; }
|
||||
.sw .name { font-weight:600; font-size:12px; color:#222531; }
|
||||
.sw .hex { font-family: var(--font-mono); font-size:10.5px; color:#222531; opacity:0.78; }
|
||||
h6 { margin: 0 0 12px; }
|
||||
</style>
|
||||
</head><body>
|
||||
<div class="card">
|
||||
<h6>Aurora · primary · use generously · order: blue → cyan → green</h6>
|
||||
<div class="grid">
|
||||
<div class="sw" style="background:#6388d8;"><div class="name">Blue</div><div class="hex">#6388d8</div></div>
|
||||
<div class="sw" style="background:#a4c4ff;"><div class="name">Bright Blue</div><div class="hex">#a4c4ff</div></div>
|
||||
<div class="sw" style="background:#00b1a8;"><div class="name">Cyan</div><div class="hex">#00b1a8</div></div>
|
||||
<div class="sw" style="background:#42dcd1;"><div class="name">Bright Cyan</div><div class="hex">#42dcd1</div></div>
|
||||
<div class="sw" style="background:#16b866;"><div class="name">Green</div><div class="hex">#16b866</div></div>
|
||||
<div class="sw" style="background:#51e08a;"><div class="name">Bright Green</div><div class="hex">#51e08a</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,23 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Dawn — Accent Colors</title>
|
||||
<link rel="stylesheet" href="_card.css">
|
||||
<style>
|
||||
.grid { display:grid; grid-template-columns: repeat(6, 1fr); gap:8px; }
|
||||
.sw { border-radius:6px; padding:10px; height:120px; display:flex; flex-direction:column; justify-content:space-between; }
|
||||
.sw .name { font-weight:600; font-size:12px; color:#222531; }
|
||||
.sw .hex { font-family: var(--font-mono); font-size:10.5px; color:#222531; opacity:0.78; }
|
||||
h6 { margin: 0 0 12px; }
|
||||
</style>
|
||||
</head><body>
|
||||
<div class="card">
|
||||
<h6>Dawn · accent · use sparingly</h6>
|
||||
<div class="grid">
|
||||
<div class="sw" style="background:#ff491a;"><div class="name">Red</div><div class="hex">#ff491a</div></div>
|
||||
<div class="sw" style="background:#ff854f;"><div class="name">Bright Red</div><div class="hex">#ff854f</div></div>
|
||||
<div class="sw" style="background:#e1c631;"><div class="name">Yellow</div><div class="hex">#e1c631</div></div>
|
||||
<div class="sw" style="background:#ffe14e;"><div class="name">Bright Yellow</div><div class="hex">#ffe14e</div></div>
|
||||
<div class="sw" style="background:#9d78ff;"><div class="name">Magenta</div><div class="hex">#9d78ff</div></div>
|
||||
<div class="sw" style="background:#d8adff;"><div class="name">Bright Magenta</div><div class="hex">#d8adff</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,35 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Ice — Main Surface Colors</title>
|
||||
<link rel="stylesheet" href="_card.css">
|
||||
<style>
|
||||
.grid { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px; }
|
||||
.ice {
|
||||
height: 110px;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
display: flex; flex-direction: column; justify-content: space-between;
|
||||
border: 1px solid rgba(255,255,255,0.06);
|
||||
}
|
||||
.ice .top { display:flex; justify-content:space-between; align-items:flex-start; }
|
||||
.ice .name { font-weight:600; font-size:13px; }
|
||||
.ice .role { font-family: var(--font-mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; opacity:0.7; }
|
||||
.ice .hex { font-family: var(--font-mono); font-size:12px; }
|
||||
</style>
|
||||
</head><body>
|
||||
<div class="card">
|
||||
<div class="grid">
|
||||
<div class="ice" style="background:#222531; color:#cce7ec;">
|
||||
<div class="top"><span class="name">Black</span><span class="role">bg</span></div>
|
||||
<div class="hex">#222531</div>
|
||||
</div>
|
||||
<div class="ice" style="background:#a9bcc3; color:#222531;">
|
||||
<div class="top"><span class="name">White</span><span class="role">fg</span></div>
|
||||
<div class="hex">#a9bcc3</div>
|
||||
</div>
|
||||
<div class="ice" style="background:#cce7ec; color:#222531;">
|
||||
<div class="top"><span class="name">Bright White</span><span class="role">highlight</span></div>
|
||||
<div class="hex">#cce7ec</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,29 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Sea — Neutral Scale</title>
|
||||
<link rel="stylesheet" href="_card.css">
|
||||
<style>
|
||||
.scale { display:flex; border-radius:8px; overflow:hidden; height:84px; border:1px solid rgba(255,255,255,0.05); }
|
||||
.step { flex:1; display:flex; flex-direction:column; justify-content:flex-end; padding:8px; }
|
||||
.step .lab { font-family:var(--font-mono); font-size:10px; opacity:0.8; }
|
||||
.step .hex { font-family:var(--font-mono); font-size:10px; font-weight:600; }
|
||||
h6 { margin: 0 0 10px; }
|
||||
.legend { display:flex; justify-content:space-between; margin-top:8px; font-family:var(--font-mono); font-size:10px; color:var(--fg-3); letter-spacing:0.05em; text-transform:uppercase; }
|
||||
</style>
|
||||
</head><body>
|
||||
<div class="card">
|
||||
<h6>Sea · neutral scale · cool blue → green tint as it brightens</h6>
|
||||
<div class="scale">
|
||||
<div class="step" style="background:#222531;color:#cce7ec;"><div class="lab">L15</div><div class="hex">#222531</div></div>
|
||||
<div class="step" style="background:#373b46;color:#cce7ec;"><div class="lab">L25</div><div class="hex">#373b46</div></div>
|
||||
<div class="step" style="background:#414751;color:#cce7ec;"><div class="lab">L30</div><div class="hex">#414751</div></div>
|
||||
<div class="step" style="background:#565f69;color:#cce7ec;"><div class="lab">L40</div><div class="hex">#565f69</div></div>
|
||||
<div class="step" style="background:#6e7882;color:#222531;"><div class="lab">L50</div><div class="hex">#6e7882</div></div>
|
||||
<div class="step" style="background:#86929d;color:#222531;"><div class="lab">L60</div><div class="hex">#86929d</div></div>
|
||||
<div class="step" style="background:#9daeb6;color:#222531;"><div class="lab">L70</div><div class="hex">#9daeb6</div></div>
|
||||
<div class="step" style="background:#a9bcc3;color:#222531;"><div class="lab">L75</div><div class="hex">#a9bcc3</div></div>
|
||||
<div class="step" style="background:#b3cbcf;color:#222531;"><div class="lab">L80</div><div class="hex">#b3cbcf</div></div>
|
||||
<div class="step" style="background:#cce7ec;color:#222531;"><div class="lab">L90</div><div class="hex">#cce7ec</div></div>
|
||||
</div>
|
||||
<div class="legend"><span>Black</span><span>Dark 30 / 40 / 50 / 60</span><span>Bright 70 / 80 / 90</span></div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,40 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Semantic / Status Colors</title>
|
||||
<link rel="stylesheet" href="_card.css">
|
||||
<style>
|
||||
.row-s { display:flex; gap:10px; margin-bottom: 10px; }
|
||||
.pill {
|
||||
flex: 1;
|
||||
display: flex; align-items:center; gap:10px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 8px;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border: 1px solid;
|
||||
}
|
||||
.pill .dot { width: 8px; height:8px; border-radius:50%; }
|
||||
.pill .label { flex: 1; }
|
||||
.pill .hex { font-family: var(--font-mono); font-size:11px; opacity:0.85; }
|
||||
|
||||
.info { background: rgba(99,136,216,0.12); border-color: rgba(99,136,216,0.4); color:#a4c4ff; }
|
||||
.info .dot { background:#6388d8; }
|
||||
.success { background: rgba(22,184,102,0.14); border-color: rgba(22,184,102,0.4); color:#51e08a; }
|
||||
.success .dot{ background:#16b866; }
|
||||
.warning { background: rgba(225,198,49,0.14); border-color: rgba(225,198,49,0.4); color:#ffe14e; }
|
||||
.warning .dot{ background:#e1c631; }
|
||||
.danger { background: rgba(255,73,26,0.14); border-color: rgba(255,73,26,0.4); color:#ff854f; }
|
||||
.danger .dot { background:#ff491a; }
|
||||
</style>
|
||||
</head><body>
|
||||
<div class="card">
|
||||
<div class="row-s">
|
||||
<div class="pill info"><span class="dot"></span><span class="label">Info — informational</span><span class="hex">--status-info</span></div>
|
||||
<div class="pill success"><span class="dot"></span><span class="label">Success — operation complete</span><span class="hex">--status-success</span></div>
|
||||
</div>
|
||||
<div class="row-s">
|
||||
<div class="pill warning"><span class="dot"></span><span class="label">Warning — review needed</span><span class="hex">--status-warning</span></div>
|
||||
<div class="pill danger"><span class="dot"></span><span class="label">Danger — destructive / error</span><span class="hex">--status-danger</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,51 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Badges & Tags</title>
|
||||
<link rel="stylesheet" href="_card.css">
|
||||
<style>
|
||||
.row-b { display:flex; gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
|
||||
.row-b:last-child { margin-bottom: 0; }
|
||||
.label { font-family: var(--font-mono); font-size:10px; color: var(--fg-3); width: 80px; letter-spacing:0.06em; text-transform:uppercase; }
|
||||
.badge {
|
||||
display:inline-flex; align-items:center; gap:6px;
|
||||
font-family: var(--font-sans); font-size: 11.5px; font-weight: 500;
|
||||
padding: 3px 9px; border-radius: 9999px;
|
||||
border: 1px solid;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.dot { width:6px; height:6px; border-radius:50%; }
|
||||
.b-blue { background: rgba(99,136,216,0.14); color:#a4c4ff; border-color: rgba(99,136,216,0.4); }
|
||||
.b-green { background: rgba(22,184,102,0.14); color:#51e08a; border-color: rgba(22,184,102,0.4); }
|
||||
.b-yellow { background: rgba(225,198,49,0.14); color:#ffe14e; border-color: rgba(225,198,49,0.4); }
|
||||
.b-red { background: rgba(255,73,26,0.14); color:#ff854f; border-color: rgba(255,73,26,0.4); }
|
||||
.b-mag { background: rgba(157,120,255,0.14); color:#d8adff; border-color: rgba(157,120,255,0.4); }
|
||||
.b-cyan { background: rgba(0,177,168,0.14); color:#42dcd1; border-color: rgba(0,177,168,0.4); }
|
||||
.b-neutral{ background: #373b46; color:#a9bcc3; border-color:#565f69; }
|
||||
|
||||
.tag { background:#373b46; color:#cce7ec; padding:2px 8px; border-radius:4px; font-family: var(--font-mono); font-size: 11px; border:1px solid #565f69; }
|
||||
</style>
|
||||
</head><body>
|
||||
<div class="card">
|
||||
<div class="row-b">
|
||||
<span class="label">Status</span>
|
||||
<span class="badge b-green"><span class="dot" style="background:#16b866;"></span>Live</span>
|
||||
<span class="badge b-blue"><span class="dot" style="background:#6388d8;"></span>Deploying</span>
|
||||
<span class="badge b-yellow"><span class="dot" style="background:#e1c631;"></span>Warning</span>
|
||||
<span class="badge b-red"><span class="dot" style="background:#ff491a;"></span>Failed</span>
|
||||
<span class="badge b-neutral"><span class="dot" style="background:#86929d;"></span>Idle</span>
|
||||
</div>
|
||||
<div class="row-b">
|
||||
<span class="label">Counter</span>
|
||||
<span class="badge b-blue">v1.2.0</span>
|
||||
<span class="badge b-mag">beta</span>
|
||||
<span class="badge b-cyan">edge</span>
|
||||
<span class="badge b-green">+12</span>
|
||||
</div>
|
||||
<div class="row-b">
|
||||
<span class="label">Tag</span>
|
||||
<span class="tag">typescript</span>
|
||||
<span class="tag">terminal</span>
|
||||
<span class="tag">aurora</span>
|
||||
<span class="tag">v18.3.1</span>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Buttons</title>
|
||||
<link rel="stylesheet" href="_card.css">
|
||||
<style>
|
||||
.row-b { display:flex; gap:10px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
|
||||
.row-b:last-child { margin-bottom:0; }
|
||||
.label { font-family: var(--font-mono); font-size:10px; color: var(--fg-3); width: 70px; letter-spacing:0.06em; text-transform:uppercase; }
|
||||
.btn {
|
||||
font-family: var(--font-sans); font-size: 13px; font-weight: 500;
|
||||
padding: 8px 16px; border-radius: 6px; border: 1px solid transparent;
|
||||
cursor: pointer; line-height: 1; letter-spacing: 0.005em;
|
||||
transition: all 120ms cubic-bezier(.2,.8,.2,1);
|
||||
display: inline-flex; align-items:center; gap: 8px;
|
||||
}
|
||||
.btn-primary { background: #6388d8; color: #222531; }
|
||||
.btn-primary.hover { background: #a4c4ff; }
|
||||
.btn-primary.active { background: #4d72c2; transform: translateY(1px); }
|
||||
.btn-secondary { background: #373b46; color: #cce7ec; border-color: #565f69; }
|
||||
.btn-secondary.hover { background: #414751; border-color: #6e7882; }
|
||||
.btn-ghost { background: transparent; color: #a4c4ff; }
|
||||
.btn-ghost.hover { background: rgba(99,136,216,0.10); }
|
||||
.btn-danger { background: transparent; color: #ff854f; border-color: rgba(255,73,26,0.4); }
|
||||
.btn-danger.hover { background: rgba(255,73,26,0.14); }
|
||||
.btn-disabled { background:#373b46; color:#6e7882; border-color:#414751; cursor:not-allowed; }
|
||||
.btn-focus { background:#6388d8; color:#222531; box-shadow: 0 0 0 3px rgba(99,136,216,0.35); }
|
||||
</style>
|
||||
</head><body>
|
||||
<div class="card">
|
||||
<div class="row-b">
|
||||
<span class="label">Primary</span>
|
||||
<button class="btn btn-primary">Deploy</button>
|
||||
<button class="btn btn-primary hover">Deploy</button>
|
||||
<button class="btn btn-primary active">Deploy</button>
|
||||
<button class="btn btn-focus">Deploy</button>
|
||||
</div>
|
||||
<div class="row-b">
|
||||
<span class="label">Secondary</span>
|
||||
<button class="btn btn-secondary">Cancel</button>
|
||||
<button class="btn btn-secondary hover">Cancel</button>
|
||||
<button class="btn btn-ghost">Learn more</button>
|
||||
<button class="btn btn-ghost hover">Learn more</button>
|
||||
</div>
|
||||
<div class="row-b">
|
||||
<span class="label">Status</span>
|
||||
<button class="btn btn-danger">Delete</button>
|
||||
<button class="btn btn-danger hover">Delete</button>
|
||||
<button class="btn btn-disabled">Disabled</button>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,36 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Cards</title>
|
||||
<link rel="stylesheet" href="_card.css">
|
||||
<style>
|
||||
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
||||
.ucard {
|
||||
background: var(--bg-1);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 10px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 6px rgba(10,12,18,0.45), 0 1px 2px rgba(10,12,18,0.4);
|
||||
}
|
||||
.ucard h4 { font-family: var(--font-display); color: var(--fg-0); font-size: 17px; font-weight:600; margin: 0 0 4px; letter-spacing:-0.01em; }
|
||||
.ucard p { font-size: 13px; color: var(--fg-2); margin: 0 0 12px; line-height: 1.5; }
|
||||
.ucard .meta { display:flex; justify-content:space-between; align-items:center; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
|
||||
.ucard .glyph { width:24px; height:24px; border-radius:6px; background: linear-gradient(135deg,#6388d8,#42dcd1); margin-bottom: 12px; }
|
||||
.feat { border-top: 2px solid #6388d8; }
|
||||
</style>
|
||||
</head><body>
|
||||
<div class="card">
|
||||
<div class="grid">
|
||||
<div class="ucard">
|
||||
<div class="glyph"></div>
|
||||
<h4>Standard card</h4>
|
||||
<p>Default surface for grouping content. Subtle border, level-2 shadow, level-1 background.</p>
|
||||
<div class="meta"><span>--bg-1</span><span>radius-lg</span></div>
|
||||
</div>
|
||||
<div class="ucard feat">
|
||||
<div class="glyph" style="background: linear-gradient(135deg,#9d78ff,#42dcd1);"></div>
|
||||
<h4>Featured card</h4>
|
||||
<p>Add a 2px aurora top-edge to single out a primary item without changing fill.</p>
|
||||
<div class="meta"><span>border-top: blue</span><span>shadow-2</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,49 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Toggles & Controls</title>
|
||||
<link rel="stylesheet" href="_card.css">
|
||||
<style>
|
||||
.row-c { display:flex; gap:18px; align-items:center; margin-bottom: 14px; }
|
||||
.row-c:last-child { margin-bottom:0; }
|
||||
.label { font-family: var(--font-mono); font-size:10px; color: var(--fg-3); width: 70px; letter-spacing:0.06em; text-transform:uppercase; }
|
||||
|
||||
/* checkbox */
|
||||
.ck { width:16px; height:16px; border-radius:4px; border:1px solid #6e7882; background:#1b1e28; display:inline-flex; align-items:center; justify-content:center; }
|
||||
.ck.on { background:#6388d8; border-color:#6388d8; color:#222531; font-size:11px; font-weight:700; }
|
||||
|
||||
/* radio */
|
||||
.rd { width:16px; height:16px; border-radius:50%; border:1px solid #6e7882; background:#1b1e28; display:inline-flex; align-items:center; justify-content:center; }
|
||||
.rd.on::after { content:''; width:8px; height:8px; border-radius:50%; background:#6388d8; }
|
||||
|
||||
/* switch */
|
||||
.sw { width: 32px; height:18px; border-radius:9999px; background:#414751; position:relative; transition:background 200ms; }
|
||||
.sw::after { content:''; position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:#cce7ec; transition: left 200ms; }
|
||||
.sw.on { background:#16b866; }
|
||||
.sw.on::after { left: 16px; }
|
||||
|
||||
/* slider */
|
||||
.sld { width: 200px; height:4px; background:#414751; border-radius:2px; position:relative; }
|
||||
.sld .fill { position:absolute; left:0; top:0; bottom:0; width:60%; background:linear-gradient(90deg,#6388d8,#42dcd1); border-radius:2px; }
|
||||
.sld .knob { position:absolute; left:60%; top:50%; transform:translate(-50%,-50%); width:14px; height:14px; border-radius:50%; background:#cce7ec; box-shadow: 0 0 0 3px rgba(99,136,216,0.35); }
|
||||
|
||||
.name { font-family: var(--font-sans); font-size: 13px; color: var(--fg-1); }
|
||||
</style>
|
||||
</head><body>
|
||||
<div class="card">
|
||||
<div class="row-c"><span class="label">Checkbox</span>
|
||||
<span class="ck"></span><span class="name">Off</span>
|
||||
<span class="ck on">✓</span><span class="name">On</span>
|
||||
</div>
|
||||
<div class="row-c"><span class="label">Radio</span>
|
||||
<span class="rd"></span><span class="name">Option A</span>
|
||||
<span class="rd on"></span><span class="name">Option B</span>
|
||||
</div>
|
||||
<div class="row-c"><span class="label">Switch</span>
|
||||
<span class="sw"></span><span class="name">Off</span>
|
||||
<span class="sw on"></span><span class="name">On</span>
|
||||
</div>
|
||||
<div class="row-c"><span class="label">Slider</span>
|
||||
<span class="sld"><span class="fill"></span><span class="knob"></span></span>
|
||||
<span class="name" style="font-family:var(--font-mono); color:#42dcd1;">0.60</span>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,52 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Code Editor</title>
|
||||
<link rel="stylesheet" href="_card.css">
|
||||
<style>
|
||||
.editor {
|
||||
background: #1b1e28;
|
||||
border: 1px solid #373b46;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
line-height: 1.65;
|
||||
box-shadow: 0 8px 24px rgba(10,12,18,0.5);
|
||||
}
|
||||
.tabs { background:#222531; display:flex; border-bottom:1px solid #373b46; }
|
||||
.tab { padding: 8px 14px; font-size: 11.5px; color:#6e7882; border-right:1px solid #373b46; display:flex; align-items:center; gap:8px; }
|
||||
.tab.active { color:#cce7ec; background:#1b1e28; border-bottom: 1px solid #1b1e28; margin-bottom:-1px; }
|
||||
.tab .dot { width:6px; height:6px; border-radius:50%; background:#42dcd1; }
|
||||
.body { display:flex; }
|
||||
.gutter {
|
||||
color:#414751; padding: 12px 10px 12px 16px; text-align: right; user-select:none; background:#1b1e28; border-right:1px solid #2a2e38;
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.code { padding: 12px 18px; flex: 1; overflow:hidden; }
|
||||
.ln { white-space: pre; }
|
||||
.kw { color:#9d78ff; } .fn { color:#6388d8; } .str { color:#16b866; }
|
||||
.num { color:#42dcd1; } .com { color:#6e7882; } .var { color:#a9bcc3; }
|
||||
.ty { color:#42dcd1; } .const { color:#ffe14e; }
|
||||
</style>
|
||||
</head><body>
|
||||
<div class="card">
|
||||
<div class="editor">
|
||||
<div class="tabs">
|
||||
<div class="tab active"><span class="dot"></span>aurora.ts</div>
|
||||
<div class="tab">tokens.css</div>
|
||||
<div class="tab">README.md</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="gutter">1<br>2<br>3<br>4<br>5<br>6<br>7</div>
|
||||
<div class="code">
|
||||
<div class="ln"><span class="com">// Render the southern sky</span></div>
|
||||
<div class="ln"><span class="kw">import</span> { <span class="fn">paint</span> } <span class="kw">from</span> <span class="str">'./aurora'</span>;</div>
|
||||
<div class="ln"></div>
|
||||
<div class="ln"><span class="kw">export const</span> <span class="const">LATITUDE</span> = <span class="num">-77.85</span>;</div>
|
||||
<div class="ln"><span class="kw">export function</span> <span class="fn">render</span>(<span class="var">name</span>: <span class="ty">string</span>) {</div>
|
||||
<div class="ln"> <span class="kw">return</span> <span class="fn">paint</span>(<span class="var">name</span>, <span class="const">LATITUDE</span>);</div>
|
||||
<div class="ln">}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,35 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Inputs</title>
|
||||
<link rel="stylesheet" href="_card.css">
|
||||
<style>
|
||||
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
||||
.field { display:flex; flex-direction:column; gap:6px; }
|
||||
label.lbl { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.08em; }
|
||||
.input {
|
||||
background: #1b1e28;
|
||||
border: 1px solid #414751;
|
||||
color: #cce7ec;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 13px;
|
||||
padding: 9px 12px;
|
||||
border-radius: 6px;
|
||||
outline: none;
|
||||
box-shadow: inset 0 1px 0 rgba(204,231,236,0.04);
|
||||
}
|
||||
.input.focus { border-color: #6388d8; box-shadow: 0 0 0 3px rgba(99,136,216,0.35); }
|
||||
.input.error { border-color: #ff491a; box-shadow: 0 0 0 3px rgba(255,73,26,0.25); }
|
||||
.input.disabled { opacity: 0.5; }
|
||||
.help { font-size: 11px; color: var(--fg-3); font-family: var(--font-sans); }
|
||||
.help.err { color: #ff854f; }
|
||||
.input::placeholder { color: #6e7882; }
|
||||
</style>
|
||||
</head><body>
|
||||
<div class="card">
|
||||
<div class="grid">
|
||||
<div class="field"><label class="lbl">Default</label><input class="input" placeholder="user@australis.dev"/><span class="help">We'll never share it.</span></div>
|
||||
<div class="field"><label class="lbl">Focus</label><input class="input focus" value="aurora-prod"/><span class="help">3 of 32 chars used.</span></div>
|
||||
<div class="field"><label class="lbl">Error</label><input class="input error" value="!@#weak"/><span class="help err">Use 8+ characters with mixed case.</span></div>
|
||||
<div class="field"><label class="lbl">Disabled</label><input class="input disabled" value="locked-by-admin" disabled/><span class="help">Inherited from workspace.</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,47 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Menu & List</title>
|
||||
<link rel="stylesheet" href="_card.css">
|
||||
<style>
|
||||
.grid { display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
||||
.menu, .list {
|
||||
background: var(--bg-1);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 8px;
|
||||
padding: 6px;
|
||||
box-shadow: 0 8px 24px rgba(10,12,18,0.5);
|
||||
}
|
||||
.item {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 8px 10px;
|
||||
border-radius: 5px;
|
||||
font-family: var(--font-sans); font-size: 13px;
|
||||
color: var(--fg-1);
|
||||
}
|
||||
.item .kbd { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); background:#1b1e28; padding:2px 6px; border-radius:4px; border:1px solid #414751; }
|
||||
.item:hover, .item.hover { background: #414751; color: #cce7ec; }
|
||||
.item.sel { background: rgba(99,136,216,0.18); color: #a4c4ff; }
|
||||
.item.danger { color: #ff854f; }
|
||||
.div { height:1px; background: #373b46; margin: 4px 6px; }
|
||||
.head { font-family: var(--font-mono); font-size: 10px; text-transform:uppercase; letter-spacing:0.08em; color: var(--fg-3); padding: 8px 10px 4px; }
|
||||
</style>
|
||||
</head><body>
|
||||
<div class="card">
|
||||
<div class="grid">
|
||||
<div class="menu">
|
||||
<div class="head">Workspace</div>
|
||||
<div class="item sel">Aurora prod <span class="kbd">⌘1</span></div>
|
||||
<div class="item hover">Staging <span class="kbd">⌘2</span></div>
|
||||
<div class="item">Preview <span class="kbd">⌘3</span></div>
|
||||
<div class="div"></div>
|
||||
<div class="item">Settings <span class="kbd">⌘,</span></div>
|
||||
<div class="item danger">Sign out</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="head">Commits — main</div>
|
||||
<div class="item"><span style="display:flex;gap:8px;align-items:center;"><span style="color:#42dcd1;font-family:var(--font-mono);font-size:11px;">a3f2d</span> fix: token regression</span><span class="kbd">2m</span></div>
|
||||
<div class="item"><span style="display:flex;gap:8px;align-items:center;"><span style="color:#42dcd1;font-family:var(--font-mono);font-size:11px;">9b1c0</span> feat: aurora glow</span><span class="kbd">14m</span></div>
|
||||
<div class="item"><span style="display:flex;gap:8px;align-items:center;"><span style="color:#42dcd1;font-family:var(--font-mono);font-size:11px;">52ee7</span> docs: usage rules</span><span class="kbd">1h</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,62 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Terminal Surface</title>
|
||||
<link rel="stylesheet" href="_card.css">
|
||||
<style>
|
||||
.term {
|
||||
background: #1b1e28;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #373b46;
|
||||
box-shadow: 0 8px 24px rgba(10,12,18,0.5), 0 2px 6px rgba(10,12,18,0.4);
|
||||
overflow: hidden;
|
||||
}
|
||||
.titlebar {
|
||||
background: #222531;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid #373b46;
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.dots { display:flex; gap:6px; }
|
||||
.dot { width:11px; height:11px; border-radius:50%; }
|
||||
.title {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: #6e7882;
|
||||
margin-left: 8px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.body {
|
||||
padding: 14px 18px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
line-height: 1.65;
|
||||
}
|
||||
.ln { display: block; }
|
||||
.p { color:#42dcd1; } /* prompt */
|
||||
.cmd { color:#cce7ec; }
|
||||
.com { color:#6e7882; }
|
||||
.ok { color:#51e08a; }
|
||||
.info{ color:#a4c4ff; }
|
||||
.warn{ color:#ffe14e; }
|
||||
.err { color:#ff854f; }
|
||||
.mag { color:#9d78ff; }
|
||||
.cur { display:inline-block; width:8px; height:14px; background:#42dcd1; vertical-align:middle; margin-left:2px; }
|
||||
</style>
|
||||
</head><body>
|
||||
<div class="card">
|
||||
<div class="term">
|
||||
<div class="titlebar">
|
||||
<div class="dots"><span class="dot" style="background:#ff491a;"></span><span class="dot" style="background:#e1c631;"></span><span class="dot" style="background:#16b866;"></span></div>
|
||||
<span class="title">aurora ~/projects/australis · zsh</span>
|
||||
</div>
|
||||
<div class="body">
|
||||
<span class="ln"><span class="p">➜</span> <span class="cmd">australis</span> <span class="mag">build</span> <span class="info">--watch</span></span>
|
||||
<span class="ln"><span class="com"># compiling 24 modules…</span></span>
|
||||
<span class="ln"><span class="ok">✓</span> tokens compiled <span class="com">(184ms)</span></span>
|
||||
<span class="ln"><span class="ok">✓</span> ui-kit bundled <span class="com">(412ms)</span></span>
|
||||
<span class="ln"><span class="warn">!</span> 2 deprecated tokens — see migration.md</span>
|
||||
<span class="ln"><span class="err">✗</span> assets/logo.svg not found</span>
|
||||
<span class="ln"><span class="p">➜</span> <span class="cur"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,27 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Radii</title>
|
||||
<link rel="stylesheet" href="_card.css">
|
||||
<style>
|
||||
.grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
|
||||
.cell { display:flex; flex-direction:column; align-items:center; gap:8px; }
|
||||
.box {
|
||||
width: 70px; height: 70px;
|
||||
background: linear-gradient(135deg, #373b46, #414751);
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
.tok { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-2); letter-spacing:0.03em; }
|
||||
.px { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); }
|
||||
</style>
|
||||
</head><body>
|
||||
<div class="card">
|
||||
<div class="grid">
|
||||
<div class="cell"><div class="box" style="border-radius:0;"></div><span class="tok">none</span><span class="px">0</span></div>
|
||||
<div class="cell"><div class="box" style="border-radius:2px;"></div><span class="tok">xs</span><span class="px">2</span></div>
|
||||
<div class="cell"><div class="box" style="border-radius:4px;"></div><span class="tok">sm</span><span class="px">4</span></div>
|
||||
<div class="cell"><div class="box" style="border-radius:6px;"></div><span class="tok">md</span><span class="px">6</span></div>
|
||||
<div class="cell"><div class="box" style="border-radius:10px;"></div><span class="tok">lg</span><span class="px">10</span></div>
|
||||
<div class="cell"><div class="box" style="border-radius:14px;"></div><span class="tok">xl</span><span class="px">14</span></div>
|
||||
<div class="cell"><div class="box" style="border-radius:9999px;"></div><span class="tok">pill</span><span class="px">∞</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,25 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Spacing</title>
|
||||
<link rel="stylesheet" href="_card.css">
|
||||
<style>
|
||||
.row-s { display:flex; align-items:center; gap:10px; padding: 4px 0; }
|
||||
.bar { background: linear-gradient(90deg, #6388d8, #00b1a8); height: 14px; border-radius: 2px; }
|
||||
.tok { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); width: 70px; letter-spacing:0.04em; }
|
||||
.px { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); width: 44px; text-align:right; }
|
||||
</style>
|
||||
</head><body>
|
||||
<div class="card">
|
||||
<div class="row-s"><span class="tok">--sp-1</span> <span class="px">4px</span> <span class="bar" style="width:4px;"></span></div>
|
||||
<div class="row-s"><span class="tok">--sp-2</span> <span class="px">8px</span> <span class="bar" style="width:8px;"></span></div>
|
||||
<div class="row-s"><span class="tok">--sp-3</span> <span class="px">12px</span><span class="bar" style="width:12px;"></span></div>
|
||||
<div class="row-s"><span class="tok">--sp-4</span> <span class="px">16px</span><span class="bar" style="width:16px;"></span></div>
|
||||
<div class="row-s"><span class="tok">--sp-5</span> <span class="px">20px</span><span class="bar" style="width:20px;"></span></div>
|
||||
<div class="row-s"><span class="tok">--sp-6</span> <span class="px">24px</span><span class="bar" style="width:24px;"></span></div>
|
||||
<div class="row-s"><span class="tok">--sp-7</span> <span class="px">32px</span><span class="bar" style="width:32px;"></span></div>
|
||||
<div class="row-s"><span class="tok">--sp-8</span> <span class="px">40px</span><span class="bar" style="width:40px;"></span></div>
|
||||
<div class="row-s"><span class="tok">--sp-9</span> <span class="px">48px</span><span class="bar" style="width:48px;"></span></div>
|
||||
<div class="row-s"><span class="tok">--sp-10</span><span class="px">64px</span><span class="bar" style="width:64px;"></span></div>
|
||||
<div class="row-s"><span class="tok">--sp-11</span><span class="px">80px</span><span class="bar" style="width:80px;"></span></div>
|
||||
<div class="row-s"><span class="tok">--sp-12</span><span class="px">96px</span><span class="bar" style="width:96px;"></span></div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,30 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Shadow & Glow</title>
|
||||
<link rel="stylesheet" href="_card.css">
|
||||
<style>
|
||||
body { background: var(--bg-0); }
|
||||
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-top: 6px; padding-bottom: 6px; }
|
||||
.cell { display:flex; flex-direction:column; align-items:center; gap:8px; }
|
||||
.box {
|
||||
width: 100%; height: 70px;
|
||||
background: var(--bg-1);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 8px;
|
||||
}
|
||||
.tok { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-2); letter-spacing:0.03em; }
|
||||
</style>
|
||||
</head><body>
|
||||
<div class="card">
|
||||
<div class="grid">
|
||||
<div class="cell"><div class="box" style="box-shadow: 0 1px 2px rgba(10,12,18,0.4);"></div><span class="tok">shadow-1</span></div>
|
||||
<div class="cell"><div class="box" style="box-shadow: 0 2px 6px rgba(10,12,18,0.45), 0 1px 2px rgba(10,12,18,0.4);"></div><span class="tok">shadow-2</span></div>
|
||||
<div class="cell"><div class="box" style="box-shadow: 0 8px 24px rgba(10,12,18,0.5), 0 2px 6px rgba(10,12,18,0.4);"></div><span class="tok">shadow-3</span></div>
|
||||
<div class="cell"><div class="box" style="box-shadow: 0 24px 64px rgba(10,12,18,0.6), 0 8px 16px rgba(10,12,18,0.45);"></div><span class="tok">shadow-4</span></div>
|
||||
|
||||
<div class="cell"><div class="box" style="box-shadow: 0 0 0 3px rgba(99,136,216,0.35); border-color:#6388d8;"></div><span class="tok">glow-blue</span></div>
|
||||
<div class="cell"><div class="box" style="box-shadow: 0 0 0 3px rgba(0,177,168,0.35); border-color:#00b1a8;"></div><span class="tok">glow-cyan</span></div>
|
||||
<div class="cell"><div class="box" style="box-shadow: 0 0 0 3px rgba(22,184,102,0.30); border-color:#16b866;"></div><span class="tok">glow-green</span></div>
|
||||
<div class="cell"><div class="box" style="box-shadow: inset 0 1px 0 rgba(204,231,236,0.05), inset 0 0 0 1px rgba(0,0,0,0.3); background:#1b1e28;"></div><span class="tok">inset</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,22 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Type · Body & UI</title>
|
||||
<link rel="stylesheet" href="_card.css">
|
||||
<style>
|
||||
.stack { display: flex; flex-direction: column; gap: 12px; }
|
||||
.row { display:flex; align-items:baseline; justify-content:space-between; gap: 16px; }
|
||||
.meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); white-space:nowrap; letter-spacing:0.04em; }
|
||||
.lead { font-family: var(--font-sans); color: var(--fg-0); font-size:17px; font-weight:500; line-height:1.45; }
|
||||
.body { font-family: var(--font-sans); color: var(--fg-1); font-size:15px; line-height:1.6; max-width: 460px; }
|
||||
.small { font-family: var(--font-sans); color: var(--fg-2); font-size:13px; }
|
||||
.eye { font-family: var(--font-mono); color: #00b1a8; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; font-weight:500;}
|
||||
</style>
|
||||
</head><body>
|
||||
<div class="card">
|
||||
<div class="stack">
|
||||
<div class="row"><span class="eye">// EYEBROW · MONO 11/UC</span><span class="meta">.eyebrow</span></div>
|
||||
<div class="row"><span class="lead">A southern sky, rendered in pixels.</span><span class="meta">Lead · 17 / 500</span></div>
|
||||
<div class="row"><span class="body">Body copy is Inter at 15px with a 1.6 line height. It carries longform reading on dashboards, docs, and settings.</span><span class="meta">Body · 15 / 400</span></div>
|
||||
<div class="row"><span class="small">Secondary text — captions, helper copy, metadata.</span><span class="meta">Small · 13 / 400</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,27 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Type · Display</title>
|
||||
<link rel="stylesheet" href="_card.css">
|
||||
<style>
|
||||
.stack { display: flex; flex-direction: column; gap: 14px; }
|
||||
.row { display:flex; align-items:baseline; justify-content:space-between; gap: 16px; }
|
||||
.specimen { color: var(--fg-0); font-family: var(--font-display); letter-spacing:-0.015em; line-height:1.05; }
|
||||
.meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); white-space: nowrap; letter-spacing:0.04em; }
|
||||
</style>
|
||||
</head><body>
|
||||
<div class="card">
|
||||
<div class="stack">
|
||||
<div class="row">
|
||||
<span class="specimen" style="font-size:54px; font-weight:600;">Aurora Australis</span>
|
||||
<span class="meta">Display · 54 / 600</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="specimen" style="font-size:38px; font-weight:600;">Cool by design.</span>
|
||||
<span class="meta">H1 · 38 / 600</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="specimen" style="font-size:24px; font-weight:500;">Section heading</span>
|
||||
<span class="meta">H3 · 24 / 500</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,31 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Type · Mono & Code</title>
|
||||
<link rel="stylesheet" href="_card.css">
|
||||
<style>
|
||||
.term {
|
||||
background: var(--bg-1);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 8px;
|
||||
padding: 16px 20px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13.5px;
|
||||
line-height: 1.6;
|
||||
color: var(--fg-1);
|
||||
}
|
||||
.kw { color:#9d78ff; } .fn { color:#6388d8; } .str { color:#16b866; }
|
||||
.num { color:#42dcd1; } .com { color:#6e7882; } .var { color:#a9bcc3; }
|
||||
.tag { color:#00b1a8; } .err { color:#ff491a; }
|
||||
.prompt { color:#42dcd1; }
|
||||
.meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin-top:10px; letter-spacing:0.04em; display:flex; justify-content:space-between; }
|
||||
</style>
|
||||
</head><body>
|
||||
<div class="card">
|
||||
<div class="term">
|
||||
<span class="com">// JetBrains Mono · 13.5 / 1.6</span>
|
||||
<span class="kw">const</span> <span class="var">aurora</span> = <span class="fn">render</span>(<span class="str">'australis'</span>, { lat: <span class="num">-77.85</span> });
|
||||
<span class="kw">if</span> (<span class="var">aurora</span>.<span class="fn">visible</span>()) <span class="var">screen</span>.<span class="fn">paint</span>(<span class="tag">#6388d8</span>);
|
||||
<span class="prompt">$</span> <span class="fn">australis</span> --watch <span class="com"># reload on change</span>
|
||||
</div>
|
||||
<div class="meta"><span>--font-mono · JetBrains Mono</span><span>kw · fn · str · num · com</span></div>
|
||||
</div>
|
||||
</body></html>
|
||||
@@ -0,0 +1,27 @@
|
||||
<!doctype html>
|
||||
<html><head><meta charset="utf-8"><title>Type · Scale</title>
|
||||
<link rel="stylesheet" href="_card.css">
|
||||
<style>
|
||||
table { width:100%; border-collapse:collapse; }
|
||||
td { padding: 6px 0; vertical-align: baseline; }
|
||||
td.token { font-family: var(--font-mono); font-size:11px; color:var(--fg-3); width:80px; letter-spacing:0.04em; }
|
||||
td.size { font-family: var(--font-mono); font-size:11px; color:var(--fg-2); width:48px; text-align:right; }
|
||||
td.spec { font-family: var(--font-sans); color: var(--fg-0); font-weight:500; line-height:1.05; padding-left:16px; }
|
||||
</style>
|
||||
</head><body>
|
||||
<div class="card">
|
||||
<table>
|
||||
<tr><td class="token">--fs-6xl</td><td class="size">64</td><td class="spec" style="font-size:36px;">Aa Bb 64</td></tr>
|
||||
<tr><td class="token">--fs-5xl</td><td class="size">48</td><td class="spec" style="font-size:30px;">Aa Bb 48</td></tr>
|
||||
<tr><td class="token">--fs-4xl</td><td class="size">38</td><td class="spec" style="font-size:26px;">Aa Bb 38</td></tr>
|
||||
<tr><td class="token">--fs-3xl</td><td class="size">30</td><td class="spec" style="font-size:22px;">Aa Bb 30</td></tr>
|
||||
<tr><td class="token">--fs-2xl</td><td class="size">24</td><td class="spec" style="font-size:19px;">Aa Bb 24</td></tr>
|
||||
<tr><td class="token">--fs-xl</td><td class="size">20</td><td class="spec" style="font-size:17px;">Aa Bb 20</td></tr>
|
||||
<tr><td class="token">--fs-lg</td><td class="size">17</td><td class="spec" style="font-size:15px;">Aa Bb 17</td></tr>
|
||||
<tr><td class="token">--fs-md</td><td class="size">15</td><td class="spec" style="font-size:14px;">Aa Bb 15 (body)</td></tr>
|
||||
<tr><td class="token">--fs-sm</td><td class="size">14</td><td class="spec" style="font-size:13px;">Aa Bb 14</td></tr>
|
||||
<tr><td class="token">--fs-xs</td><td class="size">13</td><td class="spec" style="font-size:12px;">Aa Bb 13</td></tr>
|
||||
<tr><td class="token">--fs-2xs</td><td class="size">12</td><td class="spec" style="font-size:11px;">Aa Bb 12</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user