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)

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 {