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
|
| html
| --color-mode: "light"
| --light: #fff
| --dark: rgb(28,28,30)
| --haze: #f2f5f7
| --bubble: rgb(36,36,38)
| --accent: var(--haze)
| --bg: var(--light)
| --code-bg: var(--accent)
| --overlay: var(--light)
| //--text: #111
| --text: #141010
| --font: 'Metropolis', sans-serif
| --border-color: #eee
| --inline-color: darkgoldenrod
| --theme: rgb(52,199,89)
| --ease: ease
| --scroll-thumb: rgba(0,0,0,.06)
| --search-border-color: transparent
| --next-icon-path: url(../images/icons/double-arrow.svg)
| --never-icon-path: url(../images/sitting.svg)
|
| @mixin darkmode
| --color-mode: "dark"
| --theme: rgb(48,209,88)
| --bg: var(--dark)
| --text: #eee
| --text-light: #fff
| --accent: var(--bubble)
| --overlay: var(--bubble)
| --border-color: transparent
| --scroll-thumb: rgba(255,255,255,.06)
| --search-bg: var(--accent)
| --search-border-color: var(--accent)
| *
| box-shadow: none !important
|
| &[data-mode="dark"]
| @include darkmode
| .color
| &_choice
| &::after
| background-image: var(--moon-icon)
|
| &[data-mode="auto"]
| @media (prefers-color-scheme: dark)
| @include darkmode
|
| %narrow
| max-width: 750px
| margin: 0 auto
|
| blockquote
| + .highlight_wrap
| margin-top: 2.25rem
|
|
