From 18fd91adc36e423aaac29f06c10f002243da56ff Mon Sep 17 00:00:00 2001
From: eggy <eggyrules@gmail.com>
Date: Wed, 10 Aug 2022 13:27:37 -0400
Subject: [PATCH] feat: make dark mode pretty

---
 components/Tag.vue |  2 +-
 pages/stories.vue  | 16 +++++++++++-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/components/Tag.vue b/components/Tag.vue
index ce4e61b..dbadfb5 100644
--- a/components/Tag.vue
+++ b/components/Tag.vue
@@ -5,7 +5,7 @@ const { dest } = defineProps<{ dest: string }>();
 <template>
   <a :href="dest">
     <div
-      class="inline-block text-xs rounded-full py-1 px-2 mt-1 mr-1 bg-gray-300 dark:bg-gray-500"
+      class="inline-block text-xs rounded-full py-1 px-2 mt-1 mr-1 bg-gray-300 dark:bg-gray-500 transition"
     >
       <slot />
     </div>
diff --git a/pages/stories.vue b/pages/stories.vue
index adb3a13..3f5841d 100644
--- a/pages/stories.vue
+++ b/pages/stories.vue
@@ -20,12 +20,18 @@ const getPrettyDate = (story: StoryParsedContent) => {
 </script>
 
 <template>
-  <main class="flex flex-col grow prose dark:prose-invert max-w-3xl">
-    <h1>Stories</h1>
-    <div class="story-card p-4" v-for="(story, index) in docs" :key="index">
+  <main
+    class="flex flex-col grow prose dark:prose-invert max-w-3xl gap-6 transition"
+  >
+    <h1 class="mb-0">Stories</h1>
+    <div
+      class="story-card p-4 pb-2"
+      v-for="(story, index) in docs"
+      :key="index"
+    >
       <a :href="story._path" class="no-underline">
         <h3
-          class="text-left text-2xl sm:text-2xl font-bold hover:text-blue-700 leading-tight m-0"
+          class="text-left text-2xl sm:text-2xl font-bold hover:text-blue-700 dark:hover:text-blue-400 leading-tight m-0 transition"
         >
           {{ story.title }}
         </h3>
@@ -46,7 +52,7 @@ const getPrettyDate = (story: StoryParsedContent) => {
       <div class="text-right">
         <a
           :href="story._path"
-          class="no-underline hover:underline font-semibold text-blue-700 m-0"
+          class="no-underline hover:underline font-semibold text-blue-700 dark:text-blue-400"
         >
           Continue reading →
         </a>