Theming

I don’t like your colours

The site currently generates its own colour scheme on the basis of one main colour, which is defined as --colour-main in style.css. This is a HSL colour, which means you can change the hue to whatever you like and completely change the colours everywhere, while keeping similar visual contrast. So if you wanted the site to be purple not blue, change --colour-main-hue to be something like 295 and notice the whole site change colour.

I don’t like your fonts

The fonts are also defined in CSS variables near the top of style.css, and come from Google fonts. You can switch the fonts out to whatever you like, but make sure to also update the import URL at the top of the file to include (only) the fonts and weights you want to use.

I don’t like your code colour theme

Code syntax highlighting is done using PrismJS, which has loads of themes. If you want to use a different theme, delete src/nord.css (the current theme) and add one of these files instead. Then update the stylesheet import from nord to your new filename in src/routes/_layout.svelte.

I want to make bigger changes

Go for it! There isn’t all that much CSS to this site, go wild and change things. Note that global styling is defined in style.css, but individual “components” such as the navbar have additional CSS defined in the components themselves. You can find these in /src/lib/<ComponentName>.svelte (e.g. the Navbar component is in /src/lib/ Navbar.svelte), and there are <style> tags at the bottom of the component for scoped CSS.

… but I don’t want to edit the CSS myself

email Caro from Codex Felis to talk about your needs and get a quote for custom development.

Next steps

Maybe you want to go on to add your logo and other image assets, deploy your fancy new site or configure the CMS.