* Use brand-green for demo log messages on the startpage
instead of the default `green` color defined by the browser vendor
(after all, the brand green color is intended to reflect the
boot status output)
* Add a matching blue intro color (mixed using HSL from brand-green
by 55deg hue rotation and 4% lightness)
* Use a defined font-size
(to avoid blurry rendering at 13.33333px, due to font-size: smaller)
* Add possibility for the browser to show horizontal scrollbar
(avoid overflow in mobile view)
Respect the user agent property `prefers-color-scheme` by
rendering the documentation in dark mode, if requested.
Reorganise CSS to store the color palette into CSS variables
and reference these from another set of CSS variables that
are dynamically switched based on the prefers-color-scheme
media query.
Light mode variables stay they same as before,
but to ease color mixing, the current RGB values
have been transformed to HSL (using chrome devtools).
The current body background is now --sd-gray-extralight,
the current body color is now --sd-gray-extradark.
Other gray-variations, needed for dark-mode constrasts
are derived from these colors using HSL lightness shifting.
The systemd brand black color is used as dark mode background
and a matching extralight gray font color has been selected.
The link font-weight is reduced to 400 in dark mode,
as the green color on dark ground becomes to overwhelming
with a bold font.
The systemd logo color is dynamically swapped by using
the special fill value `currentColor` for dark/light-mode
depending parts – as per specification on brand.systemd.io
* Update to rougify 3.26.1 styling
* Adapt background overwrite by removing default background color
and only adding explicit overwrites for syntax error
(error stylings appear for example in json-excerpts –
see HACKING.md – and are therefore hidden by our css)
* Provides a nice introduction to the intro paragraph
* Ensures text of subpages start at the same position as the intro text
on the homepage
=> less visual "jumps" while navigating
The theme color is used on android to style the chrome
browser-ui with a color that suits the webpage.
Use the dark brand color instead of a random default blue color
in order to fit to the rest of the color scheme.
h1 font weight is defined to be 100 but no font-face
definition for weight 100 is included.
The browser will use the nearest available font-weight
instead. As that is 400, we do specify it explicitly now.
