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.
80 lines
1.2 KiB
CSS
80 lines
1.2 KiB
CSS
/* Nitro banner design: the bezier-swept artwork with wide orange stripes
|
|
(inlined by the backend into #page-banner), in neutral dark greys that
|
|
follow the page's color scheme. */
|
|
|
|
/* Bezier-swept banner with wide orange stripes (inlined SVG), separated
|
|
from the page by a straight orange blade. */
|
|
#banner {
|
|
height: 13rem;
|
|
border-bottom: 4px solid var(--accent);
|
|
}
|
|
|
|
/* Banner artwork dark tones: neutral greys in light mode (retinted to the
|
|
page's violet family by the dark-scheme block below). */
|
|
.nb-base {
|
|
fill: #0b0b0d;
|
|
}
|
|
|
|
.nb-s1a {
|
|
stop-color: #242428;
|
|
}
|
|
|
|
.nb-s1b {
|
|
stop-color: #0b0b0d;
|
|
}
|
|
|
|
.nb-s2a {
|
|
stop-color: #19191d;
|
|
}
|
|
|
|
.nb-s2b {
|
|
stop-color: #060607;
|
|
}
|
|
|
|
.nb-c0 {
|
|
stop-color: #2a2a2f;
|
|
}
|
|
|
|
.nb-c1 {
|
|
stop-color: #131315;
|
|
}
|
|
|
|
.nb-c2 {
|
|
stop-color: #0b0b0d;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
/* Banner dark tones tinted to the same violet family as the page. */
|
|
.nb-base {
|
|
fill: #100d18;
|
|
}
|
|
|
|
.nb-s1a {
|
|
stop-color: #292536;
|
|
}
|
|
|
|
.nb-s1b {
|
|
stop-color: #100d18;
|
|
}
|
|
|
|
.nb-s2a {
|
|
stop-color: #1e1a2b;
|
|
}
|
|
|
|
.nb-s2b {
|
|
stop-color: #090811;
|
|
}
|
|
|
|
.nb-c0 {
|
|
stop-color: #322d44;
|
|
}
|
|
|
|
.nb-c1 {
|
|
stop-color: #171422;
|
|
}
|
|
|
|
.nb-c2 {
|
|
stop-color: #100d18;
|
|
}
|
|
}
|