From 8c3fe2346aa8e12d617ec3284dd818b276b09691 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <hi@coryd.dev>
Date: Wed, 31 May 2023 12:59:01 -0700
Subject: [PATCH] chore: improve contrast in dark mode

---
 src/_includes/base.liquid               |  1 -
 src/_includes/footer.liquid             |  4 +-
 src/_includes/header.liquid             |  4 +-
 src/_includes/icons/coffee.liquid       |  2 +-
 src/_includes/icons/github.liquid       |  2 +-
 src/_includes/icons/lastfm.liquid       |  2 +-
 src/_includes/icons/letterboxd.liquid   |  2 +-
 src/_includes/icons/mastodon.liquid     |  2 +-
 src/_includes/icons/musicbrainz.liquid  |  2 +-
 src/_includes/icons/oku.liquid          |  2 +-
 src/_includes/icons/pinboard.liquid     |  2 +-
 src/_includes/icons/proton.liquid       |  2 +-
 src/_includes/icons/rss.liquid          |  2 +-
 src/_includes/icons/tags.liquid         |  2 +-
 src/_includes/icons/toggle-theme.liquid |  4 +-
 src/_includes/icons/trakt.liquid        |  2 +-
 src/_includes/nav.liquid                |  4 +-
 src/_includes/now-topper.liquid         | 16 ++++--
 src/_includes/now.liquid                |  8 +--
 src/_includes/paginator.liquid          |  6 +-
 src/_includes/webmentions.liquid        |  2 +-
 src/assets/styles/index.css             | 11 ----
 src/tags.md                             |  2 +-
 tailwind.config.js                      | 23 --------
 tailwind.css                            | 76 ++++++++++++++++++++++++-
 25 files changed, 113 insertions(+), 72 deletions(-)
 delete mode 100644 src/assets/styles/index.css

diff --git a/src/_includes/base.liquid b/src/_includes/base.liquid
index 1db60dc4..0b2d9e3b 100644
--- a/src/_includes/base.liquid
+++ b/src/_includes/base.liquid
@@ -31,7 +31,6 @@
     <link href="/assets/styles/tailwind.css?v={% version %}" rel="stylesheet" />
     {% capture css %}
       {% include "../assets/styles/prism.css" %}
-      {% include "../assets/styles/index.css" %}
     {% endcapture %}
     <style>
       {{ css | cssmin }}
diff --git a/src/_includes/footer.liquid b/src/_includes/footer.liquid
index 53473fdc..fc6a19a0 100644
--- a/src/_includes/footer.liquid
+++ b/src/_includes/footer.liquid
@@ -11,8 +11,8 @@
     {% include "icons/oku.liquid" %}
   </div>
   <p class="text-sm text-gray-500 dark:text-gray-100 text-center pb-8">
-    <a class="text-gray-700 hover:text-purple-400 dark:text-gray-200{% if page.url == '/uses/' %} active{% endif %}" href="/uses">Uses</a>
+    <a class="text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500{% if page.url == '/uses/' %} active{% endif %}" href="/uses">Uses</a>
     •
-    <a class="text-gray-700 hover:text-purple-400 dark:text-gray-200{% if page.url == '/referrals/' %} active{% endif %}" href="/referrals">Referrals</a>
+    <a class="text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500{% if page.url == '/referrals/' %} active{% endif %}" href="/referrals">Referrals</a>
     • Cory Dransfeldt • © {{ "now" | date: "%Y" }}</p>
 </footer>
diff --git a/src/_includes/header.liquid b/src/_includes/header.liquid
index 5c3be2bd..816f33b2 100644
--- a/src/_includes/header.liquid
+++ b/src/_includes/header.liquid
@@ -1,6 +1,6 @@
 <div class="flex flex-col md:flex-row md:items-center md:justify-between pt-5 md:pt-10">
