man: add self-contained example of notify protocol

[thirdparty/systemd.git] / docs / style.css

diff --git a/docs/style.css b/docs/style.css
index 951e3f5a48bed96b989cfd725d50693703ff1bc8..ee0fc7f754ec637029b8ec9babfa880216c78cf4 100644 (file)
--- a/docs/style.css
+++ b/docs/style.css
@@ -1,3 +1,5 @@
+/* SPDX-License-Identifier: LGPL-2.1-or-later */
+
 @font-face {
     font-family: 'Heebo';
     src: url('fonts/heebo-regular.woff');
@@ -10,6 +12,58 @@
     font-weight: 600;
 }
 
+/* Variables */
+:root {
+  --sd-brand-black: hsl(270, 19%, 13%); /* #201A26; */
+  --sd-brand-green: hsl(145, 66%, 51%); /* #30D475; */
+  --sd-brand-white: #fff;
+
+  --sd-black: hsl(270, 7%, 13%);
+  --sd-green: hsl(145, 66%, 43%); /* #26b763 */
+  --sd-gray-extralight: hsl(30, 10%, 96%); /* #f6f5f4 */
+  --sd-gray-light: hsl(30, 10%, 92%);
+  --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);
+  --sd-highlight-inline-bg-light: rgba(0, 0, 0, 0.07);
+  --sd-highlight-inline-bg-dark: rgba(255, 255, 255, 0.1);
+
+  --sd-font-weight-normal: 400;
+  --sd-font-weight-bold: 600;
+
+  /* Light mode variables */
+  --sd-foreground-color: var(--sd-gray-extradark);
+  --sd-background-color: var(--sd-gray-extralight);
+  --sd-logo-color: var(--sd-brand-black);
+  --sd-link-color: var(--sd-green);
+  --sd-small-color: var(--sd-gray-dark);
+  --sd-highlight-bg: var(--sd-highlight-bg-light);
+  --sd-highlight-inline-bg: var(--sd-highlight-inline-bg-light);
+  --sd-link-font-weight: var(--sd-font-weight-bold);
+  --sd-table-row-bg: var(--sd-highlight-inline-bg-light);
+  --sd-table-row-hover-bg: var(--sd-gray);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+    --sd-foreground-color: var(--sd-gray);
+    --sd-background-color: var(--sd-black);
+    --sd-logo-color: var(--sd-brand-white);
+    --sd-link-color: var(--sd-brand-green);
+    --sd-small-color: var(--sd-gray);
+    --sd-highlight-bg: var(--sd-highlight-bg-dark);
+    --sd-highlight-inline-bg: var(--sd-highlight-inline-bg-dark);
+    --sd-link-font-weight: var(--sd-font-weight-normal);
+    --sd-table-row-bg: var(--sd-highlight-inline-bg-dark);
+    --sd-table-row-hover-bg: var(--sd-highlight-bg-dark);
+  }
+}
+
 /* Typography */
 * {
   -moz-box-sizing: border-box;
@@ -19,42 +73,43 @@
 html, body {
   margin: 0;
   padding: 0;
-  font-size: 16px;
+  font-size: 1rem;
   font-family: "Heebo", sans-serif;
   font-weight: 400;
   line-height: 1.6;
 }
 body {
-  color: #241f31;
-  background-color: #f6f5f4;
+  color: var(--sd-foreground-color);
+  background-color: var(--sd-background-color);
 }
 h1, h2, h3, h4, h5, h6 {
-  margin: 1rem 0 10px;
+  margin: 1rem 0 0.625rem;
   font-weight: 600;
   line-height: 1.25;
 }
 h1 {
   text-align: center;
-  font-size: 30px;
-  font-weight: 100;
+  font-size: 1.87rem;
+  font-weight: 400;
   font-style: normal;
   margin-bottom: 2rem;
 }
 @media screen and (min-width: 650px) {
   h1 {
-    margin-left: 10%;
-    margin-right: 10%;
-    font-size: 38px;
+    font-size: 2.375em;
   }
 }
 h2 {
-  margin-top: 3rem;
-  font-size: 1.2rem;
+  font-size: 1.25rem;
+  margin-top: 2.5em;
+}
+h3 {
+  font-size: 1.15rem;
 }
 a {
-  font-weight: 600;
+  font-weight: var(--sd-link-font-weight);
   text-decoration: none;
-  color: #26b763;
+  color: var(--sd-link-color);
   cursor: pointer;
 }
 a:hover {
@@ -64,7 +119,7 @@ b {
   font-weight: 600;
 }
 small {
-  color: #777;
+  color: var(--sd-small-color);
 }
 hr {
   margin: 3rem auto 4rem;
@@ -73,34 +128,109 @@ hr {
 }
 
 /* Layout */
-.container {
+.container > * {
   width: 80%;
   margin-left: auto;
   margin-right: auto;
   max-width: 720px;
 }
 
+.container > table {
+  max-width: 1600px;
+}
+
+.container > h1 {
+  max-width: 530px;
+}
+
+/* Tables */
+table {
+  width: auto !important;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin-top: 2em;
+  margin-bottom: 3em;
+  overflow-x: auto;
+  display: block; /* required for overflow-x auto on tables */
+}
+@media screen and (min-width: 768px) {
+  table {
+    display: table;
+    border-left: 1rem solid transparent;
+    border-right: 1rem solid transparent;
+  }
+}
+
+thead tr,
+tbody:first-child tr:nth-child(odd),
+thead + tbody tr:nth-child(even) {
+  background-color: var(--sd-table-row-bg);
+}
+
+tbody tr:hover {
+  background-color: var(--sd-table-row-hover-bg) !important;
+}
+
+th, td {
+  vertical-align: top;
+  text-align: left;
+  padding: .5rem;
+}
+
+th:first-child, td:first-child {
+  padding-left: 0.75rem;
+}
+
+th:last-child, td:last-child {
+  padding-right: 0.75rem;
+}
+
+/* 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;
   padding: 5rem 0 3rem;
+  color: var(--sd-logo-color);
 }
-.page-logo > img {
+.page-logo > svg {
   display: block;
+  width: 12.625em;
+  height: auto;
   margin: 0 auto;
 }
 
 .brand-white {
-  background-color: #fff;
+  background-color: var(--sd-brand-white);
 }
 
 .brand-green {
-  background-color: #30D475;
+  background-color: var(--sd-brand-green);
 }
 
 .brand-black {
-  background-color: #201A26;
-  color: white;
+  background-color: var(--sd-brand-black);
+  color: var(--sd-brand-white);
+}
+
+.color-green {
+  color: var(--sd-brand-green);
+}
+
+.color-blue {
+  color: var(--sd-blue);
 }
 
 .page-link::after {
@@ -121,232 +251,324 @@ tbody td {
   vertical-align: top;
 }
 
-/* Github Code Highlighting */
+/* Rouge Code Highlight, github style */
+/* Generated with: rougify style github | sed '/background-color: #f8f8f8/d' */
 .highlight table td { padding: 5px; }
 .highlight table pre { margin: 0; }
-.highlight .cm {
-  color: #999988;
-  font-style: italic;
-}
-.highlight .cp {
-  color: #999999;
-  font-weight: bold;
-}
-.highlight .c1 {
-  color: #999988;
-  font-style: italic;
-}
-.highlight .cs {
-  color: #999999;
-  font-weight: bold;
-  font-style: italic;
-}
-.highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf {
-  color: #999988;
-  font-style: italic;
-}
-.highlight .err {
-  color: #a61717;
-  background-color: #e3d2d2;
-}
-.highlight .gd {
-  color: #000000;
-  background-color: #ffdddd;
-}
-.highlight .ge {
-  color: #000000;
-  font-style: italic;
-}
-.highlight .gr {
-  color: #aa0000;
-}
-.highlight .gh {
-  color: #999999;
-}
-.highlight .gi {
-  color: #000000;
-  background-color: #ddffdd;
-}
-.highlight .go {
-  color: #888888;
-}
-.highlight .gp {
-  color: #555555;
-}
-.highlight .gs {
-  font-weight: bold;
-}
-.highlight .gu {
-  color: #aaaaaa;
-}
-.highlight .gt {
-  color: #aa0000;
-}
-.highlight .kc {
-  color: #000000;
-  font-weight: bold;
-}
-.highlight .kd {
-  color: #000000;
-  font-weight: bold;
-}
-.highlight .kn {
-  color: #000000;
-  font-weight: bold;
-}
-.highlight .kp {
-  color: #000000;
-  font-weight: bold;
-}
-.highlight .kr {
-  color: #000000;
-  font-weight: bold;
-}
-.highlight .kt {
-  color: #445588;
-  font-weight: bold;
-}
-.highlight .k, .highlight .kv {
-  color: #000000;
-  font-weight: bold;
-}
-.highlight .mf {
-  color: #009999;
-}
-.highlight .mh {
-  color: #009999;
-}
-.highlight .il {
-  color: #009999;
-}
-.highlight .mi {
-  color: #009999;
-}
-.highlight .mo {
-  color: #009999;
-}
-.highlight .m, .highlight .mb, .highlight .mx {
-  color: #009999;
-}
-.highlight .sb {
-  color: #d14;
-}
-.highlight .sc {
-  color: #d14;
-}
-.highlight .sd {
-  color: #d14;
-}
-.highlight .s2 {
-  color: #d14;
-}
-.highlight .se {
-  color: #d14;
-}
-.highlight .sh {
-  color: #d14;
-}
-.highlight .si {
-  color: #d14;
-}
-.highlight .sx {
-  color: #d14;
-}
-.highlight .sr {
-  color: #009926;
-}
-.highlight .s1 {
-  color: #d14;
-}
-.highlight .ss {
-  color: #990073;
-}
-.highlight .s, .highlight .sa, .highlight .dl {
-  color: #d14;
-}
-.highlight .na {
-  color: #008080;
-}
-.highlight .bp {
-  color: #999999;
-}
-.highlight .nb {
-  color: #0086B3;
-}
-.highlight .nc {
-  color: #445588;
-  font-weight: bold;
-}
-.highlight .no {
-  color: #008080;
-}
-.highlight .nd {
-  color: #3c5d5d;
-  font-weight: bold;
-}
-.highlight .ni {
-  color: #800080;
-}
-.highlight .ne {
-  color: #990000;
-  font-weight: bold;
-}
-.highlight .nf, .highlight .fm {
-  color: #990000;
-  font-weight: bold;
-}
-.highlight .nl {
-  color: #990000;
-  font-weight: bold;
-}
-.highlight .nn {
-  color: #555555;
-}
-.highlight .nt {
-  color: #000080;
-}
-.highlight .vc {
-  color: #008080;
-}
-.highlight .vg {
-  color: #008080;
-}
-.highlight .vi {
-  color: #008080;
-}
-.highlight .nv, .highlight .vm {
-  color: #008080;
-}
-.highlight .ow {
-  color: #000000;
-  font-weight: bold;
-}
-.highlight .o {
-  color: #000000;
-  font-weight: bold;
-}
-.highlight .w {
-  color: #bbbbbb;
-}
-.highlight {
-  background-color: #f8f8f8;
+
+@media (prefers-color-scheme: light) {
+  .highlight .cm {
+    color: #999988;
+    font-style: italic;
+  }
+  .highlight .cp {
+    color: #999999;
+    font-weight: bold;
+  }
+  .highlight .c1 {
+    color: #999988;
+    font-style: italic;
+  }
+  .highlight .cs {
+    color: #999999;
+    font-weight: bold;
+    font-style: italic;
+  }
+  .highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf {
+    color: #999988;
+    font-style: italic;
+  }
+  .highlight .err {
+    color: #a61717;
+    background-color: #e3d2d2;
+  }
+  .highlight .gd {
+    color: #000000;
+    background-color: #ffdddd;
+  }
+  .highlight .ge {
+    color: #000000;
+    font-style: italic;
+  }
+  .highlight .gr {
+    color: #aa0000;
+  }
+  .highlight .gh {
+    color: #999999;
+  }
+  .highlight .gi {
+    color: #000000;
+    background-color: #ddffdd;
+  }
+  .highlight .go {
+    color: #888888;
+  }
+  .highlight .gp {
+    color: #555555;
+  }
+  .highlight .gs {
+    font-weight: bold;
+  }
+  .highlight .gu {
+    color: #aaaaaa;
+  }
+  .highlight .gt {
+    color: #aa0000;
+  }
+  .highlight .kc {
+    color: #000000;
+    font-weight: bold;
+  }
+  .highlight .kd {
+    color: #000000;
+    font-weight: bold;
+  }
+  .highlight .kn {
+    color: #000000;
+    font-weight: bold;
+  }
+  .highlight .kp {
+    color: #000000;
+    font-weight: bold;
+  }
+  .highlight .kr {
+    color: #000000;
+    font-weight: bold;
+  }
+  .highlight .kt {
+    color: #445588;
+    font-weight: bold;
+  }
+  .highlight .k, .highlight .kv {
+    color: #000000;
+    font-weight: bold;
+  }
+  .highlight .mf {
+    color: #009999;
+  }
+  .highlight .mh {
+    color: #009999;
+  }
+  .highlight .il {
+    color: #009999;
+  }
+  .highlight .mi {
+    color: #009999;
+  }
+  .highlight .mo {
+    color: #009999;
+  }
+  .highlight .m, .highlight .mb, .highlight .mx {
+    color: #009999;
+  }
+  .highlight .sa {
+    color: #000000;
+    font-weight: bold;
+  }
+  .highlight .sb {
+    color: #d14;
+  }
+  .highlight .sc {
+    color: #d14;
+  }
+  .highlight .sd {
+    color: #d14;
+  }
+  .highlight .s2 {
+    color: #d14;
+  }
+  .highlight .se {
+    color: #d14;
+  }
+  .highlight .sh {
+    color: #d14;
+  }
+  .highlight .si {
+    color: #d14;
+  }
+  .highlight .sx {
+    color: #d14;
+  }
+  .highlight .sr {
+    color: #009926;
+  }
+  .highlight .s1 {
+    color: #d14;
+  }
+  .highlight .ss {
+    color: #990073;
+  }
+  .highlight .s, .highlight .dl {
+    color: #d14;
+  }
+  .highlight .na {
+    color: #008080;
+  }
+  .highlight .bp {
+    color: #999999;
+  }
+  .highlight .nb {
+    color: #0086B3;
+  }
+  .highlight .nc {
+    color: #445588;
+    font-weight: bold;
+  }
+  .highlight .no {
+    color: #008080;
+  }
+  .highlight .nd {
+    color: #3c5d5d;
+    font-weight: bold;
+  }
+  .highlight .ni {
+    color: #800080;
+  }
+  .highlight .ne {
+    color: #990000;
+    font-weight: bold;
+  }
+  .highlight .nf, .highlight .fm {
+    color: #990000;
+    font-weight: bold;
+  }
+  .highlight .nl {
+    color: #990000;
+    font-weight: bold;
+  }
+  .highlight .nn {
+    color: #555555;
+  }
+  .highlight .nt {
+    color: #000080;
+  }
+  .highlight .vc {
+    color: #008080;
+  }
+  .highlight .vg {
+    color: #008080;
+  }
+  .highlight .vi {
+    color: #008080;
+  }
+  .highlight .nv, .highlight .vm {
+    color: #008080;
+  }
+  .highlight .ow {
+    color: #000000;
+    font-weight: bold;
+  }
+  .highlight .o {
+    color: #000000;
+    font-weight: bold;
+  }
+  .highlight .w {
+    color: #bbbbbb;
+  }
 }
 
+@media (prefers-color-scheme: dark) {
+  /* rouge "base16.dark" code highlight */
+  /* generated with: rougify style base16.dark | sed '/background-color: #151515/d' */
+  .highlight, .highlight .w {
+    color: #d0d0d0;
+  }
+  .highlight .err {
+    color: #151515;
+    background-color: #ac4142;
+  }
+  .highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs {
+    color: #505050;
+  }
+  .highlight .cp {
+    color: #f4bf75;
+  }
+  .highlight .nt {
+    color: #f4bf75;
+  }
+  .highlight .o, .highlight .ow {
+    color: #d0d0d0;
+  }
+  .highlight .p, .highlight .pi {
+    color: #d0d0d0;
+  }
+  .highlight .gi {
+    color: #90a959;
+  }
+  .highlight .gd {
+    color: #ac4142;
+  }
+  .highlight .gh {
+    color: #6a9fb5;
+    font-weight: bold;
+  }
+  .highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
+    color: #aa759f;
+  }
+  .highlight .kc {
+    color: #d28445;
+  }
+  .highlight .kt {
+    color: #d28445;
+  }
+  .highlight .kd {
+    color: #d28445;
+  }
+  .highlight .s, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
+    color: #90a959;
+  }
+  .highlight .sa {
+    color: #aa759f;
+  }
+  .highlight .sr {
+    color: #75b5aa;
+  }
+  .highlight .si {
+    color: #8f5536;
+  }
+  .highlight .se {
+    color: #8f5536;
+  }
+  .highlight .nn {
+    color: #f4bf75;
+  }
+  .highlight .nc {
+    color: #f4bf75;
+  }
+  .highlight .no {
+    color: #f4bf75;
+  }
+  .highlight .na {
+    color: #6a9fb5;
+  }
+  .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
+    color: #90a959;
+  }
+  .highlight .ss {
+    color: #90a959;
+  }
+}
 
 /* Code Blocks */
 .highlighter-rouge {
   padding: 2px 1rem;
   border-radius: 5px;
-  background-color: white;
+  color: var(--sd-foreground-color);
+  background-color: var(--sd-highlight-bg);
 
   overflow: auto;
 }
-.highlighter-rouge * {
-  background-color: white;
+.highlighter-rouge .highlight .err {
+  background: transparent !important;
+  color: inherit !important;
 }
 
 /* Inline Code */
 code.highlighter-rouge {
   padding: 2px 6px;
-  background-color: rgba(0,0,0, 0.07);
+  background-color: var(--sd-highlight-inline-bg);
+}
+
+a code.highlighter-rouge {
+  color: inherit;
 }