blob: 3fd66f0e62f5450e4fa248b0a87ce0eed4a908a9 (
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
|
: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 */
}
@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-3);
--info-fg: var(--blue-3);
--ok-fg: var(--green-3);
--bad-fg: var(--red-3);
--warn-fg: var(--yellow-3);
--accent: var(--blue-3);
--muted-accent: var(--blue-5);
}
}
* {
--gap: calc(var(--rhythm) * var(--density));
}
* {
accent-color: var(--accent);
}
|
