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-green: hsl
(145, 66%, 43%); /* #26b763 */
22 --sd-gray-extralight: hsl
(30, 10%, 96%); /* #f6f5f4 */
23 --sd-gray-light: hsl
(30, 10%, 92%);
24 --sd-gray: hsl
(30, 10%, 85%);
25 --sd-gray-dark: hsl
(257, 23%, 20%);
26 --sd-gray-extradark: hsl
(257, 23%, 16%); /* #241f31 */
27 --sd-blue: hsl
(200, 66%, 55%);
29 --sd-highlight-bg-light: rgba
(255, 255, 255, 1);
30 --sd-highlight-bg-dark: rgba
(0, 0, 0, .6);
31 --sd-highlight-inline-bg-light: rgba
(0, 0, 0, 0.07);
32 --sd-highlight-inline-bg-dark: rgba
(255, 255, 255, 0.1);
34 --sd-font-weight-normal: 400;
35 --sd-font-weight-bold: 600;
37 /* Light mode variables */
38 --sd-foreground-color: var
(--sd-gray-extradark
);
39 --sd-background-color: var
(--sd-gray-extralight
);
40 --sd-logo-color: var
(--sd-brand-black
);
41 --sd-link-color: var
(--sd-green
);
42 --sd-small-color: var
(--sd-gray-dark
);
43 --sd-highlight-bg: var
(--sd-highlight-bg-light
);
44 --sd-highlight-inline-bg: var
(--sd-highlight-inline-bg-light
);
45 --sd-link-font-weight: var
(--sd-font-weight-bold
);
48 @media (prefers-color-scheme: dark
) {
51 --sd-foreground-color: var
(--sd-gray
);
52 --sd-background-color: var
(--sd-brand-black
);
53 --sd-logo-color: var
(--sd-brand-white
);
54 --sd-link-color: var
(--sd-brand-green
);
55 --sd-small-color: var
(--sd-gray
);
56 --sd-highlight-bg: var
(--sd-highlight-bg-dark
);
57 --sd-highlight-inline-bg: var
(--sd-highlight-inline-bg-dark
);
58 --sd-link-font-weight: var
(--sd-font-weight-normal
);
64 -moz-box-sizing: border-box
;
65 -webkit-box-sizing: border-box
;
66 box-sizing: border-box
;
72 font-family: "Heebo", sans-serif
;
77 color: var
(--sd-foreground-color
);
78 background-color: var
(--sd-background-color
);
80 h1
, h2
, h3
, h4
, h5
, h6
{
81 margin: 1rem 0 0.625rem;
92 @media screen and
(min-width: 650px) {
107 font-weight: var
(--sd-link-font-weight
);
108 text-decoration: none
;
109 color: var
(--sd-link-color
);
113 text-decoration: underline
;
119 color: var
(--sd-small-color
);
122 margin: 3rem auto
4rem;
137 background-color: var
(--sd-brand-black
);
138 color: var
(--sd-brand-white
);
143 @media (prefers-color-scheme: dark
) {
145 background-color: var
(--sd-highlight-bg
);
152 padding: 5rem 0 3rem;
153 color: var
(--sd-logo-color
);
163 background-color: var
(--sd-brand-white
);
167 background-color: var
(--sd-brand-green
);
171 background-color: var
(--sd-brand-black
);
172 color: var
(--sd-brand-white
);
176 color: var
(--sd-brand-green
);
180 color: var
(--sd-blue
);
196 /* Make tables vertically aligned to the top */
201 /* Rouge Code Highlight, github style */
202 /* Generated with: rougify style github | sed '/background-color: #f8f8f8/d' */
203 .highlight table td { padding: 5px; }
204 .highlight table pre { margin: 0; }
206 @media (prefers-color-scheme: light
) {
224 .highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf {
230 background-color: #e3d2d2;
234 background-color: #ffdddd;
248 background-color: #ddffdd;
289 .highlight .k, .highlight .kv {
308 .highlight .m, .highlight .mb, .highlight .mx {
348 .highlight .s, .highlight .dl {
378 .highlight .nf, .highlight .fm {
401 .highlight .nv, .highlight .vm {
417 @media (prefers-color-scheme: dark
) {
418 /* rouge "base16.dark" code highlight */
419 /* generated with: rougify style base16.dark | sed '/background-color: #151515/d' */
420 .highlight, .highlight .w {
425 background-color: #ac4142;
427 .highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs {
436 .highlight .o, .highlight .ow {
439 .highlight .p, .highlight .pi {
452 .highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
464 .highlight .s, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
491 .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
503 color: var
(--sd-foreground-color
);
504 background-color: var
(--sd-highlight-bg
);
508 .highlighter-rouge .highlight .err {
509 background: transparent
!important
;
510 color: inherit
!important
;
514 code
.highlighter-rouge
{
516 background-color: var
(--sd-highlight-inline-bg
);
519 a code
.highlighter-rouge
{