Github

Install

Copy two CSS files. Link them in that order. Then paste markup.

  1. Copy alumna.css from alumna-css into src/static/css/.
  2. Copy alumna-shadcn.css from this project into src/static/css/.
  3. 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).