my website at https://anirudh.fi
all: big redesign
+279
-187
+6
-6
flake.lock
+6
-6
flake.lock
···
2
2
"nodes": {
3
3
"nixpkgs": {
4
4
"locked": {
5
-
"lastModified": 1731852624,
6
-
"narHash": "sha256-hfR6InYghPqZo5Lvojj6LqpJumh7G62oD0RN8VfBnkU=",
5
+
"lastModified": 1734875733,
6
+
"narHash": "sha256-DbgZN1Oz9CqhDZkZ2EC0RmFutIvGqICGyuYvxyLZvok=",
7
7
"owner": "nixos",
8
8
"repo": "nixpkgs",
9
-
"rev": "8447f0f3e60462c5889a709af429b12b47c29ac5",
9
+
"rev": "4f334ebd098a48c6e07c449f5e5321d4abe7a0df",
10
10
"type": "github"
11
11
},
12
12
"original": {
···
41
41
"nixpkgs": "nixpkgs_2"
42
42
},
43
43
"locked": {
44
-
"lastModified": 1731853533,
45
-
"narHash": "sha256-0KTyWOBy6Eub2hT3EN2Qri6l09vlxeg69XZlexwzl2s=",
44
+
"lastModified": 1734875705,
45
+
"narHash": "sha256-VV65oVrxxgFIbAbu7Ox9FqftLuOubbv+NK1Xvs/JqsY=",
46
46
"owner": "icyphox",
47
47
"repo": "go-vite",
48
-
"rev": "81b8a3faf63f5b53e9d6e95aa09149941c4a2f11",
48
+
"rev": "f18dcbc513dfef8f521ecf3c4bd7ea02ee124aa1",
49
49
"type": "github"
50
50
},
51
51
"original": {
+18
-17
pages/about.md
+18
-17
pages/about.md
···
27
27
- 35mm film photography.
28
28
- Veganism, ethics and plant-based nutrition.
29
29
30
-
Some of my links:
31
-
- Bluesky [@icyphox.sh](https://bsky.app/profile/icyphox.sh)
32
-
- Lobsters [@icy](https://lobste.rs/u/icy)
33
-
- Hacker News [@icy](https://news.ycombinator.com/user?id=icy)
34
-
- Steam [@icyphox](https://steamcommunity.com/id/icyphox)
35
-
- GitHub [@icyphox](https://github.com/icyphox)
36
-
- Fediverse [@icy@icyphox.sh](https://h.icyphox.sh/@icy)
37
-
38
-
If you're interested in **hiring me** -- here's my
39
-
[résumé](https://cdn.icyphox.sh/resume.pdf).
40
-
41
30
## contact
42
31
43
32
Send mail to [anirudh@oppiliappan.com](mailto:anirudh@oppiliappan.com).
···
50
39
[rizon.net](https://rizon.net) but I'm likely to miss messages as I
51
40
don't get notified. Use the above methods instead.
52
41
42
+
Some other ways to find me:
43
+
- Bluesky [@icyphox.sh](https://bsky.app/profile/icyphox.sh)
44
+
- Lobsters [@icy](https://lobste.rs/u/icy)
45
+
- Hacker News [@icy](https://news.ycombinator.com/user?id=icy)
46
+
- Steam [@icyphox](https://steamcommunity.com/id/icyphox)
47
+
- GitHub [@icyphox](https://github.com/icyphox)
48
+
- Fediverse [@icy@icyphox.sh](https://h.icyphox.sh/@icy)
49
+
50
+
If you're interested in **hiring me** -- here's my
51
+
[résumé](https://cdn.icyphox.sh/resume.pdf).
52
+
53
53
## colophon
54
54
55
-
This site is built using [vite](https://git.icyphox.sh/vite) -- a static
56
-
site generator written in Go. The source for this site is
57
-
[here](https://git.icyphox.sh/site), licensed under MIT. All content on
58
-
this site is available under the Creative Commons BY-NC-SA license.
55
+
The website is built using [vite](https://git.icyphox.sh/vite) -- a
56
+
static site generator written in Go and [hosted at
57
+
home](/uses#homelab-k3s-cluster) on
58
+
[Garage](https://garagehq.deuxfleurs.fr/).
59
59
60
-
This site is [hosted at home](/uses#homelab-k3s-cluster) on
61
-
[Garage](https://garagehq.deuxfleurs.fr/).
60
+
The source code is available [here](https://git.icyphox.sh/site),
61
+
licensed under MIT. All content is published under the [Creative Commons
62
+
BY-NC-SA](https://creativecommons.org/licenses/by-nc-sa/4.0/) license.
+1
-1
pages/blog/_index.md
+1
-1
pages/blog/_index.md
+123
-98
static/style.css
+123
-98
static/style.css
···
1
1
:root {
2
-
--light: #f4f4f4;
3
2
--cyan: #509c93;
4
-
--light-gray: #eee;
5
-
--medium-gray: #ddd;
6
-
--gray: #6a6a6a;
7
-
--dark: #444;
8
-
--darker: #222;
9
-
--white: #fff;
10
-
--cyan-trans: rgba(80, 156, 147, 0.3);
3
+
--light: #fff9eb;
4
+
--light-gray: #fceccc;
5
+
--medium-gray: #e6dcd1;
6
+
--mediumer-gray: #d8cbbe;
7
+
--gray: #776e63;
8
+
--dark: #4a443d;
9
+
--darker: #2a261f;
10
+
--bg: #fffdf5;
11
+
--fg: #100f0f;
12
+
--selection: rgba(143, 105, 213, 0.2);
11
13
12
-
--font-content: -apple-system, BlinkMacSystemFont, "Inter", "Roboto", "Segoe UI", sans-serif;
14
+
--font-content: -apple-system, BlinkMacSystemFont, "Inter", "Roboto",
15
+
"Segoe UI", sans-serif;
13
16
}
14
17
15
18
@media (prefers-color-scheme: dark) {
16
19
:root {
17
-
--light: #222;
18
20
--cyan: #509c93;
19
-
--light-gray: #444;
20
-
--medium-gray: #666;
21
-
--gray: #ccc;
22
-
--dark: #ddd;
23
-
--darker: #fff;
24
-
--white: #000;
21
+
--light: #2a261f;
22
+
--light-gray: #4a443d;
23
+
--medium-gray: #6b635a;
24
+
--gray: #d3cec1;
25
+
--fg: #fff6e3;
26
+
--dark: #e6dcd1;
27
+
--darker: #fff9eb;
28
+
--bg: #100f0f;
29
+
--selection: rgba(80, 156, 147, 0.2);
25
30
}
26
31
27
32
html {
28
-
background: var(--light);
29
-
color: var(--gray);
33
+
background: var(--bg);
34
+
color: var(--fg);
30
35
}
31
36
32
37
main a {
···
34
39
border-bottom: 1.5px solid var(--medium-gray);
35
40
}
36
41
37
-
blockquote p {
38
-
border-left: 1.5px solid var(--gray);
39
-
}
40
-
41
-
pre {
42
-
background-color: var(--dark);
42
+
hr {
43
+
background: var(--light);
43
44
}
44
45
45
-
.logo, .footimgs {
46
-
filter: invert(1);
47
-
svg {
48
-
fill: var(--gray);
49
-
}
46
+
blockquote p {
47
+
border-left: 1.5px solid var(--gray);
50
48
}
51
49
}
52
50
53
51
html {
54
-
background: var(--white);
52
+
background: var(--bg);
53
+
color: var(--fg);
55
54
-webkit-text-size-adjust: none;
56
55
}
57
56
58
57
::selection {
59
-
background: var(--cyan-trans);
58
+
background: var(--selection);
60
59
color: var(--darker);
61
60
}
62
61
···
96
95
97
96
main h1 {
98
97
font-size: 30px;
99
-
padding: 20px 0 20px 0;
98
+
padding: 30px 0 30px 0;
100
99
}
101
100
102
101
main h2 {
···
108
107
margin: 40px 0 20px 0;
109
108
}
110
109
111
-
.logo img {
110
+
.logo svg {
112
111
max-height: 2.5rem;
113
112
max-width: 2.5rem;
114
113
transform: translateY(-10%);
114
+
fill: var(--fg);
115
115
}
116
116
117
117
.logo {
···
154
154
}
155
155
156
156
a:hover {
157
-
border-bottom: unset;
158
-
border-bottom: 1.5px solid var(--dark);
159
-
}
160
-
161
-
.footer {
162
-
column-count: 2;
163
-
column-gap: 12px;
157
+
border-bottom: 1.5px solid var(--gray);
164
158
}
165
159
166
160
body {
167
161
max-width: 655px;
168
-
padding: 0 13px;
169
-
margin: 40px auto;
162
+
padding: 2rem 1rem 20rem;
163
+
margin: 1rem auto;
170
164
}
171
165
172
166
main article img {
···
235
229
padding: 50px 0 50px 0;
236
230
}
237
231
232
+
.book-posts {
233
+
padding-top: 2rem;
234
+
a {
235
+
text-decoration: none;
236
+
}
237
+
ul {
238
+
list-style-type: none;
239
+
padding: 0;
240
+
margin: 0;
241
+
}
242
+
ul > li {
243
+
display: flex;
244
+
align-items: baseline;
245
+
}
246
+
li > .post {
247
+
flex-grow: 1;
248
+
}
249
+
250
+
.author {
251
+
flex-shrink: 1;
252
+
white-space: nowrap;
253
+
vertical-align: baseline;
254
+
color: var(--gray);
255
+
}
256
+
257
+
.status {
258
+
flex-shrink: 1;
259
+
white-space: nowrap;
260
+
vertical-align: baseline;
261
+
}
262
+
}
263
+
264
+
.posts {
265
+
padding-top: 2rem;
266
+
h2 {
267
+
margin: 0rem 0 2rem 0;
268
+
}
269
+
270
+
ul {
271
+
list-style-type: none;
272
+
padding: 0;
273
+
margin: 0;
274
+
}
275
+
ul > li {
276
+
display: flex;
277
+
align-items: baseline;
278
+
}
279
+
li > .post {
280
+
flex-grow: 1;
281
+
}
282
+
283
+
li > .index-date {
284
+
flex-shrink: 1;
285
+
white-space: nowrap;
286
+
vertical-align: baseline;
287
+
color: var(--gray);
288
+
text-transform: lowercase;
289
+
float: right;
290
+
}
291
+
}
292
+
238
293
pre {
239
294
overflow-x: auto;
240
295
overflow-y: hidden;
241
296
padding: 10px;
242
297
min-width: 0;
243
-
background-color: var(--light-gray) !important;
298
+
background-color: var(--light) !important;
244
299
margin-bottom: 10px;
245
300
}
246
301
247
302
code {
248
303
font-size: 0.9rem;
249
-
background-color: var(--light-gray);
304
+
background-color: var(--light);
250
305
}
251
306
252
307
.post-date {
···
255
310
text-transform: lowercase;
256
311
}
257
312
313
+
.header {
314
+
padding-bottom: 20px;
315
+
}
316
+
258
317
table {
259
318
table-layout: fixed;
260
319
width: 100%;
···
264
323
text-decoration: none;
265
324
}
266
325
267
-
td {
268
-
padding: 7px 11px 7px 11px;
269
-
}
270
-
271
-
td p#subtitle {
272
-
color: var(--gray);
273
-
}
274
-
275
-
td:first-child {
276
-
padding-left: 0;
277
-
}
278
-
279
-
td:last-child {
280
-
padding-right: 0;
281
-
}
282
-
283
-
.index-date {
284
-
white-space: nowrap;
285
-
vertical-align: baseline;
286
-
color: var(--gray);
287
-
text-transform: lowercase;
288
-
}
289
-
290
-
header {
291
-
padding-bottom: 20px;
292
-
}
293
-
294
326
hr {
295
327
max-width: 100%;
296
-
text-align: left;
297
-
margin: 20px 0 20px 0;
328
+
border: 0;
329
+
height: 1px;
330
+
margin: 1.5rem 0;
331
+
background: var(--light-gray);
298
332
}
299
333
300
334
footer {
···
312
346
border-left: 1.5px solid var(--medium-gray);
313
347
}
314
348
349
+
ul li::marker {
350
+
color: var(--mediumer-gray);
351
+
}
352
+
315
353
nav {
316
-
display: flex;
317
-
align-items: center;
354
+
display: flex;
355
+
align-items: center;
318
356
}
319
357
320
358
nav ul {
···
331
369
}
332
370
333
371
ol {
334
-
list-style: none;
335
372
counter-reset: counter;
336
373
}
337
374
ol li {
338
375
counter-increment: counter;
339
376
}
340
-
ol li:not(.footnotes)::before {
341
-
content: counter(counter);
342
-
border-radius: 50%;
343
-
text-align: center;
344
-
line-height: 1.2rem;
345
-
color: var(--darker);
346
-
background: var(--medium-gray);
347
-
width: 18px;
348
-
height: 18px;
349
-
font-size: 11px;
350
-
margin-right: 0.5rem;
351
-
box-sizing: content-box;
352
-
display: inline-block;
353
-
transform: translate(-1.9rem, 0.7rem);
354
-
position: absolute;
377
+
378
+
ol li:not(.footnotes)::marker {
379
+
color: var(--gray);
355
380
}
356
381
357
382
.footnote-ref a {
···
365
390
height: 0.8rem;
366
391
font-size: 0.6rem;
367
392
display: inline-block;
393
+
border-bottom: unset;
394
+
}
395
+
396
+
.footnotes > ol {
397
+
list-style-type: none;
398
+
counter-reset: counter;
368
399
}
369
400
370
401
.footnotes > ol li::before {
···
381
412
box-sizing: content-box;
382
413
display: inline-block;
383
414
position: relative;
384
-
transform: unset;
415
+
transform: translateY(-2px);
385
416
}
386
417
387
418
.footnotes ol li:not(:last-child) {
···
390
421
391
422
.draft {
392
423
color: red;
393
-
font-weight: bold;
394
-
font-family: sans;
395
424
font-size: 1rem;
396
425
}
397
426
398
427
@media (max-width: 400px) {
399
-
.footer {
400
-
column-count: 1;
401
-
}
402
-
403
428
.image-grid {
404
429
column-count: 1;
405
430
}
+19
-17
templates/blog.html
+19
-17
templates/blog.html
···
16
16
</div>
17
17
<h1>{{ index .Meta "title" }}</h1>
18
18
{{ .Body }}
19
-
<table>
20
-
{{ $posts := .Extra }}
21
-
{{ range $posts }}
22
-
<tr>
23
-
<td align="left">
24
-
{{ if .Meta.draft }}
25
-
<p><a href=/blog/{{ .Meta.slug }}>{{ .Meta.title }}</a> <span class="draft">[draft]</span></p>
26
-
{{ else }}
27
-
<p><a href=/blog/{{ .Meta.slug }}>{{ .Meta.title }}</a></p>
19
+
20
+
<section class="posts">
21
+
<ul>
22
+
{{ $posts := .Extra }}
23
+
{{ range $posts }}
24
+
<li>
25
+
<div class="post">
26
+
<a href=/blog/{{ .Meta.slug }}>{{ .Meta.title }}</a>
27
+
{{ if .Meta.draft }}
28
+
(<span class="draft">draft</span>)
29
+
{{ end }}
30
+
<p class="subtitle">{{ .Meta.subtitle }}</p>
31
+
</div>
32
+
{{ $dateStr := .Meta.date }}
33
+
{{ $date := parsedate $dateStr }}
34
+
<div class="index-date">{{ $date.Format "02 Jan, 2006" }}</div>
35
+
</li>
28
36
{{ end }}
29
-
<p id="subtitle">{{ .Meta.subtitle }}</p>
30
-
</td>
31
-
{{ $dateStr := .Meta.date }}
32
-
{{ $date := parsedate $dateStr }}
33
-
<td align="right" class="index-date">{{ $date.Format "02 Jan, 2006" }}</td>
34
-
</tr>
35
-
{{ end }}
36
-
</table>
37
+
</ul>
38
+
</section>
37
39
</main>
38
40
<footer>
39
41
{{ template "partials/footer.html" }}
+27
-1
templates/index.html
+27
-1
templates/index.html
···
12
12
<div class="sidenav">
13
13
{{ template "partials/nav.html" }}
14
14
</div>
15
-
<article class="tagline">
15
+
<article>
16
+
<section class="tagline">
16
17
{{ .Body }}
18
+
</section>
19
+
20
+
<hr>
21
+
22
+
<section class="posts">
23
+
<h2>writing</h2>
24
+
<ul>
25
+
{{ $posts := .Extra.blog }}
26
+
{{ range slice $posts 0 3 }}
27
+
<li>
28
+
<div class="post">
29
+
<a href=/blog/{{ .Meta.slug }}>{{ .Meta.title }}</a>
30
+
{{ if .Meta.draft }}
31
+
(<span class="draft">draft</span>)
32
+
{{ end }}
33
+
<p class="subtitle">{{ .Meta.subtitle }}</p>
34
+
</div>
35
+
{{ $dateStr := .Meta.date }}
36
+
{{ $date := parsedate $dateStr }}
37
+
<div class="index-date">{{ $date.Format "02 Jan, 2006" }}</div>
38
+
</li>
39
+
{{ end }}
40
+
</ul>
41
+
<a style="border-bottom: unset;" href="/blog"><span>more →</span></a>
42
+
</section>
17
43
</article>
18
44
</main>
19
45
<footer>
+13
-8
templates/photoindex.html
+13
-8
templates/photoindex.html
···
27
27
<article align="left">
28
28
<h1>{{ .Meta.title }}</h1>
29
29
{{ .Body }}
30
-
<table>
30
+
<section class="posts">
31
+
<ul>
31
32
{{ $posts := .Extra }}
32
33
{{ range $posts }}
33
-
<tr>
34
-
<td align="left">
35
-
<a href=/photos/{{ .Meta.slug }}>{{ .Meta.title }} — {{ .Meta.season }}</a>
36
-
<p id="subtitle"> {{ .Meta.camera }} · {{ .Meta.lens }} · {{ .Meta.film }}</p>
37
-
</td>
38
-
</tr>
34
+
<li>
35
+
<div class="post">
36
+
<a href=/photos/{{ .Meta.slug }}>{{ .Meta.title }} — {{ .Meta.season }}</a>
37
+
<p class="subtitle">{{ .Meta.camera }} · {{ .Meta.lens }} · {{ .Meta.film }}</p>
38
+
</div>
39
+
{{ $dateStr := .Meta.date }}
40
+
{{ $date := parsedate $dateStr }}
41
+
<div class="index-date">{{ $date.Format "02 Jan, 2006" }}</div>
42
+
</li>
39
43
{{ end }}
40
-
</table>
44
+
</ul>
45
+
</section>
41
46
</article>
42
47
</main>
43
48
<footer>
+13
-11
templates/reading.html
+13
-11
templates/reading.html
···
20
20
{{- range $i, $yearMap := $books }}
21
21
{{- range $year, $books := $yearMap }}
22
22
<h2>{{ $year }}</h2>
23
-
<table>
24
-
<tbody>
25
-
{{- range $book := $books }}
26
-
<tr>
27
-
<td><a href="{{ $book.link }}">{{ $book.name }}</a></td>
28
-
<td>{{ $book.author }}</td>
29
-
<td>{{ $book.status }}</td>
30
-
</tr>
31
-
{{- end }}
32
-
</tbody>
33
-
</table>
23
+
<section class="book-posts">
24
+
<ul>
25
+
{{- range $book := $books }}
26
+
<li>
27
+
<div class="post">
28
+
<a href="{{ $book.link }}">{{ $book.name }}</a>
29
+
<p class="subtitle author">{{ $book.author }}</p>
30
+
</div>
31
+
<span class="status">{{ $book.status }}</span>
32
+
</li>
33
+
{{- end }}
34
+
</ul>
35
+
</section>
34
36
{{- end }}
35
37
{{- end }}
36
38
</article>