From 2520d5c009164f35c4aa7d2ac7539fbf3798886d Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <coryd@hey.com>
Date: Sun, 13 Aug 2023 13:54:32 -0700
Subject: [PATCH] feat: color + accessibility updates

---
 src/_includes/partials/footer.liquid      |  8 ++++----
 src/_includes/partials/header.liquid      |  2 +-
 src/_includes/partials/nav.liquid         |  4 ++--
 src/_includes/partials/now/albums.liquid  |  2 +-
 src/_includes/partials/now/artists.liquid |  2 +-
 src/_includes/partials/now/books.liquid   |  2 +-
 src/_includes/partials/now/movies.liquid  |  2 +-
 src/_includes/partials/now/tv.liquid      |  2 +-
 src/_includes/partials/paginator.liquid   |  4 ++--
 src/_includes/partials/webmentions.liquid | 10 +++++-----
 src/index.html                            |  2 +-
 src/now.html                              |  2 +-
 src/tagList.md                            |  4 ++--
 src/tags.md                               |  2 +-
 tailwind.config.js                        |  4 +---
 tailwind.css                              | 22 +++++++++++++++++-----
 16 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/src/_includes/partials/footer.liquid b/src/_includes/partials/footer.liquid
index 6f14f9e9..a75c580c 100644
--- a/src/_includes/partials/footer.liquid
+++ b/src/_includes/partials/footer.liquid
@@ -10,8 +10,8 @@
     {% render "icons/goodreads.liquid" %}
     {% render "icons/coffee.liquid" %}
   </div>
-  <p class="text-sm text-gray-500 dark:text-gray-100 pb-8 text-center">
-    <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-500 dark:text-gray-200 dark:hover:text-purple-500{% if page.url == '/referrals/' %} active{% endif %}" href="/referrals">Referrals</a>
-  </p>
+  <div class="text-sm text-gray-500 dark:text-gray-100 pb-8 text-center">
+    <a class="text-gray-700 dark:text-gray-200{% if page.url == '/uses/' %} active{% endif %}" href="/uses">Uses</a> •
+    <a class="text-gray-700  dark:text-gray-200{% if page.url == '/referrals/' %} active{% endif %}" href="/referrals">Referrals</a>
+  </div>
 </footer>
diff --git a/src/_includes/partials/header.liquid b/src/_includes/partials/header.liquid
index 54424e9b..d5a88d7a 100644
--- a/src/_includes/partials/header.liquid
+++ b/src/_includes/partials/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 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>
+    <a class="text-gray-700 dark:text-gray-200" href="/">{{ site.title }}</a>
   </h1>
   {% render "partials/nav.liquid", page: page %}
 </div>
\ No newline at end of file
diff --git a/src/_includes/partials/nav.liquid b/src/_includes/partials/nav.liquid
index 1aa78ee9..65b2c022 100644
--- a/src/_includes/partials/nav.liquid
+++ b/src/_includes/partials/nav.liquid
@@ -1,10 +1,10 @@
 <nav>
   <ul class="flex">
     <li class="mr-6">
-      <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>
+      <a class="text-gray-700 hover:text-pink-500 dark:text-gray-200 dark:hover:text-pink-500{% if page.url == '/now/' %} active{% endif %}" href="/now">Now</a>
     </li>
     <li class="mr-6">
-      <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>
+      <a class="text-gray-700 hover:text-pink-500 dark:text-gray-200 dark:hover:text-pink-500{% if page.url == '/about/' %} active{% endif %}" href="/about">About</a>
     </li>
     <li class="mr-6">
       {% render "icons/tags.liquid", page: page %}
diff --git a/src/_includes/partials/now/albums.liquid b/src/_includes/partials/now/albums.liquid
index 8775c892..ffc73e98 100644
--- a/src/_includes/partials/now/albums.liquid
+++ b/src/_includes/partials/now/albums.liquid
@@ -7,7 +7,7 @@
     {% for album in music %}
       <a href="{{ album.url }}" title="{{album.name | escape}} by {{ album.artist | escape }}">
         <div class="relative block h-full">
-          <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-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-pink-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-pink-500 ease-in-out duration-300"></div>
           <div class="absolute left-1 bottom-2 drop-shadow-md">
             <div class="px-1 text-xs font-bold text-white line-clamp-2">{{ album.name }}</div>
             <div class="px-1 text-xs text-white line-clamp-2">
diff --git a/src/_includes/partials/now/artists.liquid b/src/_includes/partials/now/artists.liquid
index 3610a358..44ac780f 100644
--- a/src/_includes/partials/now/artists.liquid
+++ b/src/_includes/partials/now/artists.liquid
@@ -7,7 +7,7 @@
     {% for artist in music %}
       <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-purple-400 dark:hover:border-purple-500"></div>
+          <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-pink-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-pink-500 ease-in-out duration-300"></div>
           <div class="absolute left-1 bottom-2 drop-shadow-md">
             <div class="px-1 text-xs font-bold text-white line-clamp-2">{{ artist.name }}</div>
             <div class="px-1 text-xs text-white">
