1 /* SPDX-License-Identifier: LGPL-2.1-or-later */
5 src: url
('fonts/heebo-regular.woff');
11 src: url
('fonts/heebo-bold.woff');
17 --sd-brand-black: hsl
(270, 19%, 13%); /* #201A26; */
18 --sd-brand-green: hsl
(145, 66%, 51%); /* #30D475; */
19 --sd-brand-white: #fff;
21 --sd-black: hsl
(270, 7%, 13%);
22 --sd-green: hsl
(145, 66%, 43%); /* #26b763 */
23 --sd-gray-extralight: hsl
(30, 10%, 96%); /* #f6f5f4 */
24 --sd-gray-light: hsl
(30, 10%, 92%);
25 --sd-gray: hsl
(30, 10%, 85%);
26 --sd-gray-dark: hsl
(257, 23%, 20%);
27 --sd-gray-extradark: hsl
(257, 23%, 16%); /* #241f31 */
28 --sd-blue: hsl
(200, 66%, 55%);
30 --sd-highlight-bg-light: rgba
(255, 255, 255, 1);
31 --sd-highlight-bg-dark: rgba
(0, 0, 0, .6);
32 --sd-highlight-inline-bg-light: rgba
(0, 0, 0, 0.07);
33 --sd-highlight-inline-bg-dark: rgba
(255, 255, 255, 0.1);
35 --sd-font-weight-normal: 400;
36 --sd-font-weight-bold: 600;
38 /* Light mode variables */
39 --sd-foreground-color: var
(--sd-gray-extradark
);
40 --sd-background-color: var
(--sd-gray-extralight
);
41 --sd-logo-color: var
(--sd-brand-black
);
42 --sd-link-color: var
(--sd-green
);
43 --sd-small-color: var
(--sd-gray-dark
);
44 --sd-highlight-bg: var
(--sd-highlight-bg-light
);
45 --sd-highlight-inline-bg: var
(--sd-highlight-inline-bg-light
);
46 --sd-link-font-weight: var
(--sd-font-weight-bold
);
47 --sd-table-row-bg: var
(--sd-highlight-inline-bg-light
);
48 --sd-table-row-hover-bg: var
(--sd-gray
);
51 @media (prefers-color-scheme: dark
) {
54 --sd-foreground-color: var
(--sd-gray
);
55 --sd-background-color: var
(--sd-black
);
56 --sd-logo-color: var
(--sd-brand-white
);
57 --sd-link-color: var
(--sd-brand-green
);
58 --sd-small-color: var
(--sd-gray
);
59 --sd-highlight-bg: var
(--sd-highlight-bg-dark
);
60 --sd-highlight-inline-bg: var
(--sd-highlight-inline-bg-dark
);
61 --sd-link-font-weight: var
(--sd-font-weight-normal
);
62 --sd-table-row-bg: var
(--sd-highlight-inline-bg-dark
);
63 --sd-table-row-hover-bg: var
(--sd-highlight-bg-dark
);
69 -moz-box-sizing: border-box
;
70 -webkit-box-sizing: border-box
;
71 box-sizing: border-box
;
77 font-family: "Heebo", sans-serif
;
82 color: var
(--sd-foreground-color
);
83 background-color: var
(--sd-background-color
);
85 h1
, h2
, h3
, h4
, h5
, h6
{
86 margin: 1rem 0 0.625rem;
97 @media screen and
(min-width: 650px) {
110 font-weight: var
(--sd-link-font-weight
);
111 text-decoration: none
;
112 color: var
(--sd-link-color
);
116 text-decoration: underline
;
122 color: var
(--sd-small-color
);
125 margin: 3rem auto
4rem;
148 width: auto
!important
;
149 border-collapse: separate
;
154 display: block
; /* required for overflow-x auto on tables */
156 @media screen and
(min-width: 768px) {
159 border-left: 1rem solid transparent
;
160 border-right: 1rem solid transparent
;
165 tbody:first-child
tr:nth-child
(odd
),
166 thead
+ tbody
tr:nth-child
(even
) {
167 background-color: var
(--sd-table-row-bg
);
171 background-color: var
(--sd-table-row-hover-bg
) !important
;
180 th:first-child
, td:first-child
{
181 padding-left: 0.75rem;
184 th:last-child
, td:last-child
{
185 padding-right: 0.75rem;
190 background-color: var
(--sd-brand-black
);
191 color: var
(--sd-brand-white
);
196 @media (prefers-color-scheme: dark
) {
198 background-color: var
(--sd-highlight-bg
);
205 padding: 5rem 0 3rem;
206 color: var
(--sd-logo-color
);
216 background-color: var
(--sd-brand-white
);
220 background-color: var
(--sd-brand-green
);
224 background-color: var
(--sd-brand-black
);
225 color: var
(--sd-brand-white
);
229 color: var
(--sd-brand-green
);
233 color: var
(--sd-blue
);
249 /* Make tables vertically aligned to the top */
254 /* Rouge Code Highlight, github style */
255 /* Generated with: rougify style github | sed '/background-color: #f8f8f8/d' */
256 .highlight table td { padding: 5px; }
257 .highlight table pre { margin: 0; }
259 @media (prefers-color-scheme: light
) {
277 .highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf {
283 background-color: #e3d2d2;
287 background-color: #ffdddd;
301 background-color: #ddffdd;
342 .highlight .k, .highlight .kv {
361 .highlight .m, .highlight .mb, .highlight .mx {
401 .highlight .s, .highlight .dl {
431 .highlight .nf, .highlight .fm {
454 .highlight .nv, .highlight .vm {
470 @media (prefers-color-scheme: dark
) {
471 /* rouge "base16.dark" code highlight */
472 /* generated with: rougify style base16.dark | sed '/background-color: #151515/d' */
473 .highlight, .highlight .w {
478 background-color: #ac4142;
480 .highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs {
489 .highlight .o, .highlight .ow {
492 .highlight .p, .highlight .pi {
505 .highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
517 .highlight .s, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
544 .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
556 color: var
(--sd-foreground-color
);
557 background-color: var
(--sd-highlight-bg
);
561 .highlighter-rouge .highlight .err {
562 background: transparent
!important
;
563 color: inherit
!important
;
567 code
.highlighter-rouge
{
569 background-color: var
(--sd-highlight-inline-bg
);
572 a code
.highlighter-rouge
{