From 7600335b4d2a823b527222307afd2c45fd528870 Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Sat, 2 Nov 2024 03:53:43 -0700
Subject: [PATCH] style: change colorscheme to rose-pine, change link style

---
 src/css/default.css        |  8 ++++----
 src/templates/default.html | 12 ++++++------
 tailwind.config.js         | 36 +++++++++++++++++++++++++++---------
 3 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/css/default.css b/src/css/default.css
index 286d7c9..8660a13 100644
--- a/src/css/default.css
+++ b/src/css/default.css
@@ -13,12 +13,12 @@
 
 @layer utilities {
   .external-link {
-    @apply dark:text-violet-500 text-indigo-600 hover:bg-indigo-200 pr-3 rounded-sm dark:hover:bg-violet-950 transition-colors duration-300 relative;
+    @apply underline decoration-solid decoration-2 underline-offset-2 hover:text-love-light dark:hover:text-love-dark decoration-love-light decoration-love-dark;
   }
-  .external-link::after {
-    @apply absolute top-1 right-[6px] w-2 h-2 border-2 border-indigo-600 dark:border-violet-600 rounded-full translate-x-1/2 -translate-y-1/2;
-    content: "";
+  .external-link-muted {
+    @apply underline decoration-solid decoration-2 underline-offset-2 hover:text-love-light dark:hover:text-love-dark decoration-accent-light decoration-accent-dark;
   }
+
   .small-caps {
     font-variant: all-small-caps;
   }
diff --git a/src/templates/default.html b/src/templates/default.html
index 45f53ad..c665dd1 100644
--- a/src/templates/default.html
+++ b/src/templates/default.html
@@ -126,18 +126,18 @@
       <p class="mt-8 mb-3 px-1 italic font-light">
         a web-log about computers, math, hacks, and all the rest.
       </p>
-      <a class="text-sm external-link" href="https://youwen.dev"
+      <a class="text-sm text-iris-light dark:text-iris-dark hover:text-love-light dark:hover:text-love-dark" href="https://youwen.dev"
         ><em>by </em>Youwen Wu</a
       >
       <span class="ml-2 font-serif">|</span>
       <button
         id="theme-toggle"
-        class="ml-2 text-sm hover:bg-indigo-200 dark:hover:bg-violet-950 rounded-sm transition-colors p-1 duration-500"
+        class="ml-2 text-sm hover:text-accent-light dark:hover:text-muted-dark"
       ></button>
       <span class="ml-2 font-serif">|</span>
       <button
         id="font-toggle"
-        class="ml-2 text-sm hover:bg-indigo-200 dark:hover:bg-violet-950 rounded-sm transition-colors p-1 duration-500"
+        class="ml-2 text-sm hover:text-accent-light dark:hover:text-muted-dark"
       ></button>
     </header>
     $body$
@@ -149,14 +149,14 @@
         &copy; 2024 Youwen Wu. Generated by
         <a
           href="https://jaspervdj.be/hakyll/"
-          class="external-link"
+          class="external-link-muted"
           target="__blank"
           >Hakyll.</a
         >
         View the source
         <a
           href="https://github.com/couscousdude/blog"
-          class="external-link"
+          class="external-link-muted"
           target="__blank"
           >on GitHub.</a
         >
@@ -164,7 +164,7 @@
       <p class="text-sm leading-relaxed mt-2">
         Content freely available under
         <a
-          class="external-link"
+          class="external-link-muted"
           target="__blank"
           href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en"
           ><span class="smallcaps">CC BY-NC-SA</span> 4.0</a
diff --git a/tailwind.config.js b/tailwind.config.js
index 275fb0e..880ede6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,24 +10,42 @@ module.exports = {
       },
       colors: {
         primary: {
-          dark: "#e7e5e4",
+          //dark: "#e7e5e4",
           light: "#44403c",
+          dark: "#e0def4",
+          //light: "#575279",
         },
         secondary: {
-          dark: "#4c1d95",
-          light: "#4338ca",
+          //dark: "#4c1d95",
+          //light: "#4338ca",
+          dark: "#1f1d2e",
+          light: "#fffaf3",
         },
         accent: {
-          dark: "#9ca3af",
-          light: "#78716c",
+          //dark: "#9ca3af",
+          //light: "#78716c",
+          dark: "#908caa",
+          light: "#797593",
         },
         muted: {
-          dark: "#6b7280",
-          light: "#a8a29e",
+          //dark: "#6b7280",
+          //light: "#a8a29e",
+          dark: "#6e6a86",
+          light: "#9893a5",
         },
         background: {
-          light: "#d6d3d1",
-          dark: "#101017",
+          //light: "#d6d3d1",
+          //dark: "#101017",
+          dark: "#191724",
+          light: "#faf4ed",
+        },
+        iris: {
+          dark: "#c4a7e7",
+          light: "#907aa9",
+        },
+        love: {
+          dark: "#eb6f92",
+          light: "#b4637a",
         },
       },
     },