diff --git a/src/_includes/partials/now/books.liquid b/src/_includes/partials/now/books.liquid
index bff0c571..9c4f58e7 100644
--- a/src/_includes/partials/now/books.liquid
+++ b/src/_includes/partials/now/books.liquid
@@ -7,7 +7,7 @@
     {% for book in books %}
       <a href="{{book.link}}" title="{{book.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 dark:border-purple-400 dark:hover:border-purple-500"></div>
+          <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-pink-500 dark:border-purple-400 dark:hover:border-pink-500 ease-in-out duration-300"></div>
           {%- capture bookImg %}{{book.image}}{% endcapture -%}
           {%- capture bookName %}{{book.title | escape}}{% endcapture -%}
           {% image bookImg, bookName, 'rounded-lg w-full h-full', '180px' %}
diff --git a/src/_includes/partials/now/movies.liquid b/src/_includes/partials/now/movies.liquid
index 5442a653..14660051 100644
--- a/src/_includes/partials/now/movies.liquid
+++ b/src/_includes/partials/now/movies.liquid
@@ -7,7 +7,7 @@
     {% 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-purple-400 dark:hover:border-purple-500"></div>
+          <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-pink-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-pink-500 ease-in-out duration-300"></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>
diff --git a/src/_includes/partials/now/tv.liquid b/src/_includes/partials/now/tv.liquid
index 4116fee7..32ff69bc 100644
--- a/src/_includes/partials/now/tv.liquid
+++ b/src/_includes/partials/now/tv.liquid
@@ -7,7 +7,7 @@
     {% 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-purple-400 dark:hover:border-purple-500"></div>
+          <div class="absolute left-0 top-0 h-full w-full rounded-lg border border-purple-600 hover:border-pink-500 bg-cover-gradient dark:border-purple-400 dark:hover:border-pink-500 ease-in-out duration-300"></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/partials/paginator.liquid b/src/_includes/partials/paginator.liquid
index 18c9c16a..71aeb73b 100644
--- a/src/_includes/partials/paginator.liquid
+++ b/src/_includes/partials/paginator.liquid
@@ -1,7 +1,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 dark:text-purple-400 text-purple-600 hover:text-purple-500 dark:hover:text-purple-500" aria-label="Previous page icon--20">
+      <button class="py-2 pr-4 dark:text-purple-400 text-purple-600" aria-label="Previous page icon--20">
         {% tablericon "arrow-left" "Previous" %}
       </button>
     </a>
@@ -18,7 +18,7 @@
   </div>
   {% if pagination.href.next %}
     <a href="{{ pagination.href.next }}">
-      <button class="py-2 pl-4 dark:text-purple-400 text-purple-600 hover:text-purple-500 dark:hover:text-purple-500 icon--20" aria-label="Next page">
+      <button class="py-2 pl-4 dark:text-purple-400 text-purple-600 icon--20" aria-label="Next page">
         {% tablericon "arrow-right" "Next" %}
       </button>
     </a>
diff --git a/src/_includes/partials/webmentions.liquid b/src/_includes/partials/webmentions.liquid
index 4676b34b..f7152b2d 100644
--- a/src/_includes/partials/webmentions.liquid
+++ b/src/_includes/partials/webmentions.liquid
@@ -8,7 +8,7 @@
           {% for mention in mentions['repost-of'] %}
             <li class="-ml-3 inline">
               <a 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 hover:border-purple-500 dark:hover:border-purple-400', '56px' %}
+                {% 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 hover:border-pink-500 dark:hover:border-pink-500', '56px' %}
               </a>
             </li>
           {% endfor %}
@@ -22,7 +22,7 @@
           {% for mention in mentions['like-of'] %}
             <li class="-ml-3 inline">
               <a 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 hover:border-purple-500 dark:hover:border-purple-400', '56px' %}
+                {% 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 ease-in-out duration-300 hover:border-pink-500 dark:hover:border-pink-500', '56px' %}
               </a>
             </li>
           {% endfor %}
@@ -35,10 +35,10 @@
         {% 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="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' %}
+              {% 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 ease-in-out duration-300 group-hover:border-pink-500 dark:group-hover:border-pink-500', '56px' %}
               <div class="ml-3">
-                <p class="text-sm group-hover:text-purple-500 dark:group-hover:text-purple-400">{{ mention.content.text }}</p>
-                <p class="mt-1 text-xs group-hover:text-purple-500 dark:group-hover:text-purple-400">{{ mention.published | isoDateOnly }}</p>
+                <p class="text-sm group-hover:text-pink-500 dark:group-hover:text-pink-500">{{ mention.content.text }}</p>
+                <p class="mt-1 text-xs group-hover:text-pink-500 dark:group-hover:text-pink-500">{{ mention.published | isoDateOnly }}</p>
               </div>
             </a>
           </div>
diff --git a/src/index.html b/src/index.html
index e13283af..23707673 100644
--- a/src/index.html
+++ b/src/index.html
@@ -29,7 +29,7 @@ meta:
   >
     <a class="no-underline" href="{{ post.url }}">
       <h2
-        class="p-name m-0 text-xl font-black leading-tight tracking-normal hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400 md:text-2xl"
+        class="p-name m-0 text-xl font-black leading-tight tracking-normal hover:text-pink-500 dark:text-gray-200 dark:hover:text-pink-500 md:text-2xl ease-in-out duration-300"
       >
         {{ post.data.title }}
       </h2>
diff --git a/src/now.html b/src/now.html
index d394bc37..a6cbd545 100644
--- a/src/now.html
+++ b/src/now.html
@@ -52,6 +52,6 @@ meta:
   </p>
   <p class="my-2 flex flex-row items-start md:items-center">
     <span class="pt-1 md:pt-0 mr-1 icon--20">{% tablericon "hand-stop" "Ad and tracker-blocking" %}</span>
-    <a href="https://github.com/cdransf/awesome-adblock">Assembling lists of ad and tracker-blocking tools.</a>
+    Assembling lists of <a href="https://github.com/cdransf/awesome-adblock">ad and tracker-blocking tools</a>.
   </p>
 </div>
\ No newline at end of file
diff --git a/src/tagList.md b/src/tagList.md
index 9f3f4de4..d1976ba1 100644
--- a/src/tagList.md
+++ b/src/tagList.md
@@ -12,7 +12,7 @@ templateEngineOverride: liquid,md
 {% assign posts = collections[tag] | reverse %}
 {% for post in posts %}
 <div class="mb-8 border-b border-gray-200 pb-4 dark:border-gray-700">
-  <a class="no-underline" href="{{ post.url }}">
+  <a class="!no-underline" href="{{ post.url }}">
     <h2
       class="m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl"
     >
@@ -28,7 +28,7 @@ templateEngineOverride: liquid,md
   <p class="p-summary mt-0">{{ post.data.post_excerpt | markdown }}</p>
   {% endif %}
   <div class="mt-4 flex items-center justify-between">
-    <a class="flex-none font-normal no-underline" href="{{ post.url }}">Read more &rarr;</a>
+    <a class="flex-none font-normal !no-underline" href="{{ post.url }}">Read more &rarr;</a>
   </div>
 </div>
 {% endfor %}
diff --git a/src/tags.md b/src/tags.md
index b6396e68..7ecf5d9e 100644
--- a/src/tags.md
+++ b/src/tags.md
@@ -21,7 +21,7 @@ meta:
 {% for tag in collections.tagList %}
 
 <span>
-  <a href="/tags/{{ tag }}" class="no-underline">
+  <a href="/tags/{{ tag }}" class="!no-underline">
     <button class="tag--button">
       {{ tag }}
     </button>
diff --git a/tailwind.config.js b/tailwind.config.js
index 88bc47fd..9c66898c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -27,9 +27,7 @@ module.exports = {
   plugins: [
     require('@tailwindcss/typography'),
     require('@tailwindcss/line-clamp'),
-    require('@catppuccin/tailwindcss', {
-      defaultFlavour: 'mocha',
-    }),
+    require('@catppuccin/tailwindcss'),
     require('@tailwindcss/aspect-ratio'),
   ],
   content: ['./src/**/*.md', './src/**/*.html', './src/_includes/**/*.liquid'],
diff --git a/tailwind.css b/tailwind.css
index f9fee118..8d407284 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -42,6 +42,8 @@ h2 > a.header-anchor {
 a,
 .prose a {
   color: theme(colors.purple.600);
+  @apply ease-in-out;
+  @apply duration-300;
 }
 
 a:hover,
@@ -50,7 +52,13 @@ a:active,
 .prose a:hover,
 .prose a:focus,
 .prose a:active {
-  color: theme(colors.purple.500);
+  color: theme(colors.pink.500);
+}
+
+p > a,
+span > a,
+blockquote > a {
+  text-decoration: underline !important;
 }
 
 code {
@@ -76,6 +84,8 @@ pre {
   @apply mb-4;
   @apply rounded-full;
   @apply text-white;
+  @apply ease-in-out;
+  @apply duration-300;
   background: theme(colors.purple.600);
 }
 
@@ -96,7 +106,7 @@ pre {
 .tag--button:hover,
 .tag--button:active,
 .tag--button:focus {
-  background: theme(colors.purple.500);
+  background: theme(colors.pink.500);
 }
 
 code[class*=language-], pre[class*=language-] {
@@ -133,11 +143,13 @@ code[class*=language-], pre[class*=language-] {
 }
 
 .link--icon > svg {
-  color: theme(colors.gray.700)
+  color: theme(colors.gray.700);
+  @apply ease-in-out;
+  @apply duration-300;
 }
 
 .link--icon:hover > svg {
-  color: theme(colors.purple.500)
+  color: theme(colors.pink.500)
 }
 
 @media (prefers-color-scheme: dark) {
@@ -156,6 +168,6 @@ code[class*=language-], pre[class*=language-] {
   }
 
   .link--icon:hover svg {
-    color: theme(colors.purple.500)
+    color: theme(colors.pink.500)
   }
 }
\ No newline at end of file