Something went wrong. Try again.
originalfreenations.com mirror
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114@import "tokens.css";
/* --------------------------------------------------------------------------- Light / dark mode for the Headline theme.
The theme's palette lives in :root as raw tokens (--color-white is used for surfaces, --color-darker-gray for near-black text). We remap those tokens under [data-theme="dark"] and add a few explicit fixes where a raw token is used ambiguously (footer/header/images).
The <html> element gets data-theme="light" | "dark" from the inline no-flash script in the <head> before first paint. When no explicit choice is stored, the visitor's OS preference wins.
NOTE: this file is INLINED (minified) into the <style> block in src/_includes/partials/head.njk to save a render-blocking request — it is no longer linked from <head>. If you edit rules here, re-sync that copy.--------------------------------------------------------------------------- */
:root { color-scheme: light; --gh-transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;}
:root[data-theme="dark"] { color-scheme: dark;}
/* Smooth the switch on the big surfaces */body,.gh-head,.gh-foot,.gh-card,.gh-article,.gh-content { transition: var(--gh-transition);}
/* --- Explicit fixes: elements whose colours are hard-coded or ambiguous --- */
:root[data-theme="dark"] body { background-color: var(--color-background);}
/* Header sits on the page surface */:root[data-theme="dark"] .gh-head { background-color: var(--color-surface); border-color: var(--color-light-gray);}
/* Footer keeps a darker slab with light text (it hard-codes white text) */:root[data-theme="dark"] .gh-foot { background-color: var(--color-background);}:root[data-theme="dark"] .gh-foot,:root[data-theme="dark"] .gh-foot a,:root[data-theme="dark"] .gh-foot a:hover { color: var(--color-primary-text);}
/* Card / topic dividers */:root[data-theme="dark"] .gh-topic,:root[data-theme="dark"] .gh-card-link { border-color: var(--color-light-gray);}
/* Slightly calm images in dark mode */:root[data-theme="dark"] .gh-card-image img,:root[data-theme="dark"] .gh-article-image img,:root[data-theme="dark"] .gh-cover-image { filter: brightness(0.88) contrast(1.02);}
/* Code blocks */:root[data-theme="dark"] .gh-content pre { background-color: var(--color-background); border: 1px solid var(--color-light-gray);}
/* --- The toggle button ---------------------------------------------------- */.gh-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: transparent; border: 0; color: inherit; cursor: pointer; border-radius: 50%;}.gh-theme-toggle:hover { background: var(--color-hover-wash);}.gh-theme-toggle svg { width: 20px; height: 20px;}/* Show sun in dark mode, moon in light mode */.gh-theme-toggle .icon-sun { display: none;}.gh-theme-toggle .icon-moon { display: block;}:root[data-theme="dark"] .gh-theme-toggle .icon-sun { display: block;}:root[data-theme="dark"] .gh-theme-toggle .icon-moon { display: none;}