Add our own custom styling

[cjrace]

Is your feature request related to a problem? Please describe.
We should start a custom CSS file or something like that so we can more ees-ily customise the styling of the site.

Describe the solution you'd like
Ideal is probably two CSS files - one with the light theme and one with the dark theme, or maybe a third that has any global settings we want in both to save duplication.

Describe alternatives you've considered
Not thought this through a lot yet, though I'm assuming there's a way to do this to allow us to customise the styling more.

Additional context
Current known issues we want to address when we can customise more:

• Breadcrumb links aren't visible on the 'light' theme (aren't great on the dark either!)

Dark

Light

• Line breaks only appear automatically under h2's, but ideally we'd want to set defaults for all headers to have them above and below, as having them set manually around this in the .qmd files is chaos

• Link text colours aren't always of a high enough contrast, e.g.
  

• Code block and snippet colours (backgrounds and font colours) are not part of the current bootstrap themes we use and are instead set to be the Quarto default colours:

This means they look out of place with the rest of the theme, especially in dark mode. It'd be nice to set these as custom values that are more cohesive with whatever we choose for the new themes. You can find more info on modifying the CSS values for Quarto code blocks here: https://quarto.org/docs/output-formats/html-code.html

[jen-machin]

To note on the themes: they're currently defined in the .yml in reverse (the light theme is set as a dark theme to enforce dark mode as default). Can we get around having to do this? Is there a mechanism to set the dark theme as default so we can put the themes in the correct places? I think this might be what's causing the font colour issues. When the light theme is set to an actual light theme, the breadcrumb links look correct:

The current contrast remains a problem for dark mode though, so it's not as easy as just switching the two around and some modifications will be required.

Current themes being used are bootswatch ones:
https://bootswatch.com/cyborg/ (dark theme set as light)
https://bootswatch.com/united/ (light theme set as dark)

Something else to note is that the two themes have different fonts - it'd be nice to get some consistency across the two, ideally Roboto for accessibility purposes although I'm not sure how easy that'd be.

You can customise Bootswatch themees using this site to get them looking how you'd like and then download the CSS: https://bootstrap.build/app

[jen-machin]

Analysts Guide: add custom styling to replace existing themes