feat: highlight on hover for most els

app.vue

@@ -4,7 +4,7 @@
   </NuxtLayout>
 </template>
 
-<style>
+<style lang="scss">
 * {
   box-sizing: border-box;
   /* for that cool wave dark mode effect */
@@ -29,28 +29,44 @@ div#__nuxt {
   --bg: #091a28;
 }
 
-.prose h2 > a,
+.prose {
-.prose h3 > a,
-.prose h4 > a,
-.prose h5 > a,
-.prose h6 > a {
   /*
   override default tailwind styles
 
   these have a default specificity of 0, 4, 0 so !important is basically the only way
   */
-  @apply font-bold no-underline !important;
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    & > a {
+      font-weight: bold !important;
+      text-decoration: none !important;
+    }
+  }
 }
 
-article .prose h2 > a:hover::before,
+.prose article {
-article .prose h3 > a:hover::before,
+  h2,
-article .prose h4 > a:hover::before,
+  h3,
-article .prose h5 > a:hover::before,
+  h4,
-article .prose h6 > a:hover::before {
+  h5,
+  h6 {
+    & > a:hover {
+      @apply hover:text-blue-700 dark:hover:text-blue-400;
+      &::before {
         content: "#";
         position: absolute;
-  left: -2rem;
         opacity: 0.5;
+        left: -2rem;
         font-style: italic;
       }
+    }
+  }
+
+  a:hover {
+    @apply hover:text-blue-700 dark:hover:text-blue-400;
+  }
+}
 </style>

components/BlogStatBox.vue

@@ -11,7 +11,7 @@ const latest = docs.at(-1) as BlogParsedContent;
 </script>
 
 <template>
-  <div class="prose dark:prose-invert flex">
+  <div class="prose dark:prose-invert flex onhover">
     <HomeStatBox
       :href="latest._path"
       color="lightblue"
@@ -46,8 +46,12 @@ const latest = docs.at(-1) as BlogParsedContent;
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 h2 {
   overflow-wrap: break-word;
 }
+
+div.onhover:hover h2 {
+  @apply text-blue-700 dark:text-blue-400;
+}
 </style>

components/ProjectCard.vue

@@ -56,6 +56,10 @@ const imgUrl = props.project.img
   width: 100%;
 }
 
+.project-anchor:hover h3 {
+  @apply text-blue-700 dark:text-blue-400;
+}
+
 .card {
   border: 0.2rem solid pink;
   background: white;

components/StoryStatBox.vue

@@ -11,7 +11,7 @@ const latest = docs.at(-1) as StoryParsedContent;
 </script>
 
 <template>
-  <div class="prose dark:prose-invert flex">
+  <div class="prose dark:prose-invert flex onhover">
     <HomeStatBox
       :href="latest._path"
       color="lightgreen"
@@ -50,4 +50,8 @@ const latest = docs.at(-1) as StoryParsedContent;
 h2 {
   overflow-wrap: break-word;
 }
+
+div.onhover:hover h2 {
+  @apply text-blue-700 dark:text-blue-400;
+}
 </style>

package.json

@@ -7,15 +7,16 @@
     "preview": "nuxt preview"
   },
   "devDependencies": {
+    "@funken-studio/sitemap-nuxt-3": "^4.0.4",
     "@nuxt/content": "^2.3.0",
     "@nuxtjs/color-mode": "^3.2.0",
-    "@funken-studio/sitemap-nuxt-3": "^4.0.4",
     "@nuxtjs/tailwindcss": "^6.2.0",
     "@tailwindcss/typography": "^0.5.2",
     "nuxt": "^3.1.1",
     "reading-time": "^2.0.0-1",
     "rehype-katex": "^6.0.2",
     "remark-math": "^5.1.1",
+    "sass": "^1.57.1",
     "sitemap": "^7.1.1",
     "typescript": "^4.7.4",
     "unist-util-visit": "^4.1.0",

yarn.lock

@@ -1671,7 +1671,7 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
-chokidar@^3.5.1, chokidar@^3.5.3:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.1, chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -3070,6 +3070,11 @@ ignore@^5.2.0, ignore@^5.2.4:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.2.4.tgz#a291c0c6178ff1b960befe47fcdec301674a6324"
   integrity sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==
 
+immutable@^4.0.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.2.2.tgz#2da9ff4384a4330c36d4d1bc88e90f9e0b0ccd16"
+  integrity sha512-fTMKDwtbvO5tldky9QZ2fMX7slR0mYpY5nbnFWYp0fOzDhHqhgIw9KoYgxLWsoNTS9ZHGauHj18DTyEw6BK3Og==
+
 import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -5514,6 +5519,15 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sass@^1.57.1:
+  version "1.57.1"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.57.1.tgz#dfafd46eb3ab94817145e8825208ecf7281119b5"
+  integrity sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 sax@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -5679,7 +5693,7 @@ socket.io-parser@~4.2.1:
     "@socket.io/component-emitter" "~3.1.0"
     debug "~4.3.1"
 
-source-map-js@^1.0.1, source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==