2 /* pre-defined colors */
3 --pdt-grey-950: hsl
(0deg, 0%, 95%);
4 --pdt-grey-400: hsl
(0deg, 0%, 40%);
5 --pdt-grey-250: hsl
(0deg, 0%, 25%);
6 --pdt-grey-150: hsl
(0deg, 0%, 15%);
7 --pdt-grey-100: hsl
(0deg, 0%, 10%);
8 --pdt-primary-850: hsl
(205deg, 100%, 85%);
9 --pdt-primary-800: hsl
(205deg, 100%, 80%);
10 --pdt-primary-700: hsl
(205deg, 100%, 70%);
11 --pdt-secondary-850: hsl
(250deg, 100%, 85%);
14 /* adjust admonition block spacing. this allows for a background on
15 * admonition blocks that doesn't make the elements look to tightly
21 padding: 0.5em 10% 0.5em 0.5em;
24 div
.admonitionblock td
.icon
{
28 div
.admonitionblock td
.icon
> img
{
29 box-sizing: border-box
;
33 @media screen and
(prefers-color-scheme: dark
) {
36 --pdt-body-background: var
(--pdt-grey-150
);
37 --pdt-text: var
(--pdt-grey-950
);
38 --pdt-headline: var
(--pdt-primary-800
);
39 --pdt-link: var
(--pdt-primary-700
);
40 --pdt-link-visited: var
(--pdt-secondary-850
);
41 --pdt-highlighted-text: var
(--pdt-primary-850
);
42 --pdt-background-sidebar: var
(--pdt-grey-100
);
43 --pdt-background-listings: var
(--pdt-grey-100
);
44 --pdt-border: var
(--pdt-grey-400
);
45 --pdt-border-alt: var
(--pdt-grey-250
);
46 --pdt-table-border: var
(--pdt-grey-400
);
47 --pdt-background-admonition: var
(--pdt-grey-250
);
51 color: var
(--pdt-text
);
52 background-color: var
(--pdt-body-background
);
56 color: var
(--pdt-link
);
60 color: var
(--pdt-link-visited
);
63 /* style headlines, titles etc. */
77 color: var
(--pdt-headline
);
84 border-color: var
(--pdt-border
);
87 /* formatted colored text */
94 color: var
(--pdt-highlighted-text
);
97 /* style the table of contents sidebar */
99 color: var
(--pdt-text
);
100 background-color: var
(--pdt-background-sidebar
);
101 border-color: var
(--pdt-border-alt
);
106 color: var
(--pdt-text
);
109 /* reduce the brigthness of images a bit and make it reversable
110 * through hovering over them.
113 filter: brightness
(90%);
124 border-color: var
(--pdt-table-border
);
129 color: var
(--pdt-text
);
130 border-color: var
(--pdt-border
);
133 /* listings (e.g. code snippet blocks) */
134 div
.listingblock
> div
.content
{
135 background-color: var
(--pdt-background-listings
);
136 border-color: var
(--pdt-border-alt
);
139 /* admonition blocks (e.g. notes, warnings etc.) */
140 div
.admonitionblock
{
141 color: var
(--pdt-text
);
142 background-color: var
(--pdt-background-admonition
);
145 div
.admonitionblock td
.content
{
146 border-color: var
(--pdt-border
);
149 /* makes the admonition icons appear a bit more consistent, by
150 * adding a white background the shadows in the icons look
153 div
.admonitionblock td
.icon
> img
{
154 background-color: white
;
156 filter: brightness
(95%);
159 /* invert the logo */
160 #header > h1
> .image
> img
{
161 filter: invert
(100%) hue-rotate
(180deg) brightness
(90%);
164 /* fixes the black text on unorderd lists */
166 color: var
(--pdt-text
);