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
|
:root {
/* colors */
--background-color: #f5f5f7;
--block-background-color: rgb(var(--block-background-color-rgb));
--block-background-color-rgb: 233, 232, 237;
--border-color: #d0d7de;
--text-color: #1d1d1f;
--secondary-text-color: #6e6e73;
--link-color: #313135;
--bright-background-color: #fafafa;
/* fonts */
--serif-font-family:
"Noto Serif",
"Noto Serif SC",
"Noto Serif TC",
"Noto Serif CJK SC",
"Noto Serif CJK TC",
"Source Han Serif SC",
"Source Han Serif TC",
"Songti SC",
"Times New Roman",
Times,
serif;
--page-width: 650px;
--page-margin-y: 5rem;
/* pagefind custom css */
--pagefind-ui-primary: var(--text-color);
--pagefind-ui-text: var(--text-color);
--pagefind-ui-background: var(--background-color);
--pagefind-ui-border: var(--border-color);
--pagefind-ui-tag: var(--border-color);
}
@mixin variablesInDarkMode {
--background-color: #1d2021;
--block-background-color: rgb(var(--block-background-color-rgb));
--block-background-color-rgb: 24, 26, 27;
--border-color: rgba(255, 255, 255, 0.2);
--text-color: #d2cec9;
--secondary-text-color: #a1998d;
--link-color: #e3dfda;
--bright-background-color: #666;
}
.dark {
@include variablesInDarkMode;
}
@media (prefers-color-scheme: dark) {
:root {
@include variablesInDarkMode;
}
}
|
