1
0
mirror of https://github.com/systemd/systemd.git synced 2024-10-27 01:55:22 +03:00

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)
This commit is contained in:
Benjamin Franzke 2022-05-17 13:48:27 +02:00
parent 9b266e4349
commit 2eca6d602f
2 changed files with 63 additions and 40 deletions

View File

@ -33,63 +33,63 @@ Other parts include a logging daemon, utilities to control basic system configur
--- ---
<pre style="color:white; background-color:black; font-size:smaller; padding:6pt 8pt"> <pre class="intro-code-block">
Welcome to <span style="color:blue">Fedora 20 (Heisenbug)</span>! Welcome to <span class="color-blue">Fedora 20 (Heisenbug)</span>!
[ <span style="color:green">OK</span> ] Reached target Remote File Systems. [ <span class="color-green">OK</span> ] Reached target Remote File Systems.
[ <span style="color:green">OK</span> ] Listening on Delayed Shutdown Socket. [ <span class="color-green">OK</span> ] Listening on Delayed Shutdown Socket.
[ <span style="color:green">OK</span> ] Listening on /dev/initctl Compatibility Named Pipe. [ <span class="color-green">OK</span> ] Listening on /dev/initctl Compatibility Named Pipe.
[ <span style="color:green">OK</span> ] Reached target Paths. [ <span class="color-green">OK</span> ] Reached target Paths.
[ <span style="color:green">OK</span> ] Reached target Encrypted Volumes. [ <span class="color-green">OK</span> ] Reached target Encrypted Volumes.
[ <span style="color:green">OK</span> ] Listening on Journal Socket. [ <span class="color-green">OK</span> ] Listening on Journal Socket.
Mounting Huge Pages File System... Mounting Huge Pages File System...
Mounting POSIX Message Queue File System... Mounting POSIX Message Queue File System...
Mounting Debug File System... Mounting Debug File System...
Starting Journal Service... Starting Journal Service...
[ <span style="color:green">OK</span> ] Started Journal Service. [ <span class="color-green">OK</span> ] Started Journal Service.
Mounting Configuration File System... Mounting Configuration File System...
Mounting FUSE Control File System... Mounting FUSE Control File System...
[ <span style="color:green">OK</span> ] Created slice Root Slice. [ <span class="color-green">OK</span> ] Created slice Root Slice.
[ <span style="color:green">OK</span> ] Created slice User and Session Slice. [ <span class="color-green">OK</span> ] Created slice User and Session Slice.
[ <span style="color:green">OK</span> ] Created slice System Slice. [ <span class="color-green">OK</span> ] Created slice System Slice.
[ <span style="color:green">OK</span> ] Reached target Slices. [ <span class="color-green">OK</span> ] Reached target Slices.
[ <span style="color:green">OK</span> ] Reached target Swap. [ <span class="color-green">OK</span> ] Reached target Swap.
Mounting Temporary Directory... Mounting Temporary Directory...
[ <span style="color:green">OK</span> ] Reached target Local File Systems (Pre). [ <span class="color-green">OK</span> ] Reached target Local File Systems (Pre).
Starting Load Random Seed... Starting Load Random Seed...
Starting Load/Save Random Seed... Starting Load/Save Random Seed...
[ <span style="color:green">OK</span> ] Mounted Huge Pages File System. [ <span class="color-green">OK</span> ] Mounted Huge Pages File System.
[ <span style="color:green">OK</span> ] Mounted POSIX Message Queue File System. [ <span class="color-green">OK</span> ] Mounted POSIX Message Queue File System.
[ <span style="color:green">OK</span> ] Mounted Debug File System. [ <span class="color-green">OK</span> ] Mounted Debug File System.
[ <span style="color:green">OK</span> ] Mounted Configuration File System. [ <span class="color-green">OK</span> ] Mounted Configuration File System.
[ <span style="color:green">OK</span> ] Mounted FUSE Control File System. [ <span class="color-green">OK</span> ] Mounted FUSE Control File System.
[ <span style="color:green">OK</span> ] Mounted Temporary Directory. [ <span class="color-green">OK</span> ] Mounted Temporary Directory.
[ <span style="color:green">OK</span> ] Started Load Random Seed. [ <span class="color-green">OK</span> ] Started Load Random Seed.
[ <span style="color:green">OK</span> ] Started Load/Save Random Seed. [ <span class="color-green">OK</span> ] Started Load/Save Random Seed.
[ <span style="color:green">OK</span> ] Reached target Local File Systems. [ <span class="color-green">OK</span> ] Reached target Local File Systems.
Starting Recreate Volatile Files and Directories... Starting Recreate Volatile Files and Directories...
Starting Trigger Flushing of Journal to Persistent Storage... Starting Trigger Flushing of Journal to Persistent Storage...
[ <span style="color:green">OK</span> ] Started Recreate Volatile Files and Directories. [ <span class="color-green">OK</span> ] Started Recreate Volatile Files and Directories.
Starting Record System Reboot/Shutdown in UTMP... Starting Record System Reboot/Shutdown in UTMP...
[ <span style="color:green">OK</span> ] Started Trigger Flushing of Journal to Persistent Storage. [ <span class="color-green">OK</span> ] Started Trigger Flushing of Journal to Persistent Storage.
[ <span style="color:green">OK</span> ] Started Record System Reboot/Shutdown in UTMP. [ <span class="color-green">OK</span> ] Started Record System Reboot/Shutdown in UTMP.
[ <span style="color:green">OK</span> ] Reached target System Initialization. [ <span class="color-green">OK</span> ] Reached target System Initialization.
[ <span style="color:green">OK</span> ] Reached target Timers. [ <span class="color-green">OK</span> ] Reached target Timers.
[ <span style="color:green">OK</span> ] Listening on D-Bus System Message Bus Socket. [ <span class="color-green">OK</span> ] Listening on D-Bus System Message Bus Socket.
[ <span style="color:green">OK</span> ] Reached target Sockets. [ <span class="color-green">OK</span> ] Reached target Sockets.
[ <span style="color:green">OK</span> ] Reached target Basic System. [ <span class="color-green">OK</span> ] Reached target Basic System.
Starting Permit User Sessions... Starting Permit User Sessions...
Starting D-Bus System Message Bus... Starting D-Bus System Message Bus...
[ <span style="color:green">OK</span> ] Started D-Bus System Message Bus. [ <span class="color-green">OK</span> ] Started D-Bus System Message Bus.
Starting Login Service... Starting Login Service...
Starting Cleanup of Temporary Directories... Starting Cleanup of Temporary Directories...
[ <span style="color:green">OK</span> ] Started Permit User Sessions. [ <span class="color-green">OK</span> ] Started Permit User Sessions.
[ <span style="color:green">OK</span> ] Started Cleanup of Temporary Directories. [ <span class="color-green">OK</span> ] Started Cleanup of Temporary Directories.
Starting Console Getty... Starting Console Getty...
[ <span style="color:green">OK</span> ] Started Console Getty. [ <span class="color-green">OK</span> ] Started Console Getty.
[ <span style="color:green">OK</span> ] Reached target Login Prompts. [ <span class="color-green">OK</span> ] Reached target Login Prompts.
[ <span style="color:green">OK</span> ] Started Login Service. [ <span class="color-green">OK</span> ] Started Login Service.
[ <span style="color:green">OK</span> ] Reached target Multi-User System. [ <span class="color-green">OK</span> ] Reached target Multi-User System.
Fedora release 20 (Heisenbug) Fedora release 20 (Heisenbug)
Kernel 3.9.2-200.fc18.x86_64 on an x86_64 (console) Kernel 3.9.2-200.fc18.x86_64 on an x86_64 (console)

View File

@ -24,6 +24,7 @@
--sd-gray: hsl(30, 10%, 85%); --sd-gray: hsl(30, 10%, 85%);
--sd-gray-dark: hsl(257, 23%, 20%); --sd-gray-dark: hsl(257, 23%, 20%);
--sd-gray-extradark: hsl(257, 23%, 16%); /* #241f31 */ --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-light: rgba(255, 255, 255, 1);
--sd-highlight-bg-dark: rgba(0, 0, 0, .6); --sd-highlight-bg-dark: rgba(0, 0, 0, .6);
@ -131,6 +132,20 @@ hr {
max-width: 720px; 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 */ /* Singletons */
.page-logo { .page-logo {
display: block; display: block;
@ -154,7 +169,15 @@ hr {
.brand-black { .brand-black {
background-color: var(--sd-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 { .page-link::after {