-  <h1 class="text-2xl md:text-3xl font-black leading-tight hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 pb-5 md:pb-0">
-    <a href="/">{{ site.title }}</a>
+  <h1 class="text-2xl md:text-3xl font-black leading-tight pb-5 md:pb-0">
+    <a class="text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500" href="/">{{ site.title }}</a>
   </h1>
   {% include "nav.liquid" %}
 </div>
\ No newline at end of file
diff --git a/src/_includes/icons/coffee.liquid b/src/_includes/icons/coffee.liquid
index 86d60fa6..755f50d8 100644
--- a/src/_includes/icons/coffee.liquid
+++ b/src/_includes/icons/coffee.liquid
@@ -5,7 +5,7 @@
     rel="me"
     title="Buy Me a Coffee">
     <svg
-      class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
+      class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500"
       role="img"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg">
diff --git a/src/_includes/icons/github.liquid b/src/_includes/icons/github.liquid
index 003c7ae2..c100b0ca 100644
--- a/src/_includes/icons/github.liquid
+++ b/src/_includes/icons/github.liquid
@@ -4,7 +4,7 @@
     rel="me"
     title="GitHub">
     <svg
-      class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
+      class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500"
       role="img"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg">
diff --git a/src/_includes/icons/lastfm.liquid b/src/_includes/icons/lastfm.liquid
index b831425b..be4508a5 100644
--- a/src/_includes/icons/lastfm.liquid
+++ b/src/_includes/icons/lastfm.liquid
@@ -4,7 +4,7 @@
     rel="me"
     title="Last.fm">
     <svg
-      class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
+      class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500"
       role="img"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg">
diff --git a/src/_includes/icons/letterboxd.liquid b/src/_includes/icons/letterboxd.liquid
index fd5f478a..4caf7b5c 100644
--- a/src/_includes/icons/letterboxd.liquid
+++ b/src/_includes/icons/letterboxd.liquid
@@ -4,7 +4,7 @@
     rel="me"
     title="Letterboxd">
     <svg
-      class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
+      class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500"
       role="img"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg">
diff --git a/src/_includes/icons/mastodon.liquid b/src/_includes/icons/mastodon.liquid
index 2e253793..1451d98a 100644
--- a/src/_includes/icons/mastodon.liquid
+++ b/src/_includes/icons/mastodon.liquid
@@ -4,7 +4,7 @@
     rel="me"
     title="Mastodon">
     <svg
-      class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
+      class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500"
       role="img"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg">
diff --git a/src/_includes/icons/musicbrainz.liquid b/src/_includes/icons/musicbrainz.liquid
index f5a30806..5a761b74 100644
--- a/src/_includes/icons/musicbrainz.liquid
+++ b/src/_includes/icons/musicbrainz.liquid
@@ -4,7 +4,7 @@
     rel="me"
     title="ListenBrainz">
     <svg
-      class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
+      class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500"
       role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>ListenBrainz</title>
       <path
         d="M11.582 0L1.418 5.832v12.336L11.582 24V10.01L7.1 12.668v3.664c.01.111.01.225 0 .336-.103.435-.54.804-1 1.111-.802.537-1.752.509-2.166-.111-.413-.62-.141-1.631.666-2.168.384-.28.863-.399 1.334-.332V6.619c0-.154.134-.252.226-.308L11.582 3zm.836 0v6.162c.574.03 1.14.16 1.668.387a2.225 2.225 0 0 0 1.656-.717 1.02 1.02 0 1 1 1.832-.803l.004.006a1.022 1.022 0 0 1-1.295 1.197c-.34.403-.792.698-1.297.85.34.263.641.576.891.928a1.04 1.04 0 0 1 .777.125c.768.486.568 1.657-.318 1.857-.886.2-1.574-.77-1.09-1.539.02-.03.042-.06.065-.09a3.598 3.598 0 0 0-1.436-1.166 4.142 4.142 0 0 0-1.457-.369v4.01c.855.06 1.256.493 1.555.834.227.256.356.39.578.402.323.018.568.008.806 0a5.44 5.44 0 0 1 .895.022c.94-.017 1.272-.226 1.605-.446a2.533 2.533 0 0 1 1.131-.463 1.027 1.027 0 0 1 .12-.263 1.04 1.04 0 0 1 .105-.137c.023-.025.047-.044.07-.066a4.775 4.775 0 0 1 0-2.405l-.012-.01a1.02 1.02 0 1 1 .692.272h-.057a4.288 4.288 0 0 0 0 1.877h.063a1.02 1.02 0 1 1-.545 1.883l-.047-.033a1 1 0 0 1-.352-.442 1.885 1.885 0 0 0-.814.354 3.03 3.03 0 0 1-.703.365c.757.555 1.772 1.6 2.199 2.299a1.03 1.03 0 0 1 .256-.033 1.02 1.02 0 1 1-.545 1.88l-.047-.03a1.017 1.017 0 0 1-.27-1.376.72.72 0 0 1 .051-.072c-.445-.775-2.026-2.28-2.46-2.387a4.037 4.037 0 0 0-1.31-.117c-.24.008-.513.018-.866 0-.515-.027-.783-.333-1.043-.629-.26-.296-.51-.56-1.055-.611V18.5a1.877 1.877 0 0 0 .426-.135.333.333 0 0 1 .058-.027c.56-.267 1.421-.91 2.096-2.447a1.02 1.02 0 0 1-.27-1.344 1.02 1.02 0 1 1 .915 1.54 6.273 6.273 0 0 1-1.432 2.136 1.785 1.785 0 0 1 .691.306.667.667 0 0 0 .37.168 3.31 3.31 0 0 0 .888-.222 1.02 1.02 0 0 1 1.787-.79v-.005a1.02 1.02 0 0 1-.773 1.683 1.022 1.022 0 0 1-.719-.287 3.935 3.935 0 0 1-1.168.287h-.05a1.313 1.313 0 0 1-.71-.275c-.262-.177-.51-.345-1.402-.12a2.098 2.098 0 0 1-.707.2V24l10.164-5.832V5.832zm4.154 4.904a.352.352 0 0 0-.197.639l.018.01c.163.1.378.053.484-.108v-.002a.352.352 0 0 0-.303-.539zm-4.99 1.928L7.082 9.5v2l4.5-2.668zm8.385.38a.352.352 0 0 0-.295.165v.002a.35.35 0 0 0 .096.473l.013.01a.357.357 0 0 0 .487-.108.352.352 0 0 0-.301-.541zM16.09 8.647a.352.352 0 0 0-.277.163.355.355 0 0 0 .296.54c.482 0 .463-.73-.02-.703zm3.877 2.477a.352.352 0 0 0-.295.164.35.35 0 0 0 .094.475l.015.01a.357.357 0 0 0 .485-.11.352.352 0 0 0-.3-.539zm-4.375 3.594a.352.352 0 0 0-.291.172.35.35 0 0 0-.04.265.352.352 0 1 0 .33-.437zm4.375.789a.352.352 0 0 0-.295.164v.002a.352.352 0 0 0 .094.473l.015.01a.357.357 0 0 0 .485-.108.352.352 0 0 0-.3-.54zm-2.803 2.488v.002a.347.347 0 0 0-.223.084.352.352 0 0 0 .23.62.347.347 0 0 0 .23-.085.348.348 0 0 0 .12-.24.353.353 0 0 0-.35-.38.347.347 0 0 0-.007 0Z"/>
diff --git a/src/_includes/icons/oku.liquid b/src/_includes/icons/oku.liquid
index 7a055a8a..9c6b62e5 100644
--- a/src/_includes/icons/oku.liquid
+++ b/src/_includes/icons/oku.liquid
@@ -4,7 +4,7 @@
     rel="me"
     title="Oku">
     <svg
-      class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
+      class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500"
       viewBox="0 0 500 500"
       xmlns="http://www.w3.org/2000/svg">
       <path d="M 500 183.794 L 500 248.024 C 442.688 248.024 387.352 270.751 346.838 310.277 C 314.229 342.885 292.49 383.399 285.573 427.866 L 500 427.866 L 500 493.083 L 0 493.083 L 0 427.866 L 215.415 427.866 C 208.498 383.399 186.759 341.897 154.15 309.289 C 113.636 269.763 58.3 247.036 0 247.036 L 0 181.818 C 51.383 181.818 102.767 195.652 146.245 222.332 C 190.711 248.024 226.285 285.573 250.988 331.028 C 274.704 286.561 310.277 249.012 354.743 223.32 C 398.221 196.64 448.617 183.794 500 183.794 Z M 169.96 85.968 C 169.96 42.49 205.534 6.917 250 6.917 C 294.466 6.917 330.04 42.49 330.04 85.968 C 330.04 129.447 294.466 164.032 250 164.032 C 205.534 164.032 169.96 129.447 169.96 85.968 Z M 169.96 85.968" />
diff --git a/src/_includes/icons/pinboard.liquid b/src/_includes/icons/pinboard.liquid
index 5e8e18f3..960081f0 100644
--- a/src/_includes/icons/pinboard.liquid
+++ b/src/_includes/icons/pinboard.liquid
@@ -4,7 +4,7 @@
     rel="me"
     title="Pinboard">
     <svg
-      class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
+      class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500"
       role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Pinboard</title>
       <path
         d="M13.352 14.585l-4.509 4.614.72-4.062L3.428 7.57 0 7.753 7.58 0v2.953l7.214 6.646 4.513-1.105-4.689 4.982L24 24l-10.648-9.415z"/>
diff --git a/src/_includes/icons/proton.liquid b/src/_includes/icons/proton.liquid
index fabbd3fd..b3cd1a4e 100644
--- a/src/_includes/icons/proton.liquid
+++ b/src/_includes/icons/proton.liquid
@@ -4,7 +4,7 @@
     rel="me"
     title="Proton Mail">
     <svg
-      class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
+      class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500"
       role="img"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg">
diff --git a/src/_includes/icons/rss.liquid b/src/_includes/icons/rss.liquid
index dcfe2295..6a6e74b8 100644
--- a/src/_includes/icons/rss.liquid
+++ b/src/_includes/icons/rss.liquid
@@ -1,6 +1,6 @@
 <a href="/feeds" title="RSS">
   <svg
-    class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
+    class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500{% if page.url == '/feeds/' %} active{% endif %}"
     role="img"
     viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg">
diff --git a/src/_includes/icons/tags.liquid b/src/_includes/icons/tags.liquid
index 3ce0d0e9..c6822bf8 100644
--- a/src/_includes/icons/tags.liquid
+++ b/src/_includes/icons/tags.liquid
@@ -1,6 +1,6 @@
 <a href="/tags" title="Post tags">
   <svg
-    class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
+    class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500{% if page.url == '/tags/' %} active{% endif %}"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     fill="currentColor"
diff --git a/src/_includes/icons/toggle-theme.liquid b/src/_includes/icons/toggle-theme.liquid
index 27d2ddef..960cc34c 100644
--- a/src/_includes/icons/toggle-theme.liquid
+++ b/src/_includes/icons/toggle-theme.liquid
@@ -1,6 +1,6 @@
 <div id="toggleDarkMode" class="cursor-pointer">
   <svg
-    class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 toggle-light"
+    class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500 toggle-light"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     fill="currentColor"
@@ -8,7 +8,7 @@
     <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" />
   </svg>
   <svg
-    class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400 toggle-dark"
+    class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500 toggle-dark"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     fill="currentColor"
diff --git a/src/_includes/icons/trakt.liquid b/src/_includes/icons/trakt.liquid
index 86fcf402..38ca6cdf 100644
--- a/src/_includes/icons/trakt.liquid
+++ b/src/_includes/icons/trakt.liquid
@@ -4,7 +4,7 @@
     rel="me"
     title="Trakt">
     <svg
-      class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400"
+      class="inline w-6 h-6 fill-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500"
       role="img"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg">
diff --git a/src/_includes/nav.liquid b/src/_includes/nav.liquid
index ded2eac5..8f49f00f 100644
--- a/src/_includes/nav.liquid
+++ b/src/_includes/nav.liquid
@@ -1,10 +1,10 @@
 <nav>
   <ul class="flex">
     <li class="mr-6">
-      <a class="text-gray-700 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400{% if page.url == '/now/' %} active{% endif %}" href="/now">Now</a>
+      <a class="text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500{% if page.url == '/now/' %} active{% endif %}" href="/now">Now</a>
     </li>
     <li class="mr-6">
-      <a class="text-gray-700 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400{% if page.url == '/about/' %} active{% endif %}" href="/about">About</a>
+      <a class="text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-500{% if page.url == '/about/' %} active{% endif %}" href="/about">About</a>
     </li>
     <li class="mr-6">
       {% include "icons/coffee.liquid" %}
diff --git a/src/_includes/now-topper.liquid b/src/_includes/now-topper.liquid
index c47ff4d6..c622fb52 100644
--- a/src/_includes/now-topper.liquid
+++ b/src/_includes/now-topper.liquid
@@ -1,7 +1,11 @@
-<div class="border-b border-gray-200 pb-8 dark:border-gray-700 mb-8 pb-8 dark:text-white text-gray-800">
-  <a class="no-underline" href="/now">
-    <h2 class="m-0 text-xl font-black leading-tight tracking-normal md:text-2xl text-purple-600 hover:text-purple-500 dark:hover:text-purple-400 mb-4">Now</h2>
-  </a>
-  <p>I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 4 rescue dogs, technology, automation, music, writing, reading and tv and movies.</p>
-  <p class="mb-0">{{ status.emoji }} {{ status.content }}</p>
+<div class="border-b border-gray-200 dark:border-gray-700 mb-8 pb-8">
+  <h2 class="m-0 mb-4 inline">
+    <a class="text-gray-700 dark:text-gray-200 text-xl font-black leading-tight tracking-normal md:text-2xl no-underline not-prose" href="/now">
+      Now
+    </a>
+  </h2>
+  <div class="dark:text-white text-gray-800">
+    <p>I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 4 rescue dogs, technology, automation, music, writing, reading and tv and movies.</p>
+    <p class="mb-0">{{ status.emoji }} {{ status.content }}</p>
+  </div>
 </div>
diff --git a/src/_includes/now.liquid b/src/_includes/now.liquid
index b88a2eac..6e232f2e 100644
--- a/src/_includes/now.liquid
+++ b/src/_includes/now.liquid
@@ -48,7 +48,7 @@ layout: main
         {% for artist in artists %}
           <a href="{{artist.url}}" title="{{artist.name | escape}}">
             <div class="relative block">
-              <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-gray-500 dark:hover:border-purple-400"></div>
+              <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-purple-500"></div>
               <div class="absolute left-1 bottom-2 drop-shadow-md">
                 <div class="px-1 text-xs font-bold text-white">{{ artist.name }}</div>
                 <div class="px-1 text-xs text-white">
@@ -73,7 +73,7 @@ layout: main
         {% for album in albums %}
           <a href="{{album.url}}" title="{{album.name | escape}}">
             <div class="relative block">
-              <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-gray-500 dark:hover:border-purple-400"></div>
+              <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-purple-500"></div>
               <div class="absolute left-1 bottom-2 drop-shadow-md">
                 <div class="px-1 text-xs font-bold text-white">{{ album.name }}</div>
                 <div class="px-1 text-xs text-white">
@@ -130,7 +130,7 @@ layout: main
         {% for movie in movies %}
           <a href="{{movie.link}}" title="{{movie.title | escape}}">
             <div class="relative block" style="max-width:226px">
-              <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-gray-500 dark:hover:border-purple-400"></div>
+              <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-purple-500"></div>
               <div class="absolute left-1 bottom-2 drop-shadow-md">
                 <div class="px-1 text-xs font-bold text-white">{{ movie.title }}</div>
               </div>
@@ -152,7 +152,7 @@ layout: main
         {% for episode in tv %}
           <a href="https://trakt.tv/shows/{{episode.show.ids.slug}}/seasons/{{ episode.episode.season }}/episodes/{{ episode.episode.number }}" title="{{ episode.episode.title | escape}} {{ episode.show.title | escape }}">
             <div class="relative block" style="max-width:226px">
-              <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-gray-500 dark:hover:border-purple-400"></div>
+              <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-purple-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-purple-500"></div>
               <div class="absolute left-1 bottom-2 drop-shadow-md">
                 <div class="px-1 text-xs font-bold text-white">{{ episode.episode.title }}</div>
                 <div class="px-1 text-xs text-white">
diff --git a/src/_includes/paginator.liquid b/src/_includes/paginator.liquid
index 9fce3e62..377a6786 100644
--- a/src/_includes/paginator.liquid
+++ b/src/_includes/paginator.liquid
@@ -2,7 +2,7 @@
 <nav class="flex justify-between mt-8 items-center">
   {% if pagination.href.previous %}
     <a href="{{ pagination.href.previous }}">
-      <button class="py-2 pr-4 text-purple-600 hover:text-purple-500 dark:hover:text-purple-400" aria-label="Previous page">
+      <button class="py-2 pr-4 dark:text-purple-400 text-purple-600 hover:text-purple-500 dark:hover:text-purple-500" aria-label="Previous page">
         {% heroicon "solid" "arrow-left" "Previous" "width=20 height=20" %}
       </button>
     </a>
@@ -18,7 +18,7 @@
   <div class="flex flex-row items-center">
     <select
       id="pagination"
-      class="block cursor-pointer w-12 h-12 rounded-full text-white dark:text-gray-900 bg-purple-600 hover:bg-purple-500 dark:hover:bg-purple-400 mr-1 focus-visible:outline-none focus-visible:bg-purple-400 appearance-none text-center"
+      class="block cursor-pointer w-12 h-12 rounded-full text-white dark:text-gray-900 dark:bg-purple-400 bg-purple-600 hover:bg-purple-500 dark:hover:bg-purple-500 mr-1 focus-visible:outline-none focus-visible:bg-purple-400 appearance-none text-center"
       style="text-align-last:center">
       {% for pageEntry in pagination.pages %}
         <option {% if page.url == pagination.hrefs[forloop.index0] %}selected{% endif %} value="{{ forloop.index }}">{{ forloop.index }}</option>
@@ -31,7 +31,7 @@
 
   {% if pagination.href.next %}
     <a href="{{ pagination.href.next }}">
-      <button class="py-2 pl-4 text-purple-600 hover:text-purple-500 dark:hover:text-purple-400" aria-label="Next page">
+      <button class="py-2 pl-4 dark:text-purple-400 text-purple-600 hover:text-purple-500 dark:hover:text-purple-500" aria-label="Next page">
         {% heroicon "solid" "arrow-right" "Next" "width=20 height=20" %}
       </button>
     </a>
diff --git a/src/_includes/webmentions.liquid b/src/_includes/webmentions.liquid
index 786574cd..4676b34b 100644
--- a/src/_includes/webmentions.liquid
+++ b/src/_includes/webmentions.liquid
@@ -34,7 +34,7 @@
       <div class="mt-4 flex flex-col items-center not-prose">
         {% for mention in mentions['in-reply-to'] %}
           <div class="border-bottom flex flex-row items-center border-gray-100 pb-4 w-full">
-            <a class="group flex flex-row space-between items-center" href={{mention.url}}>
+            <a class="text-gray-700 dark:text-gray-200 group flex flex-row space-between items-center" href={{mention.url}}>
               {% image mention.author.photo, mention.author.name, 'bg-gray-900 dark:bg-white h-14 w-14 rounded-full border-4 border-white dark:border-gray-900 transition-all group-hover:border-purple-500 dark:group-hover:border-purple-400', '56px' %}
               <div class="ml-3">
                 <p class="text-sm group-hover:text-purple-500 dark:group-hover:text-purple-400">{{ mention.content.text }}</p>
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
deleted file mode 100644
index 832d0e60..00000000
--- a/src/assets/styles/index.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.header-anchor {
-  text-decoration: none !important;
-}
-
-h1 > a.header-anchor {
-  font-weight: 800;
-}
-
-h2 > a.header-anchor {
-  font-weight: 700;
-}
diff --git a/src/tags.md b/src/tags.md
index 11927834..b6396e68 100644
--- a/src/tags.md
+++ b/src/tags.md
@@ -22,7 +22,7 @@ meta:
 
 <span>
   <a href="/tags/{{ tag }}" class="no-underline">
-    <button class="font-semibold py-2 px-4 mr-4 mb-4 rounded-full text-white dark:text-gray-900 bg-purple-600 hover:bg-purple-500 dark:hover:bg-purple-400">
+    <button class="tag--button">
       {{ tag }}
     </button>
   </a>
diff --git a/tailwind.config.js b/tailwind.config.js
index ba95cfc5..8f2f9212 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,29 +20,6 @@ module.exports = {
         'cover-gradient':
           'linear-gradient(180deg,transparent 0,rgba(0,0,0,.15) 70%,rgba(0,0,0,.5))',
       },
-      typography: (theme) => ({
-        DEFAULT: {
-          css: {
-            a: {
-              color: theme('colors.purple.600'),
-              '&:hover': {
-                color: `${theme('colors.purple.500')} !important`,
-              },
-              code: { color: theme('colors.purple.500') },
-            },
-            pre: {
-              backgroundColor: theme('colors.gray.900'),
-              border: `1px solid ${theme('colors.gray.700')}`,
-            },
-            code: {
-              color: `${theme('colors.gray.50')} !important`,
-              backgroundColor: theme('colors.gray.900'),
-              borderRadius: '0.25rem',
-              padding: '0.25rem',
-            },
-          },
-        },
-      }),
     },
   },
   corePlugins: {
diff --git a/tailwind.css b/tailwind.css
index 8d94d89f..5862be52 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -35,11 +35,83 @@
 }
 
 .active {
-  @apply text-purple-600 !important;
+  color: theme(colors.purple.600) !important;
+}
+
+.dark .active {
+  color: theme(colors.purple.400) !important;
 }
 
 .active:hover,
 .active:active,
 .active:focus {
-  @apply text-purple-500 !important;
+  color: theme(colors.purple.500) !important;
 }
+
+.header-anchor {
+  text-decoration: none !important;
+}
+
+h1 > a.header-anchor {
+  font-weight: 800;
+}
+
+h2 > a.header-anchor {
+  font-weight: 700;
+}
+
+a,
+.prose a {
+  color: theme(colors.purple.600);
+}
+
+.dark a,
+.dark .prose a {
+  color: theme(colors.purple.400);
+}
+
+a:hover,
+a:focus,
+a:active,
+.prose a:hover,
+.prose a:focus,
+.prose a:active {
+  color: theme(colors.purple.500);
+}
+
+code {
+  @apply text-gray-50;
+  border-radius: .25rem;
+  padding: .25rem;
+}
+
+pre {
+  border: 1px solid theme(colors.gray.700);
+}
+
+.dark code,
+.dark pre {
+  @apply bg-gray-900;
+}
+
+.tag--button {
+  @apply font-semibold;
+  @apply py-2;
+  @apply px-4;
+  @apply mr-4;
+  @apply mb-4;
+  @apply rounded-full;
+  @apply text-white;
+  background: theme(colors.purple.600);
+}
+
+.dark .tag--button {
+  color: theme(colors.gray.900);
+  background: theme(colors.purple.400);
+}
+
+.tag--button:hover,
+.tag--button:active,
+.tag--button:focus {
+  background: theme(colors.purple.500);
+}
\ No newline at end of file