@@ -4,3 +4,4 @@ bin/replace
 .direnv
 .aider*
 .env
+static/styles/tw.css

@@ -16,6 +16,6 @@ }
 trap "kill_vite" INT
 
 "$vite" serve &
-find pages/ static/ templates/ | entr "$vite" build --drafts
+find input.css tailwind.config.js pages/ static/ templates/ | entr "$vite" build --drafts
 
 trap SIGINT

@@ -1,8 +1,9 @@
 title: Anirudh Oppiliappan
-# note the trailing slash!
 url: "https://anirudh.fi/"
 description: ""
 author:
-     name: "Anirudh Oppiliappan"
-     email: "anirudh@oppiliappan.com"
+  name: "Anirudh Oppiliappan"
+  email: "anirudh@oppiliappan.com"
 defaultTemplate: text.html
+preBuild:
+  - tailwindcss -i input.css -o static/styles/tw.css

@@ -2,11 +2,11 @@ {
   "nodes": {
     "nixpkgs": {
       "locked": {
-        "lastModified": 1737316331,
-        "narHash": "sha256-Gev1DE6Or+xzTIiTRrvnmVyUHj6x/Gtk6EO4iJJ58So=",
+        "lastModified": 1748204564,
+        "narHash": "sha256-eSYjZMXGo7BGaaREt9LdGKCUEobIwvvb9/2OjpEhWxI=",
         "owner": "nixos",
         "repo": "nixpkgs",
-        "rev": "20d2e6da70836953b778f6cd95e9312e65391ef9",
+        "rev": "7ed13552a51b57aab87896737cbef2853aa684d7",
         "type": "github"
       },
       "original": {
@@ -41,17 +41,17 @@ "inputs": {
         "nixpkgs": "nixpkgs_2"
       },
       "locked": {
-        "lastModified": 1737316691,
-        "narHash": "sha256-EUo4/8wpIF8ZposFbH+d77c2wDzR8/oGA2qE7nVDo+Y=",
-        "owner": "icyphox",
-        "repo": "go-vite",
-        "rev": "39b8d08cf911e22d238d5b30f18434a346c02733",
-        "type": "github"
+        "lastModified": 1745387732,
+        "narHash": "sha256-CdHBCqAzRynF39kDEktFNtYgD5f7vFIkKFupPIZhORY=",
+        "ref": "refs/heads/master",
+        "rev": "a64168bad0f8492be51dbb22991e12f2607ec3e2",
+        "revCount": 92,
+        "type": "git",
+        "url": "https://tangled.sh/@icyphox.sh/vite"
       },
       "original": {
-        "owner": "icyphox",
-        "repo": "go-vite",
-        "type": "github"
+        "type": "git",
+        "url": "https://tangled.sh/@icyphox.sh/vite"
       }
     }
   },

@@ -2,7 +2,7 @@ {
   description = "site";
 
   inputs.nixpkgs.url = "github:nixos/nixpkgs";
-  inputs.vite.url = "github:icyphox/go-vite";
+  inputs.vite.url = "git+https://tangled.sh/@icyphox.sh/vite";
 
   outputs =
     { self
@@ -34,10 +34,12 @@ pkgs.gotools
               pkgs.gnumake
               pkgs.entr
               pkgs.awscli2
+              pkgs.tailwindcss_4
             ];
           };
         }
       );
