diff options
| author | Benjamin Franzke <benjaminfranzke@googlemail.com> | 2022-05-17 13:48:27 +0200 |
|---|---|---|
| committer | Benjamin Franzke <benjaminfranzke@googlemail.com> | 2022-05-17 23:00:18 +0200 |
| commit | 2eca6d602f8ea9c8e05490ef385e22db54140801 (patch) | |
| tree | 67e2dfdb6f4445d1784a1114117b310a84a4a2db /docs/style.css | |
| parent | 9b266e4349826140c41e965216835bae745e3db1 (diff) | |
| download | systemd-2eca6d602f8ea9c8e05490ef385e22db54140801.tar.gz | |
docs: overhaul styling for example log messages on startpage
* 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)
Diffstat (limited to 'docs/style.css')
| -rw-r--r-- | docs/style.css | 25 |
1 files changed, 24 insertions, 1 deletions
diff --git a/docs/style.css b/docs/style.css index 74673bc93f..112e5457c8 100644 --- a/docs/style.css +++ b/docs/style.css @@ -24,6 +24,7 @@ --sd-gray: hsl(30, 10%, 85%); --sd-gray-dark: hsl(257, 23%, 20%); --sd-gray-extradark: hsl(257, 23%, 16%); /* #241f31 */ + --sd-blue: hsl(200, 66%, 55%); --sd-highlight-bg-light: rgba(255, 255, 255, 1); --sd-highlight-bg-dark: rgba(0, 0, 0, .6); @@ -131,6 +132,20 @@ hr { max-width: 720px; } +/* Custom content */ +.intro-code-block { + background-color: var(--sd-brand-black); + color: var(--sd-brand-white); + font-size: 0.875rem; + padding: 1em; + overflow-x: auto; +} +@media (prefers-color-scheme: dark) { + .intro-code-block { + background-color: var(--sd-highlight-bg); + } +} + /* Singletons */ .page-logo { display: block; @@ -154,7 +169,15 @@ hr { .brand-black { background-color: var(--sd-brand-black); - color: var(--sd-white); + color: var(--sd-brand-white); +} + +.color-green { + color: var(--sd-brand-green); +} + +.color-blue { + color: var(--sd-blue); } .page-link::after { |