/* ============================================================================= Phrack colour theme — "ansi", sampled from the logo ----------------------------------------------------------------------------- One of the themes in css/themes/. Exactly one is active at a time, selected by the css/palette.css symlink — which is the single file every entry point links: ls -l public/css/palette.css # which theme is live ln -sfn themes/ansi.css public/css/palette.css # switch to this one ln -sfn themes/default.css public/css/palette.css # back to the original A theme is self-contained: it declares its own raw hues and then defines every semantic token style.css paints with, so swapping the symlink is the whole operation. Nothing else changes — style.css and the layouts keep using the same token names. Code blocks are NOT themed: their syntax colours are the legacy Pygments "Tango" palette, hardcoded in src/lib/markdown-shared.ts. --------------------------------------------------------------------------- WHERE THE COLOURS COME FROM Quantising the logo and matching each cluster to its nearest entry shows the art is drawn in the classic ANSI/VGA 16-colour palette. Share of the image nearest each entry (sampled every 2nd pixel): black #000000 33.5% brightcyan #55ffff 6.3% cyan #00aaaa 17.5% brightgreen #55ff55 3.7% brightblue #5555ff 17.5% white #ffffff 3.4% blue #0000aa 8.8% lightgray #aaaaaa 1.2% yellow #ffff55 6.9% darkgray #555555 0.9% So: cyan and blue carry the theme, yellow is the accent, and there is no orange and no red anywhere in the logo — which is what makes this a real departure from the default chrome while staying period-correct for a zine that grew up in ANSI art. Two colours here are NOT sampled, and are marked inline below: - --ansi-bright-red, needed for error text (an all-cyan error is useless). It is the ANSI-16 sibling of the sampled colours, not a foreign hue. - --ansi-shade, a black/darkgray mix used for recessed panels, because the logo has no tone between #000000 and #555555. Every foreground/background pair defined below clears WCAG AA (4.5:1); most clear AAA. The default theme's one weak spot — white on #999 in the issue table header — is fixed here (black on #aaaaaa, 9.0:1). ============================================================================= */ :root { /* ------------------------------------------ 1. PALETTE (sampled from the logo) */ --ansi-black: #000000; --ansi-blue: #0000aa; --ansi-cyan: #00aaaa; --ansi-gray: #555555; /* ANSI "darkgray" */ --ansi-silver: #aaaaaa; /* ANSI "lightgray" */ --ansi-bright-blue: #5555ff; --ansi-bright-cyan: #55ffff; --ansi-bright-green: #55ff55; --ansi-yellow: #ffff55; --ansi-white: #ffffff; /* Not in the logo — see the note above. */ --ansi-bright-red: #ff5555; /* ANSI-16 sibling; error text only */ --ansi-shade: color-mix(in srgb, var(--ansi-gray) 60%, var(--ansi-black)); /* ~#333 */ /* ------------------------------------------------------------- 2. SEMANTIC */ /* Page shell */ --color-bg: var(--ansi-black); --color-fg: var(--ansi-white); --color-rule: var(--ansi-gray); --color-rule-hard: var(--ansi-black); /* Links — yellow marks "you are here", exactly as the logo uses it */ --color-link: var(--ansi-white); --color-link-visited: var(--ansi-white); --color-link-hover: var(--ansi-white); --color-link-current: var(--ansi-yellow); /* Recessed panels: h3, news bodies, the comment form, the issue picker */ --color-panel-bg: var(--ansi-shade); --color-panel-fg: var(--ansi-white); /* Title / metadata bars — cyan is the logo's workhorse. The bars are light, so links on them can't use the page's white --color-link (2.9:1 on cyan, 2.3:1 on silver). */ --color-bar-bg: var(--ansi-cyan); --color-bar-fg: var(--ansi-black); --color-bar-alt-bg: var(--ansi-silver); --color-bar-alt-fg: var(--ansi-black); --color-bar-link-fg: var(--ansi-black); /* Issue table of contents — the logo's two blues, alternating. Pure --ansi-bright-blue as a full-row fill only reaches 5.1:1 with white text and glares over a long list, so the lighter row is pulled toward the deep blue; bright blue stays an accent (see --color-search-rule). */ --color-toc-bg: color-mix(in srgb, var(--ansi-bright-blue) 70%, var(--ansi-blue)); --color-toc-bg-alt: var(--ansi-blue); --color-toc-fg: var(--ansi-white); --color-toc-current-fg: var(--ansi-yellow); --color-toc-hover-bg: var(--ansi-black); --color-toc-hover-fg: var(--ansi-bright-cyan); --color-toc-head-bg: var(--ansi-silver); --color-toc-head-fg: var(--ansi-black); /* Article body — the white sheet stays white; 40 years of plaintext is read here and the corpus is authored for a light background. */ --color-article-bg: var(--ansi-white); --color-article-fg: var(--ansi-black); --color-article-rule: var(--ansi-black); --color-article-inverse-bg: var(--ansi-shade); --color-article-inverse-fg: var(--ansi-white); --color-quote-fg: color-mix(in srgb, var(--ansi-black) 55%, transparent); --color-quote-rule: color-mix(in srgb, var(--ansi-black) 12%, transparent); /* Issue picker (.details) — sits on --color-panel-bg */ --color-details-fg: var(--ansi-bright-cyan); --color-details-muted-fg: var(--ansi-silver); /* Comments */ --color-comment-bg: var(--ansi-gray); --color-comment-rule: var(--ansi-shade); /* Forms */ --color-input-fg: var(--ansi-black); --color-input-border: var(--ansi-gray); --color-input-border-hover: var(--ansi-black); --color-button-bg: var(--ansi-silver); --color-button-hover-bg: var(--ansi-bright-cyan); --color-button-hover-fg: var(--ansi-black); /* Form feedback */ --color-status-bg: var(--ansi-black); --color-ok-fg: var(--ansi-bright-green); --color-err-fg: var(--ansi-bright-red); /* Search overlay — a deep blue panel, white on blue like the logo's core */ --color-overlay-bg: color-mix(in srgb, var(--ansi-black) 55%, transparent); --color-search-bg: var(--ansi-blue); --color-search-fg: var(--ansi-white); --color-search-shadow: color-mix(in srgb, var(--ansi-black) 45%, transparent); --color-search-input-border: var(--ansi-silver); --color-search-rule: var(--ansi-bright-blue); --color-search-meta-fg: var(--ansi-silver); --color-search-snippet-fg: var(--ansi-silver); /* Code panel. Deliberately NOT themed: the syntax palette is the legacy Pygments "Tango" set, hardcoded in src/lib/markdown-shared.ts, and code blocks keep their light Tango background under every theme. These frame the panel and must suit that light background, so they are the same literals in every theme rather than theme hues. */ --color-code-border: #000000; --color-code-scrollbar-thumb: #8b8b8b; --color-code-scrollbar-track: #fcfcfc; /* ------------------------------------------------------------ 3. SURFACES */ /* /md_editor dev tool */ --editor-bg: var(--ansi-black); --editor-fg: var(--ansi-silver); --editor-input-fg: var(--ansi-white); --editor-divider: var(--ansi-gray); --editor-divider-hover: var(--ansi-cyan); --editor-preview-bg: var(--ansi-black); --editor-status-bg: color-mix(in srgb, var(--ansi-black) 70%, transparent); --editor-status-fg: var(--ansi-bright-cyan); --editor-status-error-fg: var(--ansi-bright-red); /* Standalone intros — already cyan-on-black; this just snaps them to the logo's exact cyan. */ --intro-bg: var(--ansi-black); --intro-fg: var(--ansi-cyan); --intro-ascii-fg: var(--ansi-white); --intro-glow: var(--ansi-bright-cyan); --intro-outline: var(--ansi-gray); --intro-button-bg: var(--ansi-cyan); --intro-button-fg: var(--ansi-black); --intro-button-border: var(--ansi-black); --intro-button-hover-bg: var(--ansi-bright-cyan); --intro-button-link-fg: var(--ansi-white); /* phrack_hacktro.html's deviations from the CFP intro: a muted chassis instead of cyan-on-black. Every theme must define these — the hacktro reads them directly, so it can't depend on another theme's raw hues. */ --hacktro-ascii-fg: var(--ansi-silver); --hacktro-button-bg: var(--ansi-shade); --hacktro-button-hover-bg: color-mix(in srgb, var(--ansi-bright-cyan) 13%, transparent); }