34 lines
2.9 KiB
CSS
34 lines
2.9 KiB
CSS
:root{color-scheme:dark;--bg:#090909;--panel:#121212;--ink:#f4f0e8;--muted:#a7a29a;--gold:#c5a059;--line:#292722;font-family:Georgia,"Times New Roman",serif}
|
|
*{box-sizing:border-box}
|
|
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.65}
|
|
a{color:var(--gold);text-underline-offset:.2em}
|
|
img{max-width:100%}
|
|
.site-header,.site-footer,main{width:min(1180px,calc(100% - 2rem));margin:auto}
|
|
.site-header{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:2rem;border-bottom:1px solid var(--line)}
|
|
.brand{display:flex;align-items:center;gap:.7rem;color:var(--ink);text-decoration:none;font-weight:700}
|
|
nav{display:flex;gap:1.15rem;flex-wrap:wrap;font:600 .72rem/1.3 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em}
|
|
main{padding:5rem 0 7rem}
|
|
.hero{max-width:850px;padding:3rem 0 5rem}
|
|
.hero h1,.section-heading h1,.project-body>h1,.not-found h1{font-size:clamp(2.8rem,7vw,6.8rem);line-height:.95;letter-spacing:-.045em;margin:.2em 0}
|
|
.hero p:not(.eyebrow),.lede{font-size:1.3rem;color:var(--muted);max-width:62ch}
|
|
.eyebrow{font:700 .7rem/1.2 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.16em;color:var(--gold)}
|
|
.feed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
|
|
.feed>h2,.feed>p{grid-column:1/-1;background:var(--bg);margin:0;padding:1.5rem}
|
|
.feed article{background:var(--panel);padding:2rem;min-height:180px}
|
|
.section-heading{margin-bottom:3rem}
|
|
.project-grid,.content-grid{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(2rem,7vw,7rem);align-items:start}
|
|
.project-meta,.content-grid>aside{position:sticky;top:1rem;border-top:2px solid var(--gold);padding-top:1rem}
|
|
dt{font:700 .65rem/1.2 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
|
|
dd{margin:0 0 1rem;overflow-wrap:anywhere}
|
|
.project-body{max-width:760px}
|
|
.project-body h2,.prose h2{margin-top:2.5em;border-bottom:1px solid var(--line);padding-bottom:.35em}
|
|
.tags{display:flex;gap:.5rem;list-style:none;padding:0;flex-wrap:wrap}
|
|
.tags li{border:1px solid var(--line);padding:.2rem .55rem;font:600 .72rem/1.5 ui-monospace,monospace}
|
|
pre{overflow:auto;padding:1rem;background:#050505;border:1px solid var(--line)}
|
|
code{font-family:ui-monospace,monospace;font-size:.9em}
|
|
blockquote{margin-left:0;border-left:3px solid var(--gold);padding-left:1rem;color:var(--muted)}
|
|
.site-footer{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);padding:2rem 0;color:var(--muted);font-size:.8rem}
|
|
.not-found{max-width:720px}
|
|
.standalone-demo{max-width:780px}
|
|
@media(max-width:720px){.site-header{align-items:flex-start;flex-direction:column;padding:1rem 0}nav{gap:.75rem}main{padding-top:3rem}.feed,.project-grid,.content-grid{grid-template-columns:1fr}.project-meta,.content-grid>aside{position:static}.site-footer{flex-direction:column}pre{max-width:calc(100vw - 2rem)}}
|