my website at https://anirudh.fi
css: switch fonts
+222
-195
+2
pages/_index.md
+2
pages/_index.md
+206
-185
static/style.css
+206
-185
static/style.css
···
1
1
:root {
2
-
--light: #f4f4f4;
3
-
--cyan: #509c93;
4
-
--light-gray: #eee;
5
-
--medium-gray: #ddd;
6
-
--gray: #6a6a6a;
7
-
--dark: #444;
8
-
--darker: #222;
2
+
--light: #f4f4f4;
3
+
--cyan: #509c93;
4
+
--light-gray: #eee;
5
+
--medium-gray: #ddd;
6
+
--gray: #6a6a6a;
7
+
--dark: #444;
8
+
--darker: #222;
9
+
--white: #fff;
9
10
}
10
11
11
12
html {
12
-
background: var(--light);
13
-
-webkit-text-size-adjust: none;
13
+
background: var(--white);
14
+
-webkit-text-size-adjust: none;
14
15
}
15
16
16
17
::selection {
17
-
background: var(--medium-gray);
18
-
opacity: 0.3;
18
+
background: var(--medium-gray);
19
+
opacity: 0.3;
19
20
}
20
21
21
22
del {
22
-
text-decoration: line-through !important;
23
+
text-decoration: line-through !important;
23
24
}
24
25
25
26
* {
26
-
box-sizing: border-box;
27
-
padding: 0;
28
-
margin: 0;
27
+
box-sizing: border-box;
28
+
padding: 0;
29
+
margin: 0;
29
30
}
30
31
31
-
main, footer {
32
-
font-family: "InterVariable", -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif;
33
-
font-size: 1.05rem;
34
-
padding: 0;
35
-
line-height: 160%;
32
+
main,
33
+
footer {
34
+
font-family:
35
+
"Geist",
36
+
-apple-system,
37
+
BlinkMacSystemFont,
38
+
"Roboto",
39
+
"Segoe UI",
40
+
sans-serif;
41
+
font-size: 1.05rem;
42
+
padding: 0;
43
+
line-height: 160%;
44
+
font-weight: 380;
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;
36
48
}
37
49
38
-
main article, table {
39
-
min-width: 0;
50
+
main article,
51
+
table {
52
+
min-width: 0;
40
53
}
41
54
42
-
main h1, h2, h3 {
43
-
font-family: "InterDisplay", -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif;
44
-
font-weight: 500;
55
+
h1,
56
+
h2,
57
+
h3 {
58
+
font-family: "Instrument Serif", serif;
59
+
font-weight: 400 !important;
45
60
}
46
61
47
62
strong {
48
-
font-weight: 500;
63
+
font-weight: 500;
49
64
}
50
65
51
66
main h1 {
52
-
font-size: 20px;
53
-
padding: 10px 0 10px 0;
67
+
font-size: 30px;
68
+
padding: 10px 0 20px 0;
54
69
}
55
70
56
71
main h2 {
57
-
font-size: 18px;
72
+
font-size: 25px;
73
+
color: var(--dark);
58
74
}
59
75
60
-
main h2, h3 {
61
-
padding: 20px 0 5px 0;
76
+
main h2,
77
+
h3 {
78
+
padding: 20px 0 5px 0;
62
79
}
63
80
64
81
.logo img {
65
-
max-height: 2.5rem;
66
-
max-width: 2.5rem;
67
-
vertical-align: middle;
68
-
transform: translateY(-5%);
82
+
max-height: 2.5rem;
83
+
max-width: 2.5rem;
84
+
vertical-align: middle;
85
+
transform: translateY(-5%);
69
86
}
70
87
71
-
.logo {
72
-
text-decoration: none;
73
-
border-bottom: unset;
74
-
background: unset !important;
88
+
.logo {
89
+
text-decoration: none;
90
+
border-bottom: unset;
91
+
background: unset !important;
75
92
}
76
93
77
94
.logo:hover {
78
-
border-bottom: unset;
95
+
border-bottom: unset;
79
96
}
80
97
81
98
.footimgs a {
82
-
all: unset !important;
99
+
all: unset !important;
83
100
}
84
101
85
102
.footimgs img {
86
-
max-height: 2.5rem;
87
-
max-width: 2.5rem;
88
-
display: inline-block;
89
-
vertical-align: middle;
90
-
image-orientation: from-image;
91
-
padding: 0 0 5px 5px;
92
-
cursor: pointer;
103
+
max-height: 2.5rem;
104
+
max-width: 2.5rem;
105
+
display: inline-block;
106
+
vertical-align: middle;
107
+
image-orientation: from-image;
108
+
padding: 0 0 5px 5px;
109
+
cursor: pointer;
93
110
}
94
111
95
112
a {
96
-
margin: 0;
97
-
padding: 0;
98
-
box-sizing: border-box;
99
-
text-decoration: none;
100
-
word-wrap: break-word;
113
+
margin: 0;
114
+
padding: 0;
115
+
box-sizing: border-box;
116
+
text-decoration: none;
117
+
word-wrap: break-word;
101
118
}
102
119
103
120
main a {
104
-
color: var(--darker);
105
-
border-bottom: 1.5px solid var(--medium-gray);
121
+
color: var(--darker);
122
+
border-bottom: 1.5px solid var(--medium-gray);
106
123
}
107
124
108
125
a:hover {
109
-
border-bottom: 1.5px solid var(--gray);
126
+
border-bottom: 1.5px solid var(--gray);
110
127
}
111
128
112
129
.footer {
113
-
column-count: 2;
114
-
column-gap: 12px;
130
+
column-count: 2;
131
+
column-gap: 12px;
115
132
}
116
133
117
134
body {
118
-
max-width: 655px;
119
-
padding: 0 13px;
120
-
margin: 40px auto;
135
+
max-width: 655px;
136
+
padding: 0 13px;
137
+
margin: 40px auto;
121
138
}
122
139
123
140
main article img {
124
-
max-width: 100%;
125
-
width: 100%;
126
-
display: block;
127
-
margin: 10px auto 4px auto;
141
+
max-width: 100%;
142
+
width: 100%;
143
+
display: block;
144
+
margin: 10px auto 4px auto;
128
145
}
129
146
130
-
main ul, main ol {
131
-
margin: 0 30px 7px 30px;
147
+
main ul,
148
+
main ol {
149
+
margin: 0 30px 7px 30px;
132
150
}
133
151
134
152
main ul ul {
135
-
margin-bottom: 0
153
+
margin-bottom: 0;
136
154
}
137
155
138
156
.row {
139
-
display: flex;
140
-
flex-wrap: wrap;
141
-
padding: 0 0.5rem 0.5rem 0;
157
+
display: flex;
158
+
flex-wrap: wrap;
159
+
padding: 0 0.5rem 0.5rem 0;
142
160
}
143
161
144
162
.image-grid {
145
-
column-count: 2;
163
+
column-count: 2;
146
164
}
147
165
148
166
.image-grid img {
149
-
all: unset;
150
-
object-fit: cover;
151
-
position: relative;
152
-
width: 100%;
153
-
margin-bottom: 12px;
167
+
all: unset;
168
+
object-fit: cover;
169
+
position: relative;
170
+
width: 100%;
171
+
margin-bottom: 12px;
154
172
}
155
173
156
174
.image-grid a {
157
-
border-bottom: unset;
175
+
border-bottom: unset;
158
176
}
159
177
160
178
.subtitle {
161
-
padding: 2px 0 20px 0;
162
-
margin-top: 3px !important;
163
-
margin-bottom: 5px;
164
-
color: var(--gray);
179
+
padding: 2px 0 20px 0;
180
+
margin-top: 3px !important;
181
+
margin-bottom: 5px;
182
+
color: var(--gray);
165
183
}
166
184
167
185
.muted {
168
-
color: var(--gray);
186
+
color: var(--gray);
169
187
}
170
188
.muted a {
171
-
color: var(--cyan);
172
-
border-bottom: 1.5px solid var(--cyan);
189
+
color: var(--cyan);
190
+
border-bottom: 1.5px solid var(--cyan);
173
191
}
174
192
175
193
article p {
176
-
padding: 7px 0 7px 0;
194
+
padding: 7px 0 7px 0;
177
195
}
178
196
179
197
article a {
180
-
color: var(--dark);
198
+
color: var(--dark);
181
199
}
182
200
183
201
.tagline {
184
-
padding: 50px 0 50px 0;
202
+
padding: 50px 0 50px 0;
185
203
}
186
204
187
205
pre {
188
-
overflow-x: auto;
189
-
overflow-y: hidden;
190
-
padding: 10px;
191
-
min-width: 0;
192
-
background-color: var(--light-gray) !important;
193
-
margin-bottom: 10px;
206
+
overflow-x: auto;
207
+
overflow-y: hidden;
208
+
padding: 10px;
209
+
min-width: 0;
210
+
background-color: var(--light-gray) !important;
211
+
margin-bottom: 10px;
194
212
}
195
213
196
214
code {
197
-
font-size: 0.9rem;
198
-
background-color: var(--light-gray);
215
+
font-size: 0.9rem;
216
+
background-color: var(--light-gray);
199
217
}
200
218
201
219
.post-date {
202
-
color: var(--gray);
203
-
text-transform: lowercase;
220
+
color: var(--gray);
221
+
text-transform: lowercase;
204
222
}
205
223
206
224
table {
207
-
table-layout: fixed;
208
-
width: 100%;
225
+
table-layout: fixed;
226
+
width: 100%;
209
227
}
210
228
211
229
table a {
212
-
text-decoration: none;
230
+
text-decoration: none;
213
231
}
214
232
215
233
td {
216
-
padding: 7px 11px 7px 11px;
234
+
padding: 7px 11px 7px 11px;
217
235
}
218
236
219
237
td p#subtitle {
220
-
color: var(--gray);
238
+
color: var(--gray);
221
239
}
222
240
223
241
td:first-child {
224
-
padding-left: 0;
242
+
padding-left: 0;
225
243
}
226
244
227
245
td:last-child {
228
-
padding-right: 0;
246
+
padding-right: 0;
229
247
}
230
248
231
249
.index-date {
232
-
white-space: nowrap;
233
-
vertical-align: baseline;
234
-
color: var(--gray);
235
-
text-transform: lowercase;
250
+
white-space: nowrap;
251
+
vertical-align: baseline;
252
+
color: var(--gray);
253
+
text-transform: lowercase;
236
254
}
237
255
238
256
header {
239
-
padding-bottom: 20px;
257
+
padding-bottom: 20px;
240
258
}
241
259
242
260
hr {
243
-
max-width: 100%;
244
-
text-align: left;
245
-
margin: 20px 0 20px 0;
261
+
max-width: 100%;
262
+
text-align: left;
263
+
margin: 20px 0 20px 0;
246
264
}
247
265
248
266
footer {
249
-
padding-top: 30px;
267
+
padding-top: 30px;
250
268
}
251
-
252
269
253
270
blockquote {
254
-
margin: 7px 0 7px 0;
271
+
margin: 7px 0 7px 0;
255
272
}
256
273
257
274
blockquote p {
258
-
font-style: italic;
259
-
color: var(--darker);
260
-
padding-left: 20px;
261
-
border-left: 1.5px solid var(--medium-gray);
275
+
font-style: italic;
276
+
color: var(--darker);
277
+
padding-left: 20px;
278
+
border-left: 1.5px solid var(--medium-gray);
262
279
}
263
280
264
281
nav ul {
265
-
padding: 0;
266
-
margin: 0;
267
-
list-style: none;
268
-
padding-bottom: 20px;
282
+
padding: 0;
283
+
margin: 0;
284
+
list-style: none;
285
+
padding-bottom: 20px;
269
286
}
270
287
271
288
nav ul li {
272
-
padding-right: 10px;
273
-
display: inline-block;
289
+
padding-right: 10px;
290
+
display: inline-block;
274
291
}
275
-
276
292
277
293
ol {
278
-
list-style: none;
279
-
counter-reset: counter;
294
+
list-style: none;
295
+
counter-reset: counter;
280
296
}
281
297
ol li {
282
-
counter-increment: counter;
298
+
counter-increment: counter;
283
299
}
284
300
ol li:not(.footnotes)::before {
285
-
content: counter(counter);
286
-
border-radius: 50%;
287
-
text-align: center;
288
-
line-height: 1.2rem;
289
-
color: var(--darker);
290
-
background: var(--medium-gray);
291
-
width: 18px;
292
-
height: 18px;
293
-
font-size: 11px;
294
-
margin-right: .5rem;
295
-
box-sizing: content-box;
296
-
display: inline-block;
297
-
transform: translate(-1.9rem, 0.7rem);
298
-
position: absolute;
301
+
content: counter(counter);
302
+
border-radius: 50%;
303
+
text-align: center;
304
+
line-height: 1.2rem;
305
+
color: var(--darker);
306
+
background: var(--medium-gray);
307
+
width: 18px;
308
+
height: 18px;
309
+
font-size: 11px;
310
+
margin-right: 0.5rem;
311
+
box-sizing: content-box;
312
+
display: inline-block;
313
+
transform: translate(-1.9rem, 0.7rem);
314
+
position: absolute;
299
315
}
300
316
301
317
.footnote-ref a {
302
-
text-decoration: none;
303
-
color: var(--light);
304
-
border-radius: 50%;
305
-
text-align: center;
306
-
line-height: 0.8rem;
307
-
background: var(--cyan);
308
-
width: 0.8rem;
309
-
height: 0.8rem;
310
-
font-size: 0.6rem;
311
-
display: inline-block;
318
+
text-decoration: none;
319
+
color: var(--light);
320
+
border-radius: 50%;
321
+
text-align: center;
322
+
line-height: 0.8rem;
323
+
background: var(--cyan);
324
+
width: 0.8rem;
325
+
height: 0.8rem;
326
+
font-size: 0.6rem;
327
+
display: inline-block;
312
328
}
313
329
314
330
.footnotes > ol li::before {
315
-
content: counter(counter);
316
-
border-radius: 50%;
317
-
text-align: center;
318
-
line-height: 1.2rem;
319
-
color: var(--light);
320
-
background: var(--cyan);
321
-
width: 18px;
322
-
height: 18px;
323
-
font-size: 11px;
324
-
margin-right: .5rem;
325
-
box-sizing: content-box;
326
-
display: inline-block;
327
-
position: relative;
328
-
transform: unset;
331
+
content: counter(counter);
332
+
border-radius: 50%;
333
+
text-align: center;
334
+
line-height: 1.2rem;
335
+
color: var(--light);
336
+
background: var(--cyan);
337
+
width: 18px;
338
+
height: 18px;
339
+
font-size: 11px;
340
+
margin-right: 0.5rem;
341
+
box-sizing: content-box;
342
+
display: inline-block;
343
+
position: relative;
344
+
transform: unset;
329
345
}
330
346
331
347
.footnotes ol li:not(:last-child) {
332
-
padding-bottom: 2rem;
348
+
padding-bottom: 2rem;
333
349
}
334
350
335
351
@media (max-width: 400px) {
336
-
.footer {
337
-
column-count: 1;
338
-
}
352
+
.footer {
353
+
column-count: 1;
354
+
}
339
355
340
-
.image-grid {
341
-
column-count: 1;
342
-
}
356
+
.image-grid {
357
+
column-count: 1;
358
+
}
343
359
344
-
table, thead, tbody, th, td, tr {
345
-
display: block;
346
-
}
347
-
td {
348
-
padding: 0;
349
-
text-align: left;
350
-
}
351
-
tr {
352
-
padding: 10px 0 10px 0;
353
-
}
360
+
table,
361
+
thead,
362
+
tbody,
363
+
th,
364
+
td,
365
+
tr {
366
+
display: block;
367
+
}
368
+
td {
369
+
padding: 0;
370
+
text-align: left;
371
+
}
372
+
tr {
373
+
padding: 10px 0 10px 0;
374
+
}
354
375
}
+14
-10
templates/partials/head.html
+14
-10
templates/partials/head.html
···
1
-
<link rel="stylesheet" href="/static/style.css" type="text/css">
2
-
<link rel="stylesheet" href="/static/syntax.css" type="text/css">
3
-
<link rel="stylesheet" href="https://cdn.icyphox.sh/fonts/inter.css" type="text/css">
4
-
<meta name="viewport" content="initial-scale=1,width">
5
-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6
-
<meta charset="UTF-8">
7
-
<meta name="HandheldFriendly" content="true">
8
-
<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png">
9
-
<meta name="theme-color" content="#f4f4f4">
10
-
<link href="https://h.icyphox.sh/u/icy" rel="me">
1
+
<link rel="stylesheet" href="/static/style.css" type="text/css" />
2
+
<link rel="stylesheet" href="/static/syntax.css" type="text/css" />
3
+
<link
4
+
rel="stylesheet"
5
+
href="https://cdn.icyphox.sh/fonts/fonts.css"
6
+
type="text/css"
7
+
/>
8
+
<meta name="viewport" content="initial-scale=1,width" />
9
+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
10
+
<meta charset="UTF-8" />
11
+
<meta name="HandheldFriendly" content="true" />
12
+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png" />
13
+
<meta name="theme-color" content="#f4f4f4" />
14
+
<link href="https://h.icyphox.sh/u/icy" rel="me" />