+
 
       apps = forAllSystems (
         system:

@@ -0,0 +1,150 @@
+@import "tailwindcss";
+
+@layer base {
+    @theme {
+        --color-cyan: #509c93;
+        --color-light: #fff9eb;
+        --color-light-gray: #fceccc;
+        --color-medium-gray: #e6dcd1;
+        --color-mediumer-gray: #d8cbbe;
+        --color-gray: #776e63;
+        --color-dark: #4a443d;
+        --color-darker: #2a261f;
+        --color-warm: #fffdf5;
+        --color-fg: #100f0f;
+        --color-selection: rgba(143, 105, 213, 0.2);
+
+        --color-dark-light: #2a261f;
+        --color-dark-light-gray: #4a443d;
+        --color-dark-medium-gray: #6b635a;
+        --color-dark-gray: #d3cec1;
+        --color-dark-fg: #fff6e3;
+        --color-dark-dark: #e6dcd1;
+        --color-dark-darker: #fff9eb;
+        --color-dusk: #100f0f;
+        --color-dark-selection: rgba(80, 156, 147, 0.2);
+
+        --breakpoint-md: 400px;
+    }
+
+    h1 {
+        @apply text-2xl;
+        @apply font-medium;
+        @apply pt-4 pb-3;
+    }
+
+    h2 {
+        @apply text-xl;
+        @apply font-normal;
+        @apply text-darker;
+        @apply pt-4 pb-3;
+    }
+
+    ::selection {
+        @apply bg-selection;
+        @apply dark:bg-dark-selection;
+    }
+
+    html {
+        @apply bg-warm dark:bg-dusk;
+        @apply text-fg dark:text-dark-fg;
+    }
+
+    main {
+        @apply text-base p-0 font-normal;
+        @apply text-base/relaxed;
+        article {
+            @apply py-5;
+            p {
+                @apply py-2;
+            }
+            strong {
+                @apply font-medium;
+            }
+
+            ul {
+                @apply list-disc;
+                @apply mx-8 my-2;
+                @apply marker:text-mediumer-gray;
+            }
+
+            ol {
+                counter-reset: counter;
+                li {
+                    counter-increment: counter;
+                }
+                @apply list-decimal;
+                @apply mx-8 my-2;
+                @apply marker:text-gray;
+            }
+
+            code {
+                @apply bg-light text-[0.9rem];
+            }
+            pre {
+                @apply bg-light p-4 my-2 overflow-x-auto overflow-y-hidden;
+            }
+
+            .footnotes {
+                hr {
+                    @apply border-t border-light-gray pt-6 mt-6;
+                }
+            }
+
+            .footnotes > ol li {
+                @apply flex items-center gap-3;
+            }
+
+            .footnotes > ol li::before {
+                @apply content-[counter(counter)];
+                @apply rounded-full text-center leading-4 text-light bg-cyan;
+                @apply w-4 h-4 text-xs inline-block flex-shrink-0;
+            }
+
+            .footnote-ref a {
+                @apply no-underline text-light rounded-full text-center bg-cyan border-b-0;
+                @apply w-3 h-3 text-[0.6rem] leading-3 inline-block;
+            }
+
+            .footnotes > ol li p {
+                @apply m-0 leading-4;
+            }
+
+            .footnote-return {
+                @apply border-b-0 text-cyan ml-auto;
+            }
+
+            .footnote-return:hover {
+                @apply border-b-0 text-cyan ml-auto;
+            }
+
+            .footnotes ol li:not(:last-child) {
+                @apply pb-8;
+            }
+        }
+    }
+
+    body {
+        @apply max-w-[655px];
+        @apply px-4 pt-8 pb-80;
+        @apply my-4 mx-auto;
+    }
+
+    a {
+        @apply text-darker dark:text-gray;
+        @apply border-b border-medium-gray hover:border-gray;
+    }
+
+    img {
+        @apply max-w-full;
+        @apply w-full;
+        @apply block;
+        @apply mx-auto my-[10px_auto_4px_auto];
+        @apply rounded-md;
+    }
+
+    .row {
+        @apply flex flex-col md:flex-row items-center justify-between;
+        @apply gap-4 md:gap-2;
+    }
+}

@@ -6,7 +6,7 @@ season: Winter 2024
   camera: Canon EOS 55
   lens: 50mm f/1.8
   film: Mira 400 and Lomo 400
-  date: 2024-02-01
+  date: "2024-02-01"
 
 defaults:
   width: 1000

@@ -1,3 +0,0 @@
-<svg width="568" height="501" viewBox="0 0 568 501" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M123.121 33.6637C188.241 82.5526 258.281 181.681 284 234.873C309.719 181.681 379.759 82.5526 444.879 33.6637C491.866 -1.61183 568 -28.9064 568 57.9464C568 75.2916 558.055 203.659 552.222 224.501C531.947 296.954 458.067 315.434 392.347 304.249C507.222 323.8 536.444 388.56 473.333 453.32C353.473 576.312 301.061 422.461 287.631 383.039C285.169 375.812 284.017 372.431 284 375.306C283.983 372.431 282.831 375.812 280.369 383.039C266.939 422.461 214.527 576.312 94.6667 453.32C31.5556 388.56 60.7778 323.8 175.653 304.249C109.933 315.434 36.0535 296.954 15.7778 224.501C9.94525 203.659 0 75.2916 0 57.9464C0 -28.9064 76.1345 -1.61183 123.121 33.6637Z" fill="black"/>
-</svg>

@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 96 96" style="enable-background:new 0 0 96 96;" xml:space="preserve">
-	<g>
-		<path style="fill:#030104;" d="M47.358,0.004C20.85,0.357-0.351,22.133,0.004,48.641c0.354,26.507,22.129,47.71,48.637,47.354
-			c26.506-0.354,47.71-22.129,47.354-48.638C95.642,20.85,73.862-0.352,47.358,0.004z M48.506,85.892
-			c-20.928,0.279-38.119-16.459-38.398-37.388C9.829,27.578,26.567,10.387,47.493,10.107C68.42,9.828,85.61,26.564,85.891,47.492
-			C86.17,68.421,69.432,85.61,48.506,85.892z M36.254,56.132c-2.027,0-3.562-0.738-4.602-2.219c-1.041-1.479-1.559-3.45-1.559-5.915
-			c0-5.42,2.053-8.131,6.16-8.131c0.82,0,1.711,0.273,2.668,0.82c0.957,0.549,1.766,1.508,2.424,2.875l6.16-3.203
-			c-2.463-4.436-6.545-6.654-12.24-6.654c-3.889,0-7.104,1.287-9.648,3.861c-2.547,2.574-3.822,6.051-3.822,10.432
-			c0,4.491,1.262,7.997,3.779,10.517s5.834,3.777,9.941,3.777c2.572,0,4.928-0.645,7.062-1.93c2.135-1.287,3.807-3.053,5.012-5.299
-			l-5.67-2.876C40.825,54.817,38.936,56.132,36.254,56.132z M62.786,56.132c-2.027,0-3.561-0.738-4.6-2.219
-			c-1.041-1.479-1.561-3.45-1.561-5.915c0-5.42,2.053-8.131,6.16-8.131c0.875,0,1.793,0.273,2.75,0.82
-			c0.959,0.549,1.768,1.508,2.426,2.875l6.076-3.203c-2.41-4.436-6.461-6.654-12.156-6.654c-3.889,0-7.105,1.287-9.652,3.861
-			c-2.545,2.574-3.816,6.051-3.816,10.432c0,4.491,1.244,7.997,3.736,10.517c2.49,2.52,5.818,3.777,9.98,3.777
-			c2.518,0,4.846-0.645,6.98-1.93c2.135-1.287,3.832-3.053,5.094-5.299l-5.75-2.876C67.358,54.817,65.467,56.132,62.786,56.132z"/>
-	</g>
-</svg>

@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   width="26.45833mm"
-   height="25.582479mm"
-   viewBox="0 0 26.458331 25.582479"
-   version="1.1"
-   id="svg1"
-   xml:space="preserve"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"><defs
-     id="defs1" /><g
-     id="layer1"
-     transform="translate(-87.047916,-131.23333)"><g
-       id="g66"
-       transform="matrix(0.74021505,0,0,0.74021505,452.38455,-3.3651489)"
-       style="stroke-width:1.35096"><path
-         id="path140"
-         style="-inkscape-font-specification:'Fungal @grow=542,TCHK=321';stroke-linecap:square;stroke-linejoin:round"
-         d="m -476.94278,181.83699 v 1.05836 l 0.43493,6.90588 -5.76304,-3.82923 -0.91664,-0.52918 -1.26012,2.18235 0.91594,0.52918 6.19867,3.07595 -6.19867,3.07664 -0.91594,0.52918 1.26012,2.18305 0.91594,-0.52918 5.76374,-3.82993 -0.43493,6.90588 v 1.05836 h 2.52024 v -1.05836 l -0.43494,-6.90588 5.76374,3.82993 0.91594,0.52918 1.26012,-2.18305 -0.91594,-0.52918 -6.19797,-3.07664 6.19797,-3.07595 0.91594,-0.52918 -1.26012,-2.18235 -0.91594,0.52918 -5.76374,3.82923 0.43494,-6.90588 v -1.05836 z m -9.10707,15.77349 v 1.05836 l 0.43493,6.90518 -5.76304,-3.82923 -0.91664,-0.52918 -1.26012,2.18304 0.91664,0.52918 6.19797,3.07595 -6.19797,3.07665 -0.91664,0.52918 1.26012,2.18304 0.91664,-0.52918 5.76304,-3.82992 -0.43493,6.90587 v 1.05836 h 2.52093 v -1.05836 l -0.43493,-6.90587 5.76304,3.82992 0.91664,0.52918 1.26012,-2.18304 -0.91664,-0.52918 -6.19797,-3.07665 6.19797,-3.07595 0.91664,-0.52918 -1.26012,-2.18304 -0.91664,0.52918 -5.76304,3.82923 0.43493,-6.90518 v -1.05836 z m 18.21414,0 v 1.05836 l 0.43493,6.90588 -5.76374,-3.82993 -0.91664,-0.52918 -1.26012,2.18304 0.91664,0.52918 6.19728,3.07595 -6.19728,3.07665 -0.91664,0.52918 1.26012,2.18304 0.91664,-0.52918 5.76374,-3.82992 -0.43493,6.90587 v 1.05836 h 2.52024 v -1.05836 l -0.43494,-6.90587 5.76304,3.82992 0.91664,0.52918 1.26012,-2.18304 -0.91664,-0.52918 -6.19727,-3.07665 6.19727,-3.07595 0.91664,-0.52918 -1.26012,-2.18304 -0.91664,0.52918 -5.76304,3.82923 0.43494,-6.90518 v -1.05836 z" /></g></g></svg>

@@ -1,52 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   id="svg2"
-   version="1.1"
-   inkscape:version="0.91 r13725"
-   xml:space="preserve"
-   width="114.8625"
-   height="114.8625"
-   viewBox="0 0 114.8625 114.8625"
-   sodipodi:docname="Git-Icon-Black.svg"><metadata
-     id="metadata8"><rdf:RDF><cc:Work
-         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
-     id="defs6" /><sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="702"
-     inkscape:window-height="480"
-     id="namedview4"
-     showgrid="false"
-     inkscape:zoom="2.0546305"
-     inkscape:cx="57.431252"
-     inkscape:cy="57.431252"
-     inkscape:window-x="0"
-     inkscape:window-y="25"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="g10" /><g
-     id="g10"
-     inkscape:groupmode="layer"
-     inkscape:label="ink_ext_XXXXXX"
-     transform="matrix(1.25,0,0,-1.25,0,114.8625)"><g
-       id="g12"
-       transform="scale(0.1,0.1)"><path
-         d="M 901.547,500.352 500.355,901.527 c -23.093,23.11 -60.566,23.11 -83.691,0 L 333.363,818.211 439.039,712.535 c 24.559,8.293 52.723,2.727 72.293,-16.847 19.688,-19.696 25.207,-48.102 16.699,-72.75 L 629.887,521.094 c 24.648,8.496 53.066,3.004 72.754,-16.711 27.5,-27.492 27.5,-72.059 0,-99.574 -27.52,-27.516 -72.078,-27.516 -99.61,0 -20.683,20.703 -25.801,51.097 -15.312,76.582 l -95,94.992 0,-249.969 c 6.699,-3.32 13.027,-7.742 18.613,-13.312 27.5,-27.497 27.5,-72.059 0,-99.598 -27.5,-27.488 -72.09,-27.488 -99.57,0 -27.5,27.539 -27.5,72.101 0,99.598 6.797,6.789 14.668,11.925 23.066,15.363 l 0,252.281 c -8.398,3.438 -16.25,8.531 -23.066,15.367 -20.828,20.821 -25.84,51.395 -15.157,76.977 L 292.426,777.285 17.3281,502.211 c -23.10544,-23.129 -23.10544,-60.602 0,-83.711 L 418.539,17.3242 c 23.098,-23.10545 60.559,-23.10545 83.691,0 L 901.547,416.641 c 23.117,23.113 23.117,60.605 0,83.711"
-         style="fill:#100f0d;fill-opacity:1;fill-rule:nonzero;stroke:none"
-         id="path14"
-         inkscape:connector-curvature="0" /></g></g></svg>

@@ -1,60 +0,0 @@
------BEGIN PGP PUBLIC KEY BLOCK-----
-
-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
-=hrUE
------END PGP PUBLIC KEY BLOCK-----

@@ -1,29 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="128.000000pt" height="128.000000pt" viewBox="0 0 128.000000 128.000000"
- preserveAspectRatio="xMidYMid meet">
-
-<g transform="translate(0.000000,128.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M0 640 l0 -640 640 0 640 0 0 640 0 640 -640 0 -640 0 0 -640z m550
-470 c0 -14 -9 -21 -37 -25 -92 -15 -83 8 -83 -200 l0 -185 220 0 220 0 0 185
-c0 208 9 185 -82 200 -29 4 -38 11 -38 25 0 19 8 20 190 20 182 0 190 -1 190
--20 0 -14 -9 -21 -37 -25 -21 -3 -48 -8 -60 -11 l-23 -4 0 -414 0 -414 60 -7
-c55 -6 60 -9 60 -31 l0 -24 -190 0 -190 0 0 24 c0 22 5 25 60 31 l60 7 0 199
-0 199 -220 0 -220 0 0 -199 0 -199 60 -7 c55 -6 60 -9 60 -31 l0 -24 -190 0
--190 0 0 24 c0 22 5 25 60 31 l60 7 0 414 0 414 -22 4 c-13 3 -40 8 -60 11
--29 4 -38 11 -38 25 0 19 8 20 190 20 182 0 190 -1 190 -20z m210 -672 l1 -53
-24 28 c13 15 32 27 41 27 13 0 12 -4 -6 -18 -26 -21 -22 -45 11 -80 l20 -22
--26 0 c-15 0 -25 6 -25 14 0 7 -7 19 -15 26 -12 10 -16 9 -21 -5 -4 -10 -1
--21 7 -26 9 -5 -10 -9 -51 -9 -39 0 -60 4 -52 9 9 5 12 22 9 50 -5 48 -10 56
--32 48 -19 -8 -21 -93 -2 -100 6 -3 -4 -6 -23 -6 -23 0 -30 2 -21 8 9 6 12 24
-10 60 l-4 52 45 -3 45 -3 3 -52 c3 -45 6 -53 23 -53 17 0 19 7 19 74 0 50 -4
-76 -12 79 -7 3 -3 6 10 6 20 1 22 -4 22 -51z m-192 -10 c16 -16 16 -80 0 -96
--7 -7 -26 -12 -43 -12 -40 0 -55 16 -55 60 0 44 15 60 55 60 17 0 36 -5 43
--12z"/>
-<path d="M500 406 c-13 -35 4 -79 28 -74 13 3 17 13 17 48 0 35 -4 45 -17 48
--12 2 -21 -6 -28 -22z"/>
-</g>
-</svg>

@@ -1,3 +0,0 @@
-<svg width="1536" height="1536" xmlns="http://www.w3.org/2000/svg">
-    <path d="M384 1344c0 106-86 192-192 192S0 1450 0 1344s86-192 192-192 192 86 192 192zm512 123c1 18-5 35-17 48-12 14-29 21-47 21H697c-33 0-60-25-63-58-29-305-271-547-576-576-33-3-58-30-58-63V704c0-18 7-35 21-47 11-11 27-17 43-17h5c213 17 414 110 565 262 152 151 245 352 262 565zm512 2c1 17-5 34-18 47-12 13-28 20-46 20h-143c-34 0-62-26-64-60C1104 895 641 432 60 398c-34-2-60-30-60-63V192c0-18 7-34 20-46 12-12 28-18 44-18h3c350 18 679 165 927 414 249 248 396 577 414 927z"/>
-</svg>

@@ -1,74 +0,0 @@
-/* Background */ .bg { background-color: #ffffff }
-/* PreWrapper */ .chroma { background-color: #ffffff; }
-/* Error */ .chroma .err { color: #a61717; background-color: #e3d2d2 }
-/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
-/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; }
-/* LineHighlight */ .chroma .hl { background-color: #e5e5e5 }
-/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
-/* Line */ .chroma .line { display: flex; }
-/* Keyword */ .chroma .k { color: #000000; font-weight: bold }
-/* KeywordConstant */ .chroma .kc { color: #000000; font-weight: bold }
-/* KeywordDeclaration */ .chroma .kd { color: #000000; font-weight: bold }
-/* KeywordNamespace */ .chroma .kn { color: #000000; font-weight: bold }
-/* KeywordPseudo */ .chroma .kp { color: #000000; font-weight: bold }
-/* KeywordReserved */ .chroma .kr { color: #000000; font-weight: bold }
-/* KeywordType */ .chroma .kt { color: #222222; font-weight: bold }
-/* NameAttribute */ .chroma .na { color: #509c93 }
-/* NameBuiltin */ .chroma .nb { color: #509c93 }
-/* NameBuiltinPseudo */ .chroma .bp { color: #999999 }
-/* NameClass */ .chroma .nc { color: #666666; font-weight: bold }
-/* NameConstant */ .chroma .no { color: #509c93 }
-/* NameDecorator */ .chroma .nd { color: #3c5d5d; font-weight: bold }
-/* NameEntity */ .chroma .ni { color: #509c93 }
-/* NameException */ .chroma .ne { color: #444444; font-weight: bold }
-/* NameFunction */ .chroma .nf { color: #444444; font-weight: bold }
-/* NameLabel */ .chroma .nl { color: #444444; font-weight: bold }
-/* NameNamespace */ .chroma .nn { color: #555555 }
-/* NameTag */ .chroma .nt { color: #444444}
-/* NameVariable */ .chroma .nv { color: #509c93 }
-/* NameVariableClass */ .chroma .vc { color: #509c93 }
-/* NameVariableGlobal */ .chroma .vg { color: #509c93 }
-/* NameVariableInstance */ .chroma .vi { color: #509c93 }
-/* LiteralString */ .chroma .s { color: #509c93 }
-/* LiteralStringAffix */ .chroma .sa { color: #509c93 }
-/* LiteralStringBacktick */ .chroma .sb { color: #509c93 }
-/* LiteralStringChar */ .chroma .sc { color: #509c93 }
-/* LiteralStringDelimiter */ .chroma .dl { color: #509c93 }
-/* LiteralStringDoc */ .chroma .sd { color: #509c93 }
-/* LiteralStringDouble */ .chroma .s2 { color: #509c93 }
-/* LiteralStringEscape */ .chroma .se { color: #509c93 }
-/* LiteralStringHeredoc */ .chroma .sh { color: #509c93 }
-/* LiteralStringInterpol */ .chroma .si { color: #509c93 }
-/* LiteralStringOther */ .chroma .sx { color: #509c93 }
-/* LiteralStringRegex */ .chroma .sr { color: #009926 }
-/* LiteralStringSingle */ .chroma .s1 { color: #509c93 }
-/* LiteralStringSymbol */ .chroma .ss { color: #990073 }
-/* LiteralNumber */ .chroma .m { color: #509c93 }
-/* LiteralNumberBin */ .chroma .mb { color: #509c93 }
-/* LiteralNumberFloat */ .chroma .mf { color: #509c93 }
-/* LiteralNumberHex */ .chroma .mh { color: #509c93 }
-/* LiteralNumberInteger */ .chroma .mi { color: #509c93 }
-/* LiteralNumberIntegerLong */ .chroma .il { color: #509c93 }
-/* LiteralNumberOct */ .chroma .mo { color: #509c93 }
-/* Operator */ .chroma .o { color: #000000; font-weight: bold }
-/* OperatorWord */ .chroma .ow { color: #000000; font-weight: bold }
-/* Comment */ .chroma .c { color: #999988; font-style: italic }
-/* CommentHashbang */ .chroma .ch { color: #999988; font-style: italic }
-/* CommentMultiline */ .chroma .cm { color: #999988; font-style: italic }
-/* CommentSingle */ .chroma .c1 { color: #999988; font-style: italic }
-/* CommentSpecial */ .chroma .cs { color: #999999; font-weight: bold; font-style: italic }
-/* CommentPreproc */ .chroma .cp { color: #999999; font-weight: bold; font-style: italic }
-/* CommentPreprocFile */ .chroma .cpf { color: #999999; font-weight: bold; font-style: italic }
-/* GenericDeleted */ .chroma .gd { color: #000000; background-color: #ffdddd }
-/* GenericEmph */ .chroma .ge { color: #000000; font-style: italic }
-/* GenericError */ .chroma .gr { color: #aa0000 }
-/* GenericHeading */ .chroma .gh { color: #999999 }
-/* GenericInserted */ .chroma .gi { color: #000000; background-color: #ddffdd }
-/* GenericOutput */ .chroma .go { color: #888888 }
-/* GenericPrompt */ .chroma .gp { color: #555555 }
-/* GenericStrong */ .chroma .gs { font-weight: bold }
-/* GenericSubheading */ .chroma .gu { color: #aaaaaa }
-/* GenericTraceback */ .chroma .gt { color: #aa0000 }
-/* GenericUnderline */ .chroma .gl { text-decoration: underline }
-/* TextWhitespace */ .chroma .w { color: #bbbbbb }

@@ -1,13 +0,0 @@
-<svg class="vector" width="300px" height="300px" xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" style="fill:none;stroke:black;stroke-width:28px;stroke-linecap:square;">
-  <g transform="translate(0,30)">
-    <g transform="translate(150,150),rotate(120,0,0)">
-      <path d="M0,-60 a60,60 0 1,0 0,120 l100,0"></path>   
-    </g>
-    <g transform="translate(150,150),rotate(240,0,0)">
-      <path d="M0,-60 a60,60 0 1,0 0,120 l100,0"></path>   
-    </g>
-    <g transform="translate(150,150),rotate(0,0,0)">
-      <path d="M0,-60 a60,60 0 1,0 0,120 l100,0"></path>   
-    </g>
-  </g>
-</svg>

@@ -1,33 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="619.000000pt" height="619.000000pt" viewBox="0 0 619.000000 619.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.16, written by Peter Selinger 2001-2019
-</metadata>
-<g transform="translate(0.000000,619.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M583 4666 c4 -10 9 -28 12 -39 8 -36 105 -457 120 -522 8 -33 26
--109 40 -170 14 -60 37 -157 50 -215 14 -58 36 -154 51 -215 29 -127 59 -255
-79 -340 8 -33 37 -159 65 -280 74 -320 77 -330 89 -327 16 3 1091 853 1091
-862 0 5 -1446 1147 -1564 1235 -30 23 -38 25 -33 11z"/>
-<path d="M4819 4055 c-436 -344 -795 -628 -797 -633 -3 -9 1069 -860 1089
--864 12 -3 15 7 89 327 28 121 57 247 65 280 20 85 50 213 79 340 15 61 37
-157 51 215 13 58 36 155 50 215 14 61 32 137 40 170 8 33 37 159 65 280 27
-121 54 236 60 254 5 19 8 36 7 38 -2 1 -361 -279 -798 -622z"/>
-<path d="M2244 3239 c-176 -138 -323 -255 -328 -260 -8 -7 1171 -1749 1184
--1749 13 0 1192 1742 1184 1749 -5 5 -152 122 -328 260 l-318 251 -538 0 -538
-0 -318 -251z"/>
-<path d="M1150 2373 c-338 -267 -626 -494 -639 -504 -13 -11 -22 -21 -20 -23
-2 -2 83 -25 179 -50 96 -25 209 -54 250 -65 41 -11 127 -33 190 -50 63 -16
-158 -41 210 -54 52 -14 176 -46 275 -72 99 -26 212 -55 250 -65 181 -48 310
--81 415 -109 63 -16 178 -46 255 -66 248 -65 360 -94 362 -91 2 2 -1099 1621
--1111 1633 -1 1 -278 -217 -616 -484z"/>
-<path d="M3877 2043 c-306 -449 -556 -818 -554 -819 2 -3 115 26 362 91 77 20
-192 50 255 66 105 28 234 61 415 109 39 10 151 39 250 65 99 26 223 58 275 72
-52 13 147 38 210 54 63 17 149 39 190 50 41 11 154 40 250 65 170 44 188 50
-179 57 -5 5 -1251 988 -1264 998 -6 5 -226 -308 -568 -808z"/>
-</g>
-</svg>

@@ -0,0 +1,30 @@
+module.exports = {
+  content: ["./templates/**/*.html", "./pages/**/*.md"],
+  darkMode: "media",
+  theme: {
+    container: {
+      padding: "2rem",
+      center: true,
+      screens: {
+        sm: "500px",
+        md: "600px",
+        lg: "800px",
+        xl: "1000px",
+        "2xl": "1200px",
+      },
+    },
+    extend: {
+      fontFamily: {
+        sans: ["--apple-system", "system-ui", "sans-serif", "ui-sans-serif"],
+      },
+      typography: {
+        DEFAULT: {
+          css: {
+            maxWidth: "75ch",
+          },
+        },
+      },
+    },
+  },
+  plugins: [require("@tailwindcss/typography")],
+};

@@ -2,7 +2,7 @@ <!doctype html>
 <html lang=en>
   <head>
     {{ template "partials/head.html" }}
-    <link rel="alternate" type="application/rss+xml" title="RSS" href="https://icyphox.sh/blog/feed.xml">
+    <link rel="alternate" type="application/rss+xml" title="RSS" href="https://anirudh.fi/blog/feed.xml">
     <meta name="description" content="{{ index .Meta "subtitle" }}">
   </head>
 
@@ -11,31 +11,36 @@ {{ .Meta.title }} &mdash; {{ .Cfg.Title }}
   </title>
 <body>
   <main>
-    <div class="sidenav">
+    <div>
       {{ template "partials/nav.html" }}
     </div>
+
+    <article>
     <h1>{{ index .Meta "title" }}</h1>
     {{ .Body }}
 
-    <section class="posts">
-      <ul>
-          {{ $posts := .Extra }}
-          {{ range $posts }}
-              <li>
-                <div class="post">
-                  <a href=/{{ .Meta.slug }}>{{ .Meta.title }}</a>
-                  {{ if .Meta.draft }}
-                    (<span class="draft">draft</span>)
-                  {{ end }}
-                  <p class="subtitle">{{ .Meta.subtitle }}</p>
-                </div>
-                {{ $dateStr := .Meta.date }}
-                {{ $date := parsedate $dateStr }}
-                <div class="index-date">{{ $date.Format "02 Jan, 2006" }}</div>
-              </li>
-          {{ end }}
-        </ul>
+    <section class="mt-12">
+        <ul class="m-0 p-0">
+            {{ $posts := .Extra }}
+            {{ range $posts }}
+                <li class="list-none py-2">
+                  <div class="flex md:flex-row flex-col justify-between">
+                    <div>
+                      <a href=/{{ .Meta.slug }}>{{ .Meta.title }}</a>
+                      {{ if .Meta.draft }}
+                        (<span class="text-red-200">draft</span>)
+                      {{ end }}
+                      <p class="text-gray">{{ .Meta.subtitle }}</p>
+                    </div>
+                    {{ $dateStr := .Meta.date }}
+                    {{ $date := parsedate $dateStr }}
+                    <div class="index-date text-gray lowercase">{{ $date.Format "02 Jan, 2006" }}</div>
+                  </div>
+                </li>
+            {{ end }}
+          </ul>
     </section>
+    </article>
   </main>
   <footer>
     {{ template "partials/footer.html" }}

@@ -13,32 +13,32 @@ <div class="sidenav">
         {{ template "partials/nav.html" }}
       </div>
       <article>
-        <section class="tagline">
+        <section class="my-12 py-12 border-b border-light-gray">
         {{ .Body }}
         </section>
 
-        <hr>
-
-        <section class="posts">
-        <h2>writing</h2>
-          <ul>
+        <section>
+        <h2 class="pb-6">writing</h2>
+          <ul class="m-0 p-0">
               {{ $posts := .Extra.blog }}
               {{ range slice $posts 0 3 }}
-                  <li>
-                    <div class="post">
+                  <li class="list-none py-2">
+                    <div class="flex md:flex-row flex-col justify-between">
+                    <div>
                       <a href=/{{ .Meta.slug }}>{{ .Meta.title }}</a>
                       {{ if .Meta.draft }}
                         (<span class="draft">draft</span>)
                       {{ end }}
-                      <p class="subtitle">{{ .Meta.subtitle }}</p>
+                      <p class="text-gray">{{ .Meta.subtitle }}</p>
                     </div>
                     {{ $dateStr := .Meta.date }}
                     {{ $date := parsedate $dateStr }}
-                    <div class="index-date">{{ $date.Format "02 Jan, 2006" }}</div>
+                    <div class="text-gray lowercase">{{ $date.Format "02 Jan, 2006" }}</div>
+                    </div>
                   </li>
               {{ end }}
             </ul>
-        <a style="border-bottom: unset;" href="/blog/"><span>more &RightArrow;</span></a>
+        <a class="border-b-0" href="/blog/"><span>more &RightArrow;</span></a>
         </section>
       </article>
     </main>

@@ -13,7 +13,7 @@ <div class="sidenav">
       {{ template "partials/nav.html" }}
     </div>
     <article align="left">
-      <h1>{{ index .Meta "title" }}</h1>
+      <h1 class="">{{ index .Meta "title" }}</h1>
       {{ .Body }}
     </article>
   </main>

@@ -1,10 +1,8 @@
-<hr>
-
-<div class="footer">
-  <p class="muted">
-  Follow via <a href="/blog/feed.xml">RSS</a>,
-  <a href="https://x.com/icyphox">X</a>,
-  <a href="https://bsky.app/profile/icyphox.sh">Bluesky</a>,
-  and <a href="/about#contact">more</a>.
-  </p>
+<div class="border-t border-light-gray pt-6 mt-6">
+    <p class="text-gray">
+        Follow via <a class="text-cyan border-b border-b-cyan" href="/blog/feed.xml">RSS</a>,
+        <a class="border-b border-b-cyan text-cyan" href="https://bsky.app/profile/icyphox.sh">Bluesky</a>,
+        <a class="border-b border-b-cyan text-cyan" href="https://x.com/icyphox">X</a>, and
+        <a class="border-b border-b-cyan text-cyan" href="/about#contact">more</a>.
+    </p>
 </div>

@@ -1,4 +1,4 @@
-<link rel="stylesheet" href="/static/style.css" type="text/css" />
+<link rel="stylesheet" href="/static/styles/tw.css" type="text/css" />
 <meta name="viewport" content="initial-scale=1,width" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 <meta charset="UTF-8" />

@@ -1,7 +1,8 @@
-<nav>
-  <div class="logo">
+<nav class="flex items-center justify-between w-full">
+  <div class="flex-shrink-0">
     <a href="/">
         <svg
+            class="max-h-10 max-w-10 fill-fg"
             version="1.0"
             xmlns="http://www.w3.org/2000/svg"
             width="619.000000pt"
@@ -46,7 +47,7 @@ </g>
         </svg>
     </a>
   </div>
-    <ul>
+    <ul class="flex space-x-3">
         <li><a href="/reading">reading</a></li>
         <li><a href="/photos">photos</a></li>
         <li><a href="/about">about</a></li>

@@ -27,18 +27,20 @@ </div>
     <article align="left">
     <h1>{{ .Meta.title }}</h1>
     {{ .Body }}
-    <section class="posts">
-    <ul>
+    <section class="mt-12">
+    <ul class="m-0 p-0">
       {{ $posts := .Extra }}
       {{ range $posts }}
-        <li>
-          <div class="post">
+        <li class="list-none py-2">
+          <div class="flex md:flex-row flex-col justify-between">
+          <div>
             <a href=/photos/{{ .Meta.slug }}>{{ .Meta.title }} &mdash; {{ .Meta.season }}</a>
-            <p class="subtitle">{{ .Meta.camera }} · {{ .Meta.lens }} · {{ .Meta.film }}</p>
+            <p class="text-gray">{{ .Meta.camera }} · {{ .Meta.lens }} · {{ .Meta.film }}</p>
           </div>
           {{ $dateStr := .Meta.date }}
           {{ $date := parsedate $dateStr }}
-          <div class="index-date">{{ $date.Format "02 Jan, 2006" }}</div>
+          <div class="text-gray lowercase">{{ $date.Format "02 Jan, 2006" }}</div>
+          </div>
         </li>
       {{ end }}
     </ul>

@@ -3,30 +3,24 @@ <html lang=en>
   <head>
     {{ template "partials/head.html" }}
     <meta name="description" content="{{ index .Meta "subtitle" }}">
-  <style>
-    h1 {
-      margin: 0px;
-      padding: 0px;
-    }
-  </style>
   </head>
   <title>
     {{ .Meta.title }} ({{ .Meta.season }}) &mdash; {{ .Cfg.Title }}
   </title>
   <body>
   <main>
-    <div class="sidenav">
+    <div>
       {{ template "partials/nav.html" }}
     </div>
     <article align="left">
       <h1>{{ .Meta.title }} &mdash; {{ .Meta.season }}</h1>
       <h2 class="subtitle"> {{ .Meta.camera }} · {{ .Meta.lens }} · {{ .Meta.film }} </h2>
-      <div class="image-grid">
+      <div class="columns-1 md:columns-2">
       {{ $photos := .Yaml.photos }}
       {{ $d := .Yaml.defaults }}
       {{ range $photos }}
         <a href="https://cdn.icyphox.sh/{{ . }}">
-          <img src="https://cdn.icyphox.sh/fit?url=http://files.garage.koti.lan/{{ . }}&width={{ $d.width }}&height={{ $d.height }}" />
+          <img class="object-cover relative w-full mb-3" src="https://cdn.icyphox.sh/fit?url=http://files.garage.koti.lan/{{ . }}&width={{ $d.width }}&height={{ $d.height }}" />
         </a>
       {{- end }}
       </div>

@@ -20,18 +20,20 @@ {{- $books := .Yaml.books }}
     {{- range $i, $yearMap := $books }}
     {{- range $year, $books := $yearMap }}
     <h2>{{ $year }}</h2>
-    <section class="book-posts">
-    <ul>
-      {{- range $book := $books }}
-        <li>
-          <div class="post">
-            <a href="{{ $book.link }}">{{ $book.name }}</a>
-            <p class="subtitle author">{{ $book.author }}</p>
-          </div>
-          <span class="status">{{ $book.status }}</span>
-        </li>
-      {{- end }}
-    </ul>
+    <section class="mt-4">
+        <ul class="m-0 p-0">
+          {{- range $book := $books }}
+            <li class="list-none py-2">
+              <div class="flex md:flex-row flex-col justify-between">
+                <div>
+                  <a href="{{ $book.link }}">{{ $book.name }}</a>
+                  <p class="text-gray">{{ $book.author }}</p>
+                </div>
+                <span class="text-gray lowercase">{{ $book.status }}</span>
+              </div>
+            </li>
+          {{- end }}
+        </ul>
     </section>
     {{- end }}
     {{- end }}

@@ -9,28 +9,25 @@ {{ index .Meta "title" }}
   </title>
   <body>
     <main>
-      <div class="sidenav">
+      <div>
         {{ template "partials/nav.html" }}
       </div>
-      <article align="left">
-        <section class="post-date">
+      <article>
+        <section class="text-gray lowercase">
         {{ $dateStr := index .Meta "date" }}
         {{ $date := parsedate $dateStr }}
         {{ $date.Format "02 Jan, 2006" }}
         </section>
 
-
-        {{ if eq .Meta.draft "true" }}
-        <h1 class="title">{{ index .Meta "title" }} <span class="draft">[draft]</span></h1>
-        {{ else }}
-        <h1 class="title">{{ index .Meta "title" }}</h1>
-        {{ end }}
-        <h2 class="subtitle">{{ index .Meta "subtitle" }}</h2>
+        <section>
+        <h1 class="-mb-4">{{ index .Meta "title" }} {{ if eq .Meta.draft "true" }}
+            <span class="text-base text-red-400">[draft]</span>{{ end }}
+        </h1>
+        <h2 class="text-gray">{{ index .Meta "subtitle" }}</h2>
+        <div class="mt-12">
         {{ .Body }}
-
-        <p class="muted" align="center">Questions or comments?
-        Send an
-        <a href="mailto:x@icyphox.sh?Subject=Re: {{ index .Meta "title" }}">email</a>.
+        </div>
+        </section>
       </article>
     </main>
     <footer>