/* ============================================================================ * Lisp Machine Revival — azrazalea.net theme * * Pairs with Pico CSS v2 (green) via jsDelivr, plus three web fonts via * Fontsource/jsDelivr: * VT323 — phosphor-CRT display font for H1 + site brand * Kode Mono Variable — geometric mono for H2/H3 and small-caps metadata * Fira Code Variable — body + code, with ligatures * * Accent palette: * green (Pico primary) — interactive / phosphor glow * purple (secondary buttons, — dusty eggplant in light, lavender in dark * selection) * brown (surface tint / rules) — amber-bronze for CRT-tube warmth * * Everything works with JS disabled. The theme toggle button is JS-only (hidden * until the script adds `.js` to ); prefers-color-scheme covers the rest. * ==========================================================================*/ /* ---- Font stacks + Pico variable overrides ---------------------------------*/ :root { --font-terminal: 'VT323', ui-monospace, Menlo, monospace; --font-readout: 'Kode Mono Variable', 'Kode Mono', ui-monospace, Menlo, monospace; --font-body: 'Fira Code Variable', 'Fira Code', ui-monospace, Menlo, monospace; --font-code: 'Fira Code Variable', 'Fira Code', ui-monospace, Menlo, monospace; --pico-font-family: var(--font-body); --pico-font-family-sans-serif: var(--font-body); --pico-font-family-monospace: var(--font-body); } /* ---- Base typography -------------------------------------------------------*/ html, body { font-family: var(--font-body); font-weight: 350; line-height: 1.7; letter-spacing: 0.01em; font-variant-ligatures: contextual common-ligatures discretionary-ligatures; font-feature-settings: "calt" 1, "liga" 1; } code, pre, kbd, samp { font-family: var(--font-code); font-variant-ligatures: contextual common-ligatures discretionary-ligatures; font-feature-settings: "calt" 1, "liga" 1; } /* ---- H1: phosphor-CRT with blinking cursor --------------------------------*/ h1 { font-family: var(--font-terminal); font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 400; line-height: 1.05; letter-spacing: 0.02em; color: var(--pico-primary); text-shadow: 0 0 10px color-mix(in srgb, var(--pico-primary) 45%, transparent), 0 0 24px color-mix(in srgb, var(--pico-primary) 15%, transparent); margin-bottom: 0.4rem; } h1::after { content: '▮'; display: inline-block; margin-left: 0.3rem; animation: crt-blink 1.1s step-end infinite; color: var(--pico-primary); text-shadow: inherit; vertical-align: 0.05em; } @keyframes crt-blink { 50% { opacity: 0; } } /* ---- H2/H3: Kode Mono, `;;` comment-prefixed ------------------------------*/ h2 { font-family: var(--font-readout); font-size: 1.55rem; font-weight: 600; letter-spacing: -0.01em; margin-top: 2.2rem; } h2::before { content: ';; '; color: var(--accent-brown); opacity: 0.7; font-family: var(--font-body); } h3 { font-family: var(--font-readout); font-size: 1.25rem; font-weight: 600; color: var(--pico-primary); letter-spacing: -0.005em; margin-top: 1.8rem; margin-bottom: 0.4rem; } h4 { font-family: var(--font-readout); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-brown); margin-top: 1.6rem; margin-bottom: 0.4rem; } h5, h6 { font-family: var(--font-readout); font-weight: 500; opacity: 0.85; } /* ---- Accent colors — dark is the default; light is explicit opt-in -------*/ :root { --accent-purple: #b496c6; --accent-purple-muted: #3a2d42; --accent-brown: #c9a066; --accent-brown-muted: #2a2218; /* Pygments palette — dark */ --code-comment: #8a8275; --code-keyword: var(--pico-primary); --code-string: #d6b17a; --code-number: #e3a06a; --code-builtin: #c5a4d4; --code-funcname: var(--accent-purple); --code-classname: var(--accent-purple); --code-operator: var(--accent-brown); --code-punct: #a8a097; --code-error: #e8896f; } :root[data-theme="light"] { --accent-purple: #7c4680; --accent-purple-muted: #e7d6ea; --accent-brown: #7a5a3f; --accent-brown-muted: #efe6d9; --code-comment: #8a7a66; --code-keyword: var(--pico-primary); --code-string: #a3672a; --code-number: #b2643f; --code-builtin: #6c2a70; --code-funcname: var(--accent-purple); --code-classname: var(--accent-purple); --code-operator: var(--accent-brown); --code-punct: #6b6b6b; --code-error: #b4351f; } /* Pico semantic-color overrides — dark default, light opt-in ---------------*/ :root { --pico-secondary: var(--accent-purple); --pico-secondary-background: var(--accent-purple); --pico-secondary-border: var(--accent-purple); --pico-secondary-hover: color-mix(in srgb, var(--accent-purple) 85%, white); --pico-secondary-hover-background: color-mix(in srgb, var(--accent-purple) 85%, white); --pico-secondary-hover-border: color-mix(in srgb, var(--accent-purple) 85%, white); --pico-secondary-focus: var(--accent-purple-muted); --pico-secondary-inverse: #1a1a1a; --pico-mark-background-color: var(--accent-brown-muted); --pico-blockquote-border-color: var(--accent-brown); } :root[data-theme="light"] { --pico-secondary-inverse: #fff; --pico-secondary-hover: color-mix(in srgb, var(--accent-purple) 85%, black); --pico-secondary-hover-background: color-mix(in srgb, var(--accent-purple) 85%, black); --pico-secondary-hover-border: color-mix(in srgb, var(--accent-purple) 85%, black); } ::selection { background: var(--accent-purple); color: #fff; } /* ---- Blockquote as a terminal `>` quote -----------------------------------*/ blockquote { border-left: 3px solid var(--accent-brown); padding-left: 1rem; margin-left: 0.5rem; } blockquote::before { content: '> '; color: var(--accent-brown); } blockquote footer cite { font-family: var(--font-readout); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-brown); font-style: normal; } /* ---- 
 code blocks: scanlines + phosphor left rule --------------------*/
pre, .highlight pre {
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 2px,
      color-mix(in srgb, black 3%, transparent) 2px 3px
    ),
    var(--accent-brown-muted) !important;
  border-left: 3px solid var(--accent-brown);
  border-radius: 2px;
  padding: 1rem 1.25rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-brown) 20%, transparent);
  overflow-x: auto;
}
pre code, .highlight pre code {
  text-shadow: 0 0 1px color-mix(in srgb, var(--pico-primary) 15%, transparent);
}

