Install
Copy two CSS files. Link them in that order. Then paste markup.
- Copy
alumna.cssfrom alumna-css intosrc/static/css/. - Copy
alumna-shadcn.cssfrom this project intosrc/static/css/. - Link both from
src/index.html, in that order:
<link rel="stylesheet" href="/css/alumna.css">
<link rel="stylesheet" href="/css/alumna-shadcn.css"> Do not copy site.css. That file is only this docs site’s font.
To use your own typeface, add @font-face in your CSS and list
that family before the system fallbacks — see the snippet in the README.
Light / Dark (first visit follows the OS as themeSource=system; a click persists as user; the control then becomes a Light / Dark /
Reset to system menu until you reset), the FOUC inline
script, and a copy-paste toggle live on Dark/Light Modes. Color, chart, and font swatches
live on Theming. Authors who copy only the two CSS
files do not get that script unless they paste it.
Then paste markup into src/components/ and point a route at it
(or import it from a page). Optional thin Svelte wrappers live under src/components/ui/ (Spinner, Card parts, breadcrumb chevron)
when the markup is worth reusing. Overlay position lives in src/components/ui/Place.svelte (native popover).