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
);
46 --sd-table-row-bg: var
(--sd-highlight-inline-bg-light
);
47 --sd-table-row-hover-bg: var
(--sd-gray
);
50 @media (prefers-color-scheme: dark
) {
53 --sd-foreground-color: var
(--sd-gray
);
54 --sd-background-color: var
(--sd-brand-black
);
55 --sd-logo-color: var
(--sd-brand-white
);
56 --sd-link-color: var
(--sd-brand-green
);
57 --sd-small-color: var
(--sd-gray
);
58 --sd-highlight-bg: var
(--sd-highlight-bg-dark
);
59 --sd-highlight-inline-bg: var
(--sd-highlight-inline-bg-dark
);
60 --sd-link-font-weight: var
(--sd-font-weight-normal
);
61 --sd-table-row-bg: var
(--sd-highlight-inline-bg-dark
);
62 --sd-table-row-hover-bg: var
(--sd-highlight-bg-dark
);
68 -moz-box-sizing: border-box
;
69 -webkit-box-sizing: border-box
;
70 box-sizing: border-box
;
76 font-family: "Heebo", sans-serif
;
81 color: var
(--sd-foreground-color
);
82 background-color: var
(--sd-background-color
);
84 h1
, h2
, h3
, h4
, h5
, h6
{
85 margin: 1rem 0 0.625rem;
96 @media screen and
(min-width: 650px) {
109 font-weight: var
(--sd-link-font-weight
);
110 text-decoration: none
;
111 color: var
(--sd-link-color
);
115 text-decoration: underline
;
121 color: var
(--sd-small-color
);
124 margin: 3rem auto
4rem;
147 width: auto
!important
;
148 border-collapse: separate
;
153 display: block
; /* required for overflow-x auto on tables */
155 @media screen and
(min-width: 768px) {
158 border-left: 1rem solid transparent
;
159 border-right: 1rem solid transparent
;
164 tbody:first-child
tr:nth-child
(odd
),
165 thead
+ tbody
tr:nth-child
(even
) {
166 background-color: var
(--sd-table-row-bg
);
170 background-color: var
(--sd-table-row-hover-bg
) !important
;
179 th:first-child
, td:first-child
{
180 padding-left: 0.75rem;
183 th:last-child
, td:last-child
{
184 padding-right: 0.75rem;
189 background-color: var
(--sd-brand-black
);
190 color: var
(--sd-brand-white
);
195 @media (prefers-color-scheme: dark
) {
197 background-color: var
(--sd-highlight-bg
);
204 padding: 5rem 0 3rem;
205 color: var
(--sd-logo-color
);
215 background-color: var
(--sd-brand-white
);
219 background-color: var
(--sd-brand-green
);
223 background-color: var
(--sd-brand-black
);
224 color: var
(--sd-brand-white
);
228 color: var
(--sd-brand-green
);
232 color: var
(--sd-blue
);
248 /* Make tables vertically aligned to the top */
253 /* Rouge Code Highlight, github style */
254 /* Generated with: rougify style github | sed '/background-color: #f8f8f8/d' */
255 .highlight table td { padding: 5px; }
256 .highlight table pre { margin: 0; }
258 @media (prefers-color-scheme: light
) {
276 .highlight .c, .highlight .ch, .highlight .cd, .highlight .cpf {
282 background-color: #e3d2d2;
286 background-color: #ffdddd;
300 background-color: #ddffdd;
341 .highlight .k, .highlight .kv {
360 .highlight .m, .highlight .mb, .highlight .mx {
400 .highlight .s, .highlight .dl {
430 .highlight .nf, .highlight .fm {
453 .highlight .nv, .highlight .vm {
469 @media (prefers-color-scheme: dark
) {
470 /* rouge "base16.dark" code highlight */
471 /* generated with: rougify style base16.dark | sed '/background-color: #151515/d' */
472 .highlight, .highlight .w {
477 background-color: #ac4142;
479 .highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cpf, .highlight .c1, .highlight .cs {
488 .highlight .o, .highlight .ow {
491 .highlight .p, .highlight .pi {
504 .highlight .k, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kv {
516 .highlight .s, .highlight .sb, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh, .highlight .sx, .highlight .s1 {
543 .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
555 color: var
(--sd-foreground-color
);
556 background-color: var
(--sd-highlight-bg
);
560 .highlighter-rouge .highlight .err {
561 background: transparent
!important
;
562 color: inherit
!important
;
566 code
.highlighter-rouge
{
568 background-color: var
(--sd-highlight-inline-bg
);
571 a code
.highlighter-rouge
{