89 lines
2.2 KiB
CSS
89 lines
2.2 KiB
CSS
/* Purple theme: bold dusk palette (sky/violet/pink on deep indigo),
|
|
editorial typography (Fraunces display over Literata body), the sunrise
|
|
banner artwork (inlined by the backend into #page-banner) and a
|
|
playfully oversized tilted brand. */
|
|
|
|
:root {
|
|
color-scheme: dark;
|
|
--bg: #131022;
|
|
--surface: #1e1a36;
|
|
--text: #ece9f7;
|
|
--muted: #a79ecb;
|
|
/* Icy sky-cyan: the cool counterweight to violet/pink (green-leaning
|
|
teal clashed with them), and complementary to the sunrise's sun. */
|
|
--accent: #5ad1f5;
|
|
--accent2: #9b6bff;
|
|
--accent3: #ff6b9d;
|
|
--line: #ffffff1c;
|
|
--font-body: var(--font-literata);
|
|
--font-heading: var(--font-fraunces);
|
|
}
|
|
|
|
/* Oversized tilted brand in the sky→violet gradient. */
|
|
#brand {
|
|
font-size: clamp(3.2rem, 9vw, 7.5rem);
|
|
line-height: 1;
|
|
/* Ensure below baseline stays visible */
|
|
padding-bottom: 0.3em;
|
|
margin-bottom: -0.3em;
|
|
transform: rotate(-2deg);
|
|
transform-origin: left bottom;
|
|
background: linear-gradient(90deg, var(--accent), var(--accent2));
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
text-shadow: none;
|
|
filter: drop-shadow(0 0.15rem 0.6rem #9b6bff55);
|
|
}
|
|
|
|
/* Dark artwork: keep the nav readable with a shadow. */
|
|
#nav {
|
|
text-shadow: 0 0 0.15em black;
|
|
}
|
|
|
|
/* Colored headings, one accent per level: teal h1 with a gradient
|
|
underline, violet h2, pink h3 in a quieter weight. */
|
|
article h1 {
|
|
color: var(--accent);
|
|
padding-bottom: 0.35rem;
|
|
background: linear-gradient(90deg, var(--accent), var(--accent2) 45%, transparent) bottom left / 100% 2px no-repeat;
|
|
}
|
|
|
|
article h2 {
|
|
color: var(--accent2);
|
|
}
|
|
|
|
article h3 {
|
|
color: var(--accent3);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Theme-colored diamond markers instead of the base emoji (blue/orange
|
|
clashes with this palette). */
|
|
article ul li::before {
|
|
content: "◆";
|
|
color: var(--accent);
|
|
font-size: 0.7em;
|
|
vertical-align: 0.15em;
|
|
}
|
|
|
|
article ul ul li::before {
|
|
content: "◆";
|
|
color: var(--accent2);
|
|
}
|
|
|
|
article ul ul ul li::before {
|
|
content: "◆";
|
|
color: var(--accent3);
|
|
}
|
|
|
|
blockquote {
|
|
border-left-color: var(--accent2);
|
|
}
|
|
|
|
/* Code panels sit slightly lighter than the page; the token colors come
|
|
from the base dark set (this theme declares color-scheme: dark). */
|
|
pre {
|
|
--code-bg: var(--surface);
|
|
}
|