LeoVasanko
30947df16b
Themes move from Vite-built frontend assets to pagerite/themes/{name}/
folders holding theme.css and/or banner.css (+ banner.svg), served by the
backend at /_themes/{name}/... and re-read from disk per request (etag by
mtime), so on-disk edits show on the next page load even in prod and new
themes need no build or config. The theme and banner-design selectors
enumerate these folders via GET /_api/settings.
Banner designs: Node.banner_design picks a design per page (None inherits
from ancestors, then the front page, then the active theme's own design;
"" = none). The design's banner.css is linked in <head> (id
pagerite-banner, between theme and custom CSS) and its banner.svg inlined
into #page-banner first (marked svg[data-design]); the page's own
Node.banner HTML renders after it, so author code always wins. #page-banner
is now a stacking grid so artwork and author code overlay.
Dev/prod hot loading unified: the backend renders the theme/design links
in both modes; in dev pagerite.js only re-appends them (and the custom
CSS) after the Vite-injected base styles. Theme switches just swap the
link href. The pagerite:theme meta and Vite theme build entries are gone.
98 lines
2.3 KiB
CSS
98 lines
2.3 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);
|
|
}
|
|
|
|
::selection {
|
|
background: var(--accent2);
|
|
color: #fff;
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
|
|
::view-transition {
|
|
background: #000;
|
|
}
|