1
1
mirror of https://github.com/systemd/systemd-stable.git synced 2024-12-24 21:34:08 +03:00
systemd-stable/docs/style.css
Benjamin Franzke ae00bafdf8 docs: improve table readability
Let the table span more than the default content width,
if the table contains alot of data (controlled by width: auto)
(720px is very good for continuous text, but too narrow for tables).

The container class is therefore adapted to put the
width restriction on the elements itself, allowing for
exceptions for individual elements like <table> and
<h1> (which used an offset margin before and is now
streamlined to use a max-width as well).

Also add a striped background to ease reading rows
and allow for horizontal mobile scrolling without
overflowing the entire document, only the table itself.
2022-05-21 22:41:21 +01:00

574 lines
11 KiB
CSS

/* SPDX-License-Identifier: LGPL-2.1-or-later */
@font-face {
font-family: 'Heebo';
src: url('fonts/heebo-regular.woff');
font-weight: 400;
}
@font-face {
font-family: 'Heebo';
src: url('fonts/heebo-bold.woff');
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-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-brand-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;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
font-size: 1rem;
font-family: "Heebo", sans-serif;
font-weight: 400;
line-height: 1.6;
}
body {
color: var(--sd-foreground-color);
background-color: var(--sd-background-color);
}
h1, h2, h3, h4, h5, h6 {
margin: 1rem 0 0.625rem;
font-weight: 600;
line-height: 1.25;
}
h1 {
text-align: center;
font-size: 1.87rem;
font-weight: 400;
font-style: normal;
margin-bottom: 2rem;
}
@media screen and (min-width: 650px) {
h1 {
font-size: 2.375em;
}
}
h2 {
font-size: 1.25rem;
margin-top: 2.5em;
}
h3 {
font-size: 1.15rem;
}
a {
font-weight: var(--sd-link-font-weight);
text-decoration: none;
color: var(--sd-link-color);
cursor: pointer;
}
a:hover {
text-decoration: underline;
}
b {
font-weight: 600;
}
small {
color: var(--sd-small-color);
}
hr {
margin: 3rem auto 4rem;
width: 40%;
opacity: 40%;
}
/* Layout */
.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 > svg {
display: block;
width: 12.625em;
height: auto;
margin: 0 auto;
}
.brand-white {
background-color: var(--sd-brand-white);
}
.brand-green {
background-color: var(--sd-brand-green);
}
.brand-black {
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 {
content: " ➜";
}
/* Footer */
footer {
text-align: center;
padding: 3em 0 3em;
font-size: 1em;
margin-top: 4rem;
}
/* Make tables vertically aligned to the top */
tbody td {
vertical-align: top;
}
/* 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; }
@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;
color: var(--sd-foreground-color);
background-color: var(--sd-highlight-bg);
overflow: auto;
}
.highlighter-rouge .highlight .err {
background: transparent !important;
color: inherit !important;
}
/* Inline Code */
code.highlighter-rouge {
padding: 2px 6px;
background-color: var(--sd-highlight-inline-bg);
}
a code.highlighter-rouge {
color: inherit;
}