From 806bb9b76005d81f25632c51c2c58bcf0e7e2730 Mon Sep 17 00:00:00 2001
From: eggy <danielchen04@hotmail.ca>
Date: Sat, 31 Dec 2022 20:27:53 -0500
Subject: [PATCH] fix: make heading links look nicer

---
 app.vue | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/app.vue b/app.vue
index 7b70722..d47d1d8 100644
--- a/app.vue
+++ b/app.vue
@@ -28,4 +28,35 @@ div#__nuxt {
   --text-color: #ebf4f1;
   --bg: #091a28;
 }
+
+.icon.icon-link {
+  @apply absolute  opacity-0 h-4 -ml-6 w-10 bg-no-repeat;
+  background-image: url("/icons/link.svg");
+  margin-top: 6px;
+}
+
+.prose h2 > a,
+.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;
+}
+
+.prose h2 > a:hover::before,
+.prose h3 > a:hover::before,
+.prose h4 > a:hover::before,
+.prose h5 > a:hover::before,
+.prose h6 > a:hover::before {
+  content: "#";
+  position: absolute;
+  left: -2rem;
+  opacity: 0.5;
+  font-style: italic;
+}
 </style>