styles/theme.css


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

:root {
	--almond: #F4DEC9;
	--heliotrope-gray: #A69CAC;
	--purple-navy: #474973;
	--oxford-blue: #161B33;
	--xiketic: #0D0C1A;
	--magnolia: #EFE9F4;

	--fire-opal: #EE6352;
	--cyan-process: #08B2E3;
	--forest-green-crayola: #57A773;

	--bg: var(--xiketic);
	--fg: var(--almond);

	--bg-alt: var(--oxford-blue);
	--fg-alt: var(--heliotrope-gray);
	--links: var(--fire-opal);
}

html,
.searchBar .input {
	font-family: "Inter", sans-serif;
	font-size: 16px;
}

code, pre {
	font-family: "JetBrainsMono", monospace;
	font-size: 12px;
}

.subtile {
	font-style: italic;
	opacity: .75;
	color: var(--heliotrope-gray);
}

h1, h2, h3 {
	font-weight: 700;
	margin: 0;
}

h1 { font-size: 64px; }
h2 { font-size: 48px; }
h3 { font-size: 32px; }

::-webkit-scrollbar-track { background-color: var(--bg); }
::-webkit-scrollbar-thumb { background-color: var(--purple-navy); }
::-webkit-scrollbar-thumb:hover { background-color: var(--fg); }

.button {
	background-color: var(--fire-opal);
	color: var(--fg) !important;
}

::selection {
	background-color: var(--fire-opal);
}

blockquote {
	position: relative;
	padding-left: 12px;
	font-style: italic;
	color: var(--fg-alt);
}

blockquote:before {
	position: absolute;
	content: '';
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	background-color: var(--cyan-process);
}

.mobileNav .button {
	background-color: var(--fire-opal);
	color: var(--fg);
}

.mobileNav .button.small {
	background-color: var(--fg-alt);
	color: var(--bg) !important;
}

@media (prefers-color-scheme: light) {
	:root {
		--heliotrope-gray: #dbdbe6;
		--purple-navy: #989abb;

		--fire-opal: #ba3321;
		--cyan-process: #397889;
		--forest-green-crayola: #376848;

		--bg: var(--magnolia);
		--fg: var(--xiketic);
		--bg-alt: var(--heliotrope-gray);
		--fg-alt: var(--oxford-blue);
	}

	.subtile {
		opacity: .6;
		color: var(--fg);
	}

	blockquote { opacity: .8; }
	.button { color: var(--bg) !important; }
}