/* ---- Pygments syntax highlighting -----------------------------------------
 * Build-time: .coleslawrc has (pygments); 3bmd calls pygmentize which emits
 * 
......
.
 * Classes below cover the most common token types — the long list is
 * intentional so every language Pygments supports renders coherently. */
.highlight { margin: 1rem 0; }

/* Comments */
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cp,
.highlight .cs, .highlight .ch, .highlight .cpf {
  color: var(--code-comment);
  font-style: italic;
}

/* Keywords */
.highlight .k, .highlight .kc, .highlight .kd, .highlight .kn,
.highlight .kp, .highlight .kr, .highlight .kt { color: var(--code-keyword); font-weight: 500; }

/* Strings */
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sa, .highlight .sb,
.highlight .sc, .highlight .dl, .highlight .sd, .highlight .se, .highlight .sh,
.highlight .si, .highlight .sx, .highlight .sr, .highlight .ss {
  color: var(--code-string);
}

/* Numbers */
.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh,
.highlight .mi, .highlight .il, .highlight .mo { color: var(--code-number); }

/* Names / identifiers */
.highlight .n { color: inherit; }
.highlight .na { color: var(--code-funcname); }                          /* attribute */
.highlight .nb, .highlight .bp { color: var(--code-builtin); }           /* builtin / builtin pseudo */
.highlight .nc { color: var(--code-classname); font-weight: 600; }       /* class */
.highlight .no { color: var(--code-number); }                             /* constant */
.highlight .nd { color: var(--code-builtin); }                            /* decorator */
.highlight .ni { color: var(--code-builtin); }                            /* entity */
.highlight .ne { color: var(--code-error); }                              /* exception */
.highlight .nf, .highlight .fm { color: var(--code-funcname); font-weight: 500; } /* function / magic */
.highlight .nl { color: var(--code-keyword); }                            /* label */
.highlight .nn { color: var(--code-classname); }                          /* namespace */
.highlight .nt { color: var(--code-keyword); }                            /* tag */
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
  color: inherit;                                                         /* variables */
}

/* Operators / punctuation */
.highlight .o, .highlight .ow { color: var(--code-operator); }
.highlight .p { color: var(--code-punct); }

/* Errors */
.highlight .err { color: var(--code-error); background: transparent; }

/* Generic formatting (diffs in code blocks) */
.highlight .gd { color: var(--code-error); }
.highlight .gi { color: var(--pico-primary); }
.highlight .gh, .highlight .gu { color: var(--code-builtin); font-weight: 600; }
.highlight .gs { font-weight: 600; }
.highlight .ge { font-style: italic; }

/* ---- Horizontal rule as `;;;;;` divider -----------------------------------*/
hr {
  border: none;
  height: auto;
  text-align: center;
  margin: 2.5rem 0 1.5rem;
  overflow: visible;
}
hr::before {
  content: ';;;;;';
  color: var(--accent-brown);
  letter-spacing: 0.5em;
  opacity: 0.6;
}

