/* vandiest.biz, built from the Vandiest Pixel design system. Pixels on the chrome, plain type in the prose. Everything snaps to 4px. */ /* ---------- Fonts (self-hosted, latin subset, variable) ---------- */ @font-face{font-family:"Pixelify Sans";src:url(/fonts/pixelify-sans.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap} @font-face{font-family:"Press Start 2P";src:url(/fonts/press-start-2p.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Nunito Sans";src:url(/fonts/nunito-sans.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap} @font-face{font-family:"Nunito Sans";src:url(/fonts/nunito-sans-italic.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap} @font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap} /* ---------- Tokens: Day (default) ---------- */ :root{ color-scheme:light dark; --ground:#f5f5f2;--surface:#ffffff;--surface-sunken:#e8e8e3; --ink:#171717;--ink-muted:#555555;--ink-faint:#9a9a9a; --sky:#2c6ebe;--sky-deep:#1e3a6e;--sun:#ffd75e;--grass:#7ce07c;--grass-deep:#56aa5c;--berry:#d4433b; --on-sky:#f5f5f2;--on-deep:#f5f5f2;--line:#171717;--line-on-dark:#f5f5f2; --code-bg:#171717;--code-comment:#9a9a9a;--code-key:#ffd75e;--code-string:#7ce07c;--code-type:#8ab8ff; --font-display:"Pixelify Sans","Press Start 2P",monospace; --font-label:"Press Start 2P","Pixelify Sans",monospace; --font-body:"Nunito Sans","Segoe UI",system-ui,sans-serif; --font-code:"JetBrains Mono","Cascadia Code",Consolas,monospace; --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:40px;--space-7:64px; --px-border:0 -4px 0 0 var(--line),0 4px 0 0 var(--line),-4px 0 0 0 var(--line),4px 0 0 0 var(--line); --px-border-on-dark:0 -4px 0 0 var(--line-on-dark),0 4px 0 0 var(--line-on-dark),-4px 0 0 0 var(--line-on-dark),4px 0 0 0 var(--line-on-dark); --px-border-sky:0 -4px 0 0 var(--sky),0 4px 0 0 var(--sky),-4px 0 0 0 var(--sky),4px 0 0 0 var(--sky); --px-lift:var(--px-border),8px 8px 0 0 var(--sky); --text-deep:4px 4px 0 #1e3a6e; --content:1200px;--measure:720px;--side:320px;--gutter:var(--space-6); } /* ---------- Tokens: Night ---------- */ @media (prefers-color-scheme:dark){ :root{ --ground:#171717;--surface:#222226;--surface-sunken:#2c2c31; --ink:#f5f5f2;--ink-muted:#b0b0b0;--ink-faint:#6a6a6a; --sky:#4a8de0;--berry:#e0564f;--on-sky:#171717;--line:#f5f5f2;--code-bg:#0f0f12; } } /* ---------- Base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--font-body);font-size:18px;line-height:30px;overflow-wrap:break-word} a{color:var(--sky)} a:hover{text-decoration-thickness:2px} :focus-visible{outline:4px solid var(--sky);outline-offset:4px} h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.1;text-wrap:balance;margin:0} img{max-width:100%;height:auto} .pixel{image-rendering:pixelated;image-rendering:crisp-edges} .label,.label-s{font-family:var(--font-label);text-transform:uppercase;letter-spacing:0;line-height:1;font-weight:400} .label{font-size:10px} .label-s{font-size:9px} .skip{position:absolute;left:-9999px;top:var(--space-2);padding:var(--space-3);background:var(--sun);color:#171717;z-index:10} .skip:focus{left:var(--space-2)} .wrap{max-width:calc(var(--content) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)} @media (max-width:600px){:root{--gutter:var(--space-4)}} /* ---------- NavBar ---------- */ .nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:72px;padding:var(--space-3) var(--gutter);background:var(--sky-deep);color:var(--on-deep)} .nav__brand{display:flex;align-items:center;gap:14px;color:var(--on-deep);text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:26px;line-height:32px} .nav__brand img{width:32px;height:32px;image-rendering:pixelated} .nav__links{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin:0;padding:0;list-style:none} .nav__link{display:inline-block;padding:12px 14px;margin:4px;font-family:var(--font-label);font-size:10px;line-height:1;text-transform:uppercase;color:var(--on-deep);text-decoration:none} .nav__link:hover,.nav__link:focus-visible{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px} .nav__link--active{background:var(--sky);color:var(--on-sky);box-shadow:var(--px-border-sky)} .nav__link--cta{background:var(--sun);color:#171717;box-shadow:var(--px-border-on-dark)} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) 20px;margin:4px;font-family:var(--font-body);font-size:16px;line-height:20px;font-weight:700;text-decoration:none;border:0;cursor:pointer;background:var(--surface);color:var(--ink);box-shadow:var(--px-border);transition:transform .12s steps(2),box-shadow .12s steps(2)} .btn:hover,.btn:focus-visible{transform:translate(-4px,-4px);box-shadow:var(--px-lift);outline:none} .btn:active{transform:none;box-shadow:var(--px-border)} .btn--primary{background:var(--sky);color:var(--on-sky)} .btn--sun{background:var(--sun);color:#171717} .btn--label{font-family:var(--font-label);font-size:10px;line-height:1;text-transform:uppercase;padding:12px 14px} .btn-row{display:flex;flex-wrap:wrap;gap:28px;margin-top:var(--space-5)} /* ---------- Chips ---------- */ .chips{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none} .chip{display:inline-block;padding:8px 10px;margin:4px 0;font-family:var(--font-label);font-size:9px;line-height:1;text-transform:uppercase;color:#171717;background:var(--sun)} .chip--quiet{background:var(--surface-sunken);color:var(--ink)} .chip--ok{background:var(--grass)} /* ---------- Hero (home) ---------- */ .hero{position:relative;min-height:clamp(360px,48vw,560px);display:flex;align-items:flex-end;background:var(--sky);overflow:hidden} .hero__scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;image-rendering:pixelated} .hero__text{position:relative;width:100%;max-width:calc(var(--content) + 2 * var(--gutter));margin:0 auto;padding:var(--space-7) var(--gutter)} .hero__eyebrow{display:inline-block;padding:8px 10px;background:var(--sky-deep);color:var(--sun);margin:0 0 var(--space-4)} .hero h1{font-size:64px;line-height:64px;color:var(--on-deep);text-shadow:var(--text-deep);max-width:14ch} .hero__lead{max-width:60ch;margin:var(--space-4) 0 0;padding:var(--space-3) var(--space-4);font-size:19px;line-height:28px;color:var(--on-deep);background:rgba(23,23,23,.82)} @media (max-width:600px){.hero h1{font-size:40px;line-height:40px}} /* ---------- Sections ---------- */ .section{padding-top:var(--space-7);padding-bottom:var(--space-7)} .section__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--space-4);margin-bottom:var(--space-6)} .section__title{font-size:40px;line-height:40px} @media (max-width:600px){.section__title{font-size:32px;line-height:34px}} /* ---------- PostCard grid ---------- */ .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin:0;padding:4px;list-style:none} @media (max-width:1000px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:640px){.cards{grid-template-columns:minmax(0,1fr)}} .card{display:flex;flex-direction:column;gap:14px;height:100%;padding:var(--space-5);background:var(--surface);color:var(--ink);text-decoration:none;box-shadow:var(--px-border);transition:transform .12s steps(2),box-shadow .12s steps(2)} .card:hover,.card:focus-visible{transform:translate(-4px,-4px);box-shadow:var(--px-lift);outline:none} .card__meta{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2)} .card__date{font-family:var(--font-label);font-size:9px;line-height:1;text-transform:uppercase;color:var(--ink-muted)} .card__title{font-weight:600;font-size:26px;line-height:30px} .card__excerpt{margin:0;font-size:15px;line-height:23px;color:var(--ink-muted)} .card__cta{margin-top:auto;font-size:14px;line-height:20px;font-weight:700;color:var(--sky)} /* ---------- Article layout ---------- */ .layout{display:grid;grid-template-columns:minmax(0,var(--measure)) var(--side);gap:var(--space-6);justify-content:space-between;padding:var(--space-7) 0} @media (max-width:900px){.layout{grid-template-columns:minmax(0,1fr)}} .post__head{margin-bottom:var(--space-6)} .post__head h1{font-size:40px;line-height:44px;margin:var(--space-4) 0} @media (max-width:600px){.post__head h1{font-size:32px;line-height:36px}} .byline{display:flex;align-items:center;gap:var(--space-3);color:var(--ink-muted)} .byline img{width:40px;height:40px;image-rendering:pixelated} .byline__name{font-weight:700;font-size:15px;line-height:20px;color:var(--ink)} .byline time{display:block;margin-top:6px} /* ---------- Article body (plain type in the prose) ---------- */ .post-body{max-width:65ch} .post-body>*{margin:0 0 var(--space-5)} .post-body h2{font-weight:600;font-size:34px;line-height:38px;margin:var(--space-6) 0 var(--space-4)} .post-body h3{font-weight:600;font-size:26px;line-height:30px;margin:var(--space-6) 0 var(--space-3)} .post-body h4{font-family:var(--font-body);font-size:18px;line-height:30px;margin:var(--space-5) 0 var(--space-2)} .post-body ul,.post-body ol{padding-left:1.4em} .post-body li+li{margin-top:var(--space-2)} .post-body img{display:block;box-shadow:var(--px-border);margin:var(--space-5) 4px;max-width:calc(100% - 8px)} .post-body figure{margin:var(--space-5) 0} .post-body figcaption{margin-top:var(--space-3);font-size:15px;line-height:23px;color:var(--ink-muted)} .post-body blockquote{display:block;margin:var(--space-5) 4px;padding:20px 24px;background:var(--surface);box-shadow:var(--px-border);font-size:16px;line-height:1.55} .post-body blockquote>:first-child{margin-top:0} .post-body blockquote>:last-child{margin-bottom:0} .post-body hr{border:0;height:4px;background:var(--ink-faint);margin:var(--space-6) 0} .post-body table{border-collapse:collapse;width:100%;font-size:15px;line-height:23px;display:block;overflow-x:auto} .post-body th,.post-body td{padding:var(--space-2) var(--space-3);text-align:left;vertical-align:top;border-bottom:4px solid var(--surface-sunken)} .post-body th{font-family:var(--font-label);font-size:9px;line-height:1.4;text-transform:uppercase;font-weight:400} .post-body :not(pre)>code{font-family:var(--font-code);font-size:.9em;padding:.1em .3em;background:var(--surface-sunken)} .post-body em.lost{color:var(--ink-muted);font-size:15px} .post-body iframe{max-width:100%;border:0;box-shadow:var(--px-border);margin:4px} /* Callout: