Added custom scss and theme files

[mzayeddfe]

Overview of changes

• Made the themes more accessible by changing the colours and making the fonts the same.

• Modified the files:

  • theme-dark.scss
  • theme-light.scss

• Added _styles.scss for elements that are in common between the two themes.

• Added the following files for code block styling:

  • printing-dark.theme
  • printing-light.theme
    • both of these are edited versions of the printing theme that is used by quarto. i downloaded it from https://github.com/quarto-dev/quarto-cli/tree/main/src/resources/formats/html/bootstrap/themes and edited it. this was inspired by: https://hamel.dev/notes/quarto/highlighting.html#:~:text=1.-,Syntax%20Color%20Themes,or%20site%2Dwide%20in%20_quarto.

Why are these changes being made?

To make the analyst guide more accessible and to make the colours more cohesive with the theme.

Detailed description of changes

Both themes:

• Made Roboto the default font for both themes with backups just in case it does not load (this was copied over from the cyborg theme)
• Made sure there is a line break above and below all heading levels - can remove some if there are too many listed.
• Added colours for hovering over links and visited links - can remove if too much
• Changed the inline code font colour and background

Light theme:

• Made the links in text, navigation bar and toc the same colour
• Changed the code block styling to make it similar to the united theme while still using accessible colours. This is found in the printing-light.theme file.

Dark theme:

• Made the links in text and navigation bar the same colour
• Changed the colour of the links of the navigation at the bottom of the page to a more accessible colour
• Changed the link and list item colours for breadcrumbs to make them more accessible

Issue ticket number/s and link

70