/* ---- Site brand -----------------------------------------------------------*/
.site-brand {
  font-family: var(--font-terminal);
  font-size: 1.8rem;
  letter-spacing: 0.02em;
  color: var(--pico-primary);
  text-shadow: 0 0 6px color-mix(in srgb, var(--pico-primary) 30%, transparent);
  text-decoration: none;
}
.site-brand:hover { text-decoration: none; }

/* ---- Theme toggle: hidden by default (no-JS fallback = OS preference).
 *     Lives inside the sidebar, so the whole row hides if JS is off. -------*/
.theme-toggle-row { display: none; }
.js .theme-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.js .theme-toggle-row .theme-label {
  font-family: var(--font-readout);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-brown);
}
.js .theme-toggle {
  font-family: var(--font-readout);
  font-size: 0.8rem;
  background: transparent;
  border: 1px solid var(--accent-brown);
  color: var(--accent-brown);
  padding: 0.2rem 0.55rem;
  border-radius: 2px;
  cursor: pointer;
  min-width: 3.8rem;
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.js .theme-toggle:hover {
  background: color-mix(in srgb, var(--accent-brown) 18%, transparent);
  color: var(--pico-primary);
  border-color: var(--pico-primary);
}

/* ---- Two-column layout ----------------------------------------------------*/
.layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
}

/* ---- Sidebar -------------------------------------------------------------*/
aside.sidebar {
  background: var(--accent-brown-muted);
  border: 1px solid var(--accent-brown);
  border-right-width: 3px;
  border-radius: 2px;
  padding: 1.25rem 1rem;
}
aside.sidebar .sidebar-home {
  display: block;
  color: inherit;
  text-decoration: none;
}
aside.sidebar .sidebar-home:hover .sidebar-name {
  text-shadow:
    0 0 8px color-mix(in srgb, var(--pico-primary) 55%, transparent),
    0 0 18px color-mix(in srgb, var(--pico-primary) 25%, transparent);
}
aside.sidebar img.headshot {
  width: 100%;
  border-radius: 2px;
  image-rendering: pixelated;
  display: block;
}
aside.sidebar .sidebar-name {
  font-family: var(--font-terminal);
  font-size: 1.7rem;
  color: var(--pico-primary);
  text-shadow: 0 0 6px color-mix(in srgb, var(--pico-primary) 35%, transparent);
  margin: 0.6rem 0 0.3rem;
}
aside.sidebar .sidebar-name::before { content: ''; }
aside.sidebar .tagline {
  font-size: 0.88rem;
  margin-top: 0.2rem;
  opacity: 0.85;
}
aside.sidebar nav ul {
  list-style: none;
  padding: 0;
  margin: 0.6rem 0;
}
aside.sidebar nav li { margin: 0.3rem 0; }
aside.sidebar nav a {
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-decoration: none;
}
aside.sidebar nav a::before {
  content: '> ';
  color: var(--pico-primary);
  opacity: 0.7;
}
aside.sidebar nav a:hover { text-decoration: underline; }
aside.sidebar .meta {
  font-family: var(--font-readout);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-brown);
}

/* ---- Post / article -------------------------------------------------------*/
article.post { padding: 0; background: transparent; border: none; box-shadow: none; }
article.post > header { margin-bottom: 1rem; }
article.post .post-meta {
  font-family: var(--font-readout);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-brown);
  margin: 0.3rem 0 1rem;
}
article.post .post-meta a { color: var(--pico-primary); text-decoration: none; }
article.post .post-meta a:hover { text-decoration: underline; }
article.post .post-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 2.5rem;
  font-family: var(--font-readout);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---- Index listing --------------------------------------------------------*/
.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li {
  border-left: 3px solid var(--accent-brown);
  padding: 0.5rem 0 0.5rem 1rem;
  margin: 1.25rem 0;
}
.post-list li h3 {
  margin: 0 0 0.3rem;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  opacity: 1;
}
.post-list li h3 a { text-decoration: none; }
.post-list li .post-date {
  font-family: var(--font-readout);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-brown);
}
.post-list li .post-excerpt { margin-top: 0.4rem; font-size: 0.95rem; opacity: 0.88; }

.archive-line {
  font-family: var(--font-readout);
  font-size: 0.85rem;
  margin: 0.6rem 0;
}
.archive-line .archive-label {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-brown);
}

.pager {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  font-family: var(--font-readout);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---- Footer --------------------------------------------------------------*/
body > footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--accent-brown);
  font-family: var(--font-readout);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--accent-brown);
}
body > footer a { color: var(--pico-primary); }