210 lines
6.0 KiB
CSS
210 lines
6.0 KiB
CSS
/* Nitro theme: racing/HUD style — saturated orange + cyan, console/HUD-style
|
||
monospace display type, an orange racing-tab nav with a bezier clip-path,
|
||
and a dark bezier banner. Follows prefers-color-scheme: the light scheme
|
||
is a warm light-grey page, the dark scheme a deep violet page; the banner
|
||
and other dark/bright elements carry over unchanged.
|
||
|
||
Color model: the base stylesheet's variables carry the page; nitro adds
|
||
a small set of theme-specific colors below, and everything else in the
|
||
file references variables only, so recoloring happens here. */
|
||
|
||
:root {
|
||
color-scheme: light dark;
|
||
|
||
/* Page palette (base variables) */
|
||
--bg: #eee;
|
||
/* warm light grey page background */
|
||
--surface: #fff;
|
||
--text: #1a1a1a;
|
||
--muted: #655f52;
|
||
/* warm grey secondary text */
|
||
--line: #1a1a1a1f;
|
||
/* hairlines: tables, column rules */
|
||
--accent: #ff6a00;
|
||
/* racing orange: decorations, nav tab, markers */
|
||
--accent2: #008ba3;
|
||
/* deep cyan: h3, blockquote bar, nested markers */
|
||
|
||
/* Nitro-specific colors */
|
||
--orange-deep: #d95a00;
|
||
/* orange dark enough for body text (h2, links) */
|
||
--ink: #000;
|
||
/* pure black details: tab text, brand shadow */
|
||
--neon: #59ecff;
|
||
/* glowing cyan: current page on the orange tab */
|
||
--tab-current: #eee;
|
||
--tab-hover: #fff;
|
||
/* glowing white: nav hover (kept bright: the
|
||
nav glow is text-shadow, which fades dimmer) */
|
||
--tab-muted: #0000008c;
|
||
/* secondary labels on the orange tab */
|
||
|
||
--font-body: var(--font-montserrat);
|
||
--font-heading: var(--font-literata);
|
||
--code-x-height: 0.517; /* Montserrat's x-height ratio */
|
||
/* Neutral grey selection instead of the accent tint: accent-colored
|
||
text (h2, links, markers) stays readable on it in both schemes. */
|
||
--selection-bg: #6664;
|
||
}
|
||
|
||
/* Dark scheme: same identity, but the page goes deep violet (never muddy
|
||
near-black); the cyan and orange accents brighten to keep their punch. */
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--bg: #17141f;
|
||
--surface: #231f2e;
|
||
--text: #f0ede8;
|
||
--muted: #a89f8f;
|
||
--line: #ffffff22;
|
||
--accent2: #2fc3dd;
|
||
/* brighter cyan, readable on dark */
|
||
--orange-deep: #ff8a3d;
|
||
/* brighter orange, readable on dark */
|
||
--code-bg: #12101b;
|
||
/* code wells join the violet family */
|
||
}
|
||
}
|
||
|
||
/* Any banner used is separated from page by a thick orange line */
|
||
#banner {
|
||
border-bottom: 4px solid var(--accent);
|
||
}
|
||
|
||
/* Oversized outlined brand, spilling off the banner edge: orange stroke,
|
||
solid black fill. */
|
||
#brand {
|
||
/* Scales down proportionally below ~1000px: 10rem at a 62.5rem viewport,
|
||
shrinking with vmin (smaller of viewport width/height) below that. */
|
||
font-size: clamp(2.5rem, 16vmin, 10rem);
|
||
line-height: 1.2;
|
||
font-weight: 700;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
white-space: nowrap;
|
||
color: var(--orange-deep);
|
||
text-shadow: 0 0 0.1em black;
|
||
}
|
||
|
||
#nav {
|
||
font-family: var(--font-heading);
|
||
font-size: 0.95em;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
/* Racing tab: sitting at the bottom of the banner, with a bezier clip —
|
||
slanted sides that join top and bottom horizontally, and a shallow
|
||
wide notch at the top middle. Generous side padding so the em-based
|
||
slants fit. The border-radius is the fallback for browsers without
|
||
shape(). */
|
||
background: var(--accent);
|
||
width: fit-content;
|
||
padding: 0.3em 2.5em 0;
|
||
border-radius: 1.2em 1.2em 0 0;
|
||
clip-path: shape(
|
||
/* left side */
|
||
from 0% 100%,
|
||
curve to 2.5em 0 with 2em 100% / 1em 0,
|
||
/* notch: ≈ golden-ratio width of the available top edge */
|
||
hline to calc(19.1% + 1.7em),
|
||
line to calc(19.1% + 2.1em) 0.2em,
|
||
hline to calc(80.9% - 2.1em),
|
||
line to calc(80.9% - 1.7em) 0,
|
||
/* right side, bottom */
|
||
hline to calc(100% - 2.5em),
|
||
curve to 100% 100% with calc(100% - 1em) 0 / calc(100% - 2em) 100%,
|
||
close);
|
||
}
|
||
|
||
#nav a {
|
||
color: var(--ink);
|
||
}
|
||
|
||
/* Current page and hover glow on the orange tab; both stay bright colors
|
||
because the glow is text-shadow. */
|
||
#nav .current {
|
||
color: var(--tab-current);
|
||
text-shadow: 0 0 0.1em;
|
||
}
|
||
|
||
#nav a:hover {
|
||
color: var(--tab-hover);
|
||
text-shadow: 0 0 0.1em;
|
||
}
|
||
|
||
#nav span {
|
||
color: var(--tab-muted);
|
||
}
|
||
|
||
/* Console-style headings: uppercase monospace. h1 in the page text color
|
||
with a hazard-stripe underline, h2 deep orange, h3 cyan. */
|
||
article h1 {
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.02em;
|
||
color: var(--text);
|
||
font-weight: 700;
|
||
padding-bottom: 0.5rem;
|
||
/* The hazard-stripe underline breaks out of the page box: the negative
|
||
end margin extends the h1's box (and thus its background) all the
|
||
way to the viewport's edge on that side. */
|
||
margin-inline-end: calc((100% - 100vw) / 2);
|
||
background:
|
||
linear-gradient(-55deg,
|
||
transparent 0 0.2rem,
|
||
var(--accent) 0.2rem 0.9rem,
|
||
transparent 0.9rem 1.4rem) -0.2rem bottom / 1.4rem 4px repeat-x;
|
||
}
|
||
|
||
article h2 {
|
||
color: var(--orange-deep);
|
||
font-weight: 700;
|
||
}
|
||
|
||
article h3 {
|
||
color: var(--accent2);
|
||
font-weight: 700;
|
||
}
|
||
|
||
article a:hover {
|
||
color: var(--accent2);
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* Chevron markers instead of the base emoji diamonds. */
|
||
article ul li::before {
|
||
content: "»";
|
||
color: var(--accent);
|
||
font-weight: 700;
|
||
}
|
||
|
||
article ul ul li::before {
|
||
content: "›";
|
||
color: var(--accent2);
|
||
}
|
||
|
||
article ul ul ul li::before {
|
||
color: var(--muted);
|
||
}
|
||
|
||
blockquote {
|
||
border-inline-start-color: var(--accent2);
|
||
background: color-mix(var(--accent2) 6%, transparent);
|
||
padding: 0.25rem 0.75rem;
|
||
/* Keep the quoted text on the paragraph edge: the tinted box extends
|
||
past it by its own border/padding, like code blocks. */
|
||
margin: 0 0 1rem;
|
||
margin-inline: -1rem -0.75rem;
|
||
}
|
||
|
||
/* Code follows the color scheme; the dark-scheme well joins the violet
|
||
family (--code-bg above). The orange side bar stays in both. */
|
||
pre {
|
||
border-inline-start: 0.25rem solid var(--accent);
|
||
/* Text on the paragraph edge: the box extends by padding + border. */
|
||
margin-inline-start: calc(-0.8rem - 0.25rem);
|
||
border-radius: 3px;
|
||
}
|
||
|
||
img {
|
||
border-radius: 3px;
|
||
}
|