@@ -1,4 +1,4 @@
-title: anirudh
+title: Anirudh Oppiliappan
 # note the trailing slash!
 url: "https://anirudh.fi/"
 description: ""

@@ -1,6 +1,6 @@
 ---
-title: anirudh.fi
-subtitle: Anirudh Oppiliappan
+title: Anirudh Oppiliappan
+subtitle: Writing, photography and more by Anirudh Oppiliappan.
 template: index.html
 ---
 

@@ -7,6 +7,51 @@ --gray: #6a6a6a;
     --dark: #444;
     --darker: #222;
     --white: #fff;
+    --cyan-trans: rgba(80, 156, 147, 0.3);
+
+    --font-content: -apple-system, BlinkMacSystemFont, "Inter", "Roboto", "Segoe UI", sans-serif;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --light: #222;
+        --cyan: #509c93;
+        --light-gray: #444;
+        --medium-gray: #666;
+        --gray: #ccc;
+        --dark: #ddd;
+        --darker: #fff;
+        --white: #000;
+    }
+
+    html {
+        background: var(--light);
+        color: var(--gray);
+    }
+
+    main a {
+        color: var(--gray);
+        border-bottom: 1.5px solid var(--medium-gray);
+    }
+
+    a:hover {
+        border-bottom: 1.5px solid var(--gray);
+    }
+
+    blockquote p {
+        border-left: 1.5px solid var(--gray);
+    }
+
+    pre {
+        background-color: var(--dark);
+    }
+
+    .logo, .footimgs {
+        filter: invert(1);
+        svg {
+            fill: var(--gray);
+        }
+    }
 }
 
 html {
@@ -15,8 +60,8 @@ -webkit-text-size-adjust: none;
 }
 
 ::selection {
-    background: var(--medium-gray);
-    opacity: 0.3;
+    background: var(--cyan-trans);
+    color: var(--darker);
 }
 
 del {
@@ -31,20 +76,11 @@ }
 
 main,
 footer {
-    font-family:
-        "Geist",
-        -apple-system,
-        BlinkMacSystemFont,
-        "Roboto",
-        "Segoe UI",
-        sans-serif;
+    font-family: var(--font-content);
     font-size: 1.05rem;
     padding: 0;
     line-height: 160%;
     font-weight: 400;
-    font-feature-settings: "ss03" 1, "ss04" 1, "ss0h" 1, "ss06" 1, "ss07" 1, "ss08" 1, "ss09" 1;
-    font-variant-ligatures: discretionary-ligatures
-    font-variant-ligatures: common-ligatures;
 }
 
 main article,
@@ -55,7 +91,6 @@
 h1,
 h2,
 h3 {
-    font-family: "Instrument Serif", serif;
     font-weight: 400 !important;
 }
 
@@ -65,11 +100,10 @@ }
 
 main h1 {
     font-size: 30px;
-    padding: 10px 0 20px 0;
+    padding: 40px 0 20px 0;
 }
 
 main h2 {
-    font-size: 25px;
     color: var(--dark);
 }
 
@@ -81,11 +115,12 @@
 .logo img {
     max-height: 2.5rem;
     max-width: 2.5rem;
-    vertical-align: middle;
-    transform: translateY(-5%);
+    transform: translateY(-10%);
 }
 
 .logo {
+    flex-grow: 1;
+    margin-right: 1rem;
     text-decoration: none;
     border-bottom: unset;
     background: unset !important;
@@ -123,7 +158,7 @@ border-bottom: 1.5px solid var(--medium-gray);
 }
 
 a:hover {
-    border-bottom: 1.5px solid var(--gray);
+    border-bottom: 1.5px solid var(--cyan-trans);
 }
 
 .footer {
@@ -180,7 +215,7 @@ padding: 2px 0 20px 0;
     margin-top: 3px !important;
     margin-bottom: 5px;
     color: var(--gray);
-    font-style: italic;
+    line-height: 1.5;
 }
 
 .muted {
@@ -279,7 +314,13 @@ padding-left: 20px;
     border-left: 1.5px solid var(--medium-gray);
 }
 
+nav {
+  display: flex;
+  align-items: center;
+}
+
 nav ul {
+    flex-shrink: 1;
     padding: 0;
     margin: 0;
     list-style: none;

@@ -11,4 +11,5 @@ <meta charset="UTF-8" />
 <meta name="HandheldFriendly" content="true" />
 <link rel="icon" type="image/png" sizes="16x16" href="/favicon.png" />
 <meta name="theme-color" content="#ffffff" />
+<meta name="theme-color" content="#222222" media="(prefers-color-scheme: dark)" />
 <link href="https://h.icyphox.sh/u/icy" rel="me" />

@@ -1,6 +1,6 @@
 <nav>
+  <a href="/" class="logo"><img src=/static/white.svg></a>
   <ul>
-    <li><a href="/" class="logo"><img src=/static/white.svg></a><li>
     <li><a href="/blog">blog</a></li>
     <li><a href="/reading">reading</a></li>
     <li><a href="/uses">uses</a></li>