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)

diff --git a/docs/index.md b/docs/index.md
index a4577093d6071679eb02be6656ac49128f449370..1b4863088c75b442581bc3fd1db6e170202cd7fb 100644 (file)
--- a/docs/index.md
+++ b/docs/index.md
@@ -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">
-Welcome to <span style="color:blue">Fedora 20 (Heisenbug)</span>!
+<pre class="intro-code-block">
+Welcome to <span class="color-blue">Fedora 20 (Heisenbug)</span>!
 
-[  <span style="color:green">OK</span>  ] Reached target Remote File Systems.
-[  <span style="color:green">OK</span>  ] Listening on Delayed Shutdown Socket.
-[  <span style="color:green">OK</span>  ] Listening on /dev/initctl Compatibility Named Pipe.
-[  <span style="color:green">OK</span>  ] Reached target Paths.
-[  <span style="color:green">OK</span>  ] Reached target Encrypted Volumes.
-[  <span style="color:green">OK</span>  ] Listening on Journal Socket.
+[  <span class="color-green">OK</span>  ] Reached target Remote File Systems.
+[  <span class="color-green">OK</span>  ] Listening on Delayed Shutdown Socket.
+[  <span class="color-green">OK</span>  ] Listening on /dev/initctl Compatibility Named Pipe.
+[  <span class="color-green">OK</span>  ] Reached target Paths.
+[  <span class="color-green">OK</span>  ] Reached target Encrypted Volumes.
+[  <span class="color-green">OK</span>  ] Listening on Journal Socket.
          Mounting Huge Pages File System...
          Mounting POSIX Message Queue File System...
          Mounting Debug File System...
          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 FUSE Control File System...
-[  <span style="color:green">OK</span>  ] Created slice Root Slice.
-[  <span style="color:green">OK</span>  ] Created slice User and Session Slice.
-[  <span style="color:green">OK</span>  ] Created slice System Slice.
-[  <span style="color:green">OK</span>  ] Reached target Slices.
-[  <span style="color:green">OK</span>  ] Reached target Swap.
+[  <span class="color-green">OK</span>  ] Created slice Root Slice.
+[  <span class="color-green">OK</span>  ] Created slice User and Session Slice.
+[  <span class="color-green">OK</span>  ] Created slice System Slice.
+[  <span class="color-green">OK</span>  ] Reached target Slices.
+[  <span class="color-green">OK</span>  ] Reached target Swap.
          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/Save Random Seed...
-[  <span style="color:green">OK</span>  ] Mounted Huge Pages File System.
-[  <span style="color:green">OK</span>  ] Mounted POSIX Message Queue File System.
-[  <span style="color:green">OK</span>  ] Mounted Debug File System.
-[  <span style="color:green">OK</span>  ] Mounted Configuration File System.
-[  <span style="color:green">OK</span>  ] Mounted FUSE Control File System.
-[  <span style="color:green">OK</span>  ] Mounted Temporary Directory.
-[  <span style="color:green">OK</span>  ] Started Load Random Seed.
-[  <span style="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>  ] Mounted Huge Pages File System.
+[  <span class="color-green">OK</span>  ] Mounted POSIX Message Queue File System.
+[  <span class="color-green">OK</span>  ] Mounted Debug File System.
+[  <span class="color-green">OK</span>  ] Mounted Configuration File System.
+[  <span class="color-green">OK</span>  ] Mounted FUSE Control File System.
+[  <span class="color-green">OK</span>  ] Mounted Temporary Directory.
+[  <span class="color-green">OK</span>  ] Started Load Random Seed.
+[  <span class="color-green">OK</span>  ] Started Load/Save Random Seed.
+[  <span class="color-green">OK</span>  ] Reached target Local File Systems.
          Starting Recreate Volatile Files and Directories...
          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...
-[  <span style="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 style="color:green">OK</span>  ] Reached target System Initialization.
-[  <span style="color:green">OK</span>  ] Reached target Timers.
-[  <span style="color:green">OK</span>  ] Listening on D-Bus System Message Bus Socket.
-[  <span style="color:green">OK</span>  ] Reached target Sockets.
-[  <span style="color:green">OK</span>  ] Reached target Basic System.
+[  <span class="color-green">OK</span>  ] Started Trigger Flushing of Journal to Persistent Storage.
+[  <span class="color-green">OK</span>  ] Started Record System Reboot/Shutdown in UTMP.
+[  <span class="color-green">OK</span>  ] Reached target System Initialization.
+[  <span class="color-green">OK</span>  ] Reached target Timers.
+[  <span class="color-green">OK</span>  ] Listening on D-Bus System Message Bus Socket.
+[  <span class="color-green">OK</span>  ] Reached target Sockets.
+[  <span class="color-green">OK</span>  ] Reached target Basic System.
          Starting Permit User Sessions...
          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 Cleanup of Temporary Directories...
-[  <span style="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 Permit User Sessions.
+[  <span class="color-green">OK</span>  ] Started Cleanup of Temporary Directories.
          Starting Console Getty...
-[  <span style="color:green">OK</span>  ] Started Console Getty.
-[  <span style="color:green">OK</span>  ] Reached target Login Prompts.
-[  <span style="color:green">OK</span>  ] Started Login Service.
-[  <span style="color:green">OK</span>  ] Reached target Multi-User System.
+[  <span class="color-green">OK</span>  ] Started Console Getty.
+[  <span class="color-green">OK</span>  ] Reached target Login Prompts.
+[  <span class="color-green">OK</span>  ] Started Login Service.
+[  <span class="color-green">OK</span>  ] Reached target Multi-User System.
 
 Fedora release 20 (Heisenbug)
 Kernel 3.9.2-200.fc18.x86_64 on an x86_64 (console)

diff --git a/docs/style.css b/docs/style.css
index 74673bc93fad7daa2962fe24b1efdc21f807d740..112e5457c86488fbae45a85f7d7ab5434dceb1d2 100644 (file)
--- 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 {