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
|
:root {
/* Colors */
--base-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! */
--accent: var(--base-accent);
&,* {
--fg: lch(from var(--accent) 2% calc(.1*C) H); /* Text. */
--bg: lch(from var(--accent) 98% calc(.02*C) H);
--muted-fg: lch(from var(--accent) 7% calc(.15*C) H); /* Secondary text color. Will be
used with a background of --c-bg and --c-bg-2 -- check contrast! */
--faded-fg: lch(from var(--accent) 15% calc(.05*C) H); /* Disabled text color. */
--graphical-fg: lch(from var(--accent) calc(.9*L) calc(.9*C) H); /* Graphical elements. Will not
be used as a text color. */
--muted-accent: lch(from var(--accent) calc(2*L) calc(.8*C) H);
--info-accent: lch(from var(--base-accent) L calc(.8*C) 270deg);
--ok-accent: lch(from var(--base-accent) L calc(.8*C) 120deg);
--bad-accent: lch(from var(--base-accent) L calc(.8*C) 20deg);
--warn-accent: lch(from var(--base-accent) L calc(.8*C) 80deg);
--box-bg: lch(from var(--accent) 94% 8% H); /* Background for blocks: cards, admonitions etc. */
--interactive-bg: lch(from var(--accent) 90% 3% H); /* Background for interactive elements */
}
/* 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); /* UI elements and captions */
--display-font: var(--secondary-font); /* Headings */
--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: lch(from var(--accent) 96% calc(.1*C) H);
--bg: lch(from var(--accent) 1% calc(.02*C) H);
--muted-fg: lch(from var(--accent) 93% calc(.15*C) H);
--faded-fg: lch(from var(--accent) 90% calc(.05*C) H);
--graphical-fg: lch(from var(--accent) calc(.9*L) calc(.9*C) H);
--base-accent: var(--blue-2);
--muted-accent: lch(from var(--accent) calc(.7*L) calc(.8*C) H);
--box-bg: lch(from var(--accent) 12% 5% H); /* Background for blocks: cards, admonitions etc. */
--interactive-bg: lch(from var(--accent) 20% 10% H); /* Background for interactive elements */
}
}
@media (prefers-color-scheme: dark) {
:root:not(.-no-dark-theme) {
&,* {
--fg: lch(from var(--accent) 96% calc(.1*C) H);
--bg: lch(from var(--accent) 1% calc(.02*C) H);
--muted-fg: lch(from var(--accent) 93% calc(.15*C) H);
--faded-fg: lch(from var(--accent) 90% calc(.05*C) H);
--graphical-fg: lch(from var(--accent) calc(.9*L) calc(.9*C) H);
--base-accent: var(--blue-2);
--muted-accent: lch(from var(--accent) calc(.7*L) calc(.8*C) H);
--box-bg: lch(from var(--accent) 12% 5% H); /* Background for blocks: cards, admonitions etc. */
--interactive-bg: lch(from var(--accent) 20% 10% H); /* Background for interactive elements */
}
}
}
* {
--gap: calc(var(--rhythm) * var(--density));
}
* {
accent-color: var(--accent);
}
|
