Custom hero and styles

A site can bring its own code in src/custom. Template updates never touch that folder.

A custom hero

Add src/custom/Hero.svelte and the landing page shows it in place of the hero screenshot or code sample. It gets the right-hand column, about 30rem wide on a desktop and the full width on a phone. Keep it light: it runs on every visit to the home page.

Anything the hero imports, like data for a demo, goes in src/custom too.

Custom styles

Every .css file in src/custom loads on every page, after the template's styles. Use the colour tokens from src/app.css, like --ink, --soft, --accent and --surface, so both light and dark work.

Colours that only make sense for this tool can go there as new tokens. Define the dark version under :root[data-mode='dark'].

Everything else

Changes anywhere else in src are the template's, and scripts/update-site.sh replaces them. If a site needs something the template can't do, add it to the template so every site gets it.