blob: d059bb575be71e53114888a6299daba95688c332 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
:root {
/* Colors */
--fg: var(--gray-12); /* Text. */
--muted-fg: var(--gray-10); /* Secondary text color. Will be
used with a background of --c-bg and --c-bg-2 -- check contrast! */
--faded-fg: var(--gray-6); /* Disabled text color. */
--graphical-fg: var(--plain-graphical-fg); /* Graphical elements. Will not
be used as a text color. */
--plain-fg: var(--blue-10);
--info-fg: var(--blue-11);
--ok-fg: var(--green-11);
--bad-fg: var(--red-11);
--warn-fg: var(--yellow-11);
--plain-graphical-fg: var(--gray-6);
--info-graphical-fg: var(--blue-6);
--ok-graphical-fg: var(--green-6);
--bad-graphical-fg: var(--red-6);
--warn-graphical-fg: var(--yellow-6);
--bg: var(--gray-0); /* Page background. */
--box-bg: var(--plain-bg); /* Background for blocks: cards, admonitions etc. */
--interactive-bg: var(--gray-4); /* Background for interactive elements */
--plain-bg: var(--gray-1);
--info-bg: var(--blue-1);
--ok-bg: var(--green-1);
--bad-bg: var(--red-1);
--warn-bg: var(--yellow-1);
--accent: var(--blue-10); /* Accent color. Will be used *as a text color* with a
background of --c-bg and --c-bg-2 -- check contrast! */
--muted-accent: var(--blue-7); /* Muted accent color. Will not be used for text. */
/* Lengths */
--rhythm: 1.4rem; /* Vertical rhythm, line height. */
--line-length: 40rem; /* Maximum line length for prose. */
--border-radius: .2rem;
/* Fonts */
--main-font: 'Source Sans 3', 'Source Sans Pro', -apple-system, system-ui, sans-serif;
--secondary-font: var(--main-font); /* Headings etc. */
--mono-font: 'M Plus Code Latin', monospace, monospace; /* monospace twice stops browsers from
shrinking this */
/* Density */
--density: 1;
/* Width */
--full-width: 100vw;
/* Do not set these. */
--eff-line-length: /* Effective line length for prose. */
min(
calc( var(--full-width) - (2 * var(--rhythm)) ),
var(--line-length)
);
--gutter-width: /* Width of spaces at each side of page content. */
calc(
(
var(--full-width) /* Viewport width */
- var(--eff-line-length) /* minus line width */
) / 2); /* Divide by 2: there are two page margins */
}
/* Enable dark theme independently of os preferences*/
:root.-dark-theme {
--fg: var(--gray-0);
--muted-fg: var(--gray-2);
--faded-fg: var(--gray-7);
--plain-bg: var(--gray-11);
--info-bg: var(--blue-12);
--ok-bg: var(--green-12);
--bad-bg: var(--red-12);
--warn-bg: var(--yellow-12);
--plain-faded-fg: var(--blue-6);
--info-faded-fg: var(--blue-6);
--ok-faded-fg: var(--green-6);
--bad-faded-fg: var(--red-6);
--warn-faded-fg: var(--yellow-6);
--bg: var(--gray-12);
--box-bg: var(--gray-10);
--interactive-bg: var(--gray-8);
--plain-fg: (--blue-2);
--info-fg: var(--blue-2);
--ok-fg: var(--green-2);
--bad-fg: var(--red-2);
--warn-fg: var(--yellow-2);
--accent: var(--blue-2);
--muted-accent: var(--blue-5)
}
@media (prefers-color-scheme: dark) {
:root:not(.-no-dark-theme) {
--fg: var(--gray-0);
--muted-fg: var(--gray-2);
--faded-fg: var(--gray-7);
--plain-bg: var(--gray-11);
--info-bg: var(--blue-12);
--ok-bg: var(--green-12);
--bad-bg: var(--red-12);
--warn-bg: var(--yellow-12);
--plain-faded-fg: var(--blue-6);
--info-faded-fg: var(--blue-6);
--ok-faded-fg: var(--green-6);
--bad-faded-fg: var(--red-6);
--warn-faded-fg: var(--yellow-6);
--bg: var(--gray-12);
--box-bg: var(--gray-10);
--interactive-bg: var(--gray-8);
--plain-fg: (--blue-2);
--info-fg: var(--blue-2);
--ok-fg: var(--green-2);
--bad-fg: var(--red-2);
--warn-fg: var(--yellow-2);
--accent: var(--blue-2);
--muted-accent: var(--blue-5);
}
}
* {
--gap: calc(var(--rhythm) * var(--density));
}
* {
accent-color: var(--accent);
}
|
