dark mode support & code highlighting

[Simon-Laux]

• add ability to specify alternative images for dark mode
• add dark mode via css vars (text, background, headings)
• darkmode for menu
• darkmode for call to action buttons
• dark theme for comments
• add style for figure and improve the invert function for monchrome images (like the xkcd comic and the chatmail logo)
• bring dark mode to download page
• dark variant of cosmos footer? would need to be done in cosmos repo
• button to change between light and dark mode
• go over last blog posts to check for issues with darkmode
• bug: figure on mobile is bigger than screen

also:

• format scss files
• remove twitter icon
• darkmode for menu
• rm unused style
• remove inactive/invalid css from comments.css
• format comments.css
• add code highlighting (no worries this is just adding styles to make use of a build-in Jekyll feature that was already on, no new dependencies and no runtime javascript)

Changes to the <figure> element and the last blogpost

Since the comic in the last blogpost looked bad with no borders in dark mode I found a way to improve how it looks:

• I added a style for the figure element (so it actually centers element and caption)
• I added a class to invert and blend monochrome images so that they fit with the dark theme background. I also applied that conditional class to the chatmail logo in the same blogpost.

before:

after:

light	dark

[github-actions]

Check out the page preview at https://staging.delta.chat/982/en/