my website at https://anirudh.fi
css: improved styling and dark mode (finally!)
+65
-23
+1
-1
config.yaml
+1
-1
config.yaml
+2
-2
pages/_index.md
+2
-2
pages/_index.md
+60
-19
static/style.css
+60
-19
static/style.css
···
7
7
--dark: #444;
8
8
--darker: #222;
9
9
--white: #fff;
10
+
--cyan-trans: rgba(80, 156, 147, 0.3);
11
+
12
+
--font-content: -apple-system, BlinkMacSystemFont, "Inter", "Roboto", "Segoe UI", sans-serif;
13
+
}
14
+
15
+
@media (prefers-color-scheme: dark) {
16
+
:root {
17
+
--light: #222;
18
+
--cyan: #509c93;
19
+
--light-gray: #444;
20
+
--medium-gray: #666;
21
+
--gray: #ccc;
22
+
--dark: #ddd;
23
+
--darker: #fff;
24
+
--white: #000;
25
+
}
26
+
27
+
html {
28
+
background: var(--light);
29
+
color: var(--gray);
30
+
}
31
+
32
+
main a {
33
+
color: var(--gray);
34
+
border-bottom: 1.5px solid var(--medium-gray);
35
+
}
36
+
37
+
a:hover {
38
+
border-bottom: 1.5px solid var(--gray);
39
+
}
40
+
41
+
blockquote p {
42
+
border-left: 1.5px solid var(--gray);
43
+
}
44
+
45
+
pre {
46
+
background-color: var(--dark);
47
+
}
48
+
49
+
.logo, .footimgs {
50
+
filter: invert(1);
51
+
svg {
52
+
fill: var(--gray);
53
+
}
54
+
}
10
55
}
11
56
12
57
html {
···
15
60
}
16
61
17
62
::selection {
18
-
background: var(--medium-gray);
19
-
opacity: 0.3;
63
+
background: var(--cyan-trans);
64
+
color: var(--darker);
20
65
}
21
66
22
67
del {
···
31
76
32
77
main,
33
78
footer {
34
-
font-family:
35
-
"Geist",
36
-
-apple-system,
37
-
BlinkMacSystemFont,
38
-
"Roboto",
39
-
"Segoe UI",
40
-
sans-serif;
79
+
font-family: var(--font-content);
41
80
font-size: 1.05rem;
42
81
padding: 0;
43
82
line-height: 160%;
44
83
font-weight: 400;
45
-
font-feature-settings: "ss03" 1, "ss04" 1, "ss0h" 1, "ss06" 1, "ss07" 1, "ss08" 1, "ss09" 1;
46
-
font-variant-ligatures: discretionary-ligatures
47
-
font-variant-ligatures: common-ligatures;
48
84
}
49
85
50
86
main article,
···
55
91
h1,
56
92
h2,
57
93
h3 {
58
-
font-family: "Instrument Serif", serif;
59
94
font-weight: 400 !important;
60
95
}
61
96
···
65
100
66
101
main h1 {
67
102
font-size: 30px;
68
-
padding: 10px 0 20px 0;
103
+
padding: 40px 0 20px 0;
69
104
}
70
105
71
106
main h2 {
72
-
font-size: 25px;
73
107
color: var(--dark);
74
108
}
75
109
···
81
115
.logo img {
82
116
max-height: 2.5rem;
83
117
max-width: 2.5rem;
84
-
vertical-align: middle;
85
-
transform: translateY(-5%);
118
+
transform: translateY(-10%);
86
119
}
87
120
88
121
.logo {
122
+
flex-grow: 1;
123
+
margin-right: 1rem;
89
124
text-decoration: none;
90
125
border-bottom: unset;
91
126
background: unset !important;
···
123
158
}
124
159
125
160
a:hover {
126
-
border-bottom: 1.5px solid var(--gray);
161
+
border-bottom: 1.5px solid var(--cyan-trans);
127
162
}
128
163
129
164
.footer {
···
180
215
margin-top: 3px !important;
181
216
margin-bottom: 5px;
182
217
color: var(--gray);
183
-
font-style: italic;
218
+
line-height: 1.5;
184
219
}
185
220
186
221
.muted {
···
279
314
border-left: 1.5px solid var(--medium-gray);
280
315
}
281
316
317
+
nav {
318
+
display: flex;
319
+
align-items: center;
320
+
}
321
+
282
322
nav ul {
323
+
flex-shrink: 1;
283
324
padding: 0;
284
325
margin: 0;
285
326
list-style: none;
+1
templates/partials/head.html
+1
templates/partials/head.html
···
11
11
<meta name="HandheldFriendly" content="true" />
12
12
<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png" />
13
13
<meta name="theme-color" content="#ffffff" />
14
+
<meta name="theme-color" content="#222222" media="(prefers-color-scheme: dark)" />
14
15
<link href="https://h.icyphox.sh/u/icy" rel="me" />