fix: make heading links look nicer

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>