Add hashtag to headings (#229)

* feat: Add hashtag to headings

* fix: Text is now clickable

* fix: Removed unneeded link styling

Author: lamATnginx

assets/css/v2/style.css

@@ -1007,6 +1007,75 @@ h2 {
   margin: 1rem 0 .75rem 0;
 }
 
+h2:target,
+h3:target,
+h4:target,
+h5:target,
+h6:target {
+  color: var(--color-brand);
+
+  .headerlink::before {
+    display: block !important;
+  }
+}
+
+h2:has(a),
+h3:has(a),
+h4:has(a),
+h5:has(a),
+h6:has(a) {
+  width: calc(100% + 1rem);
+  margin-left: -1rem;
+  padding-left: 1rem;
+  position: relative;
+}
+
+h2:has(a):hover {
+  .headerlink::before {
+    display: block;
+  }
+}
+
+h3:has(a):hover {
+  .headerlink::before {
+    display: block;
+  }
+}
+
+h4:has(a):hover {
+  .headerlink::before {
+    display: block;
+  }
+}
+
+h5:has(a):hover {
+  .headerlink::before {
+    display: block;
+  }
+}
+
+h6:has(a):hover {
+  .headerlink::before {
+    display: block;
+  }
+}
+
+.headerlink {
+  text-decoration: none;
+
+  color: black;
+}
+
+.headerlink::before {
+  position: absolute;
+  content: "#";
+  margin-left: -1.5rem;
+  opacity: 20%;
+  display: none;
+  bottom: 0;
+  color: oklch(var(--color-brand));
+}
+
 /* MARK: Tables
 */
 table {

layouts/_default/_markup/render-heading.html

@@ -1,3 +1,13 @@
 <h{{ .Level }} 
-id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}  <a class="headerlink float-right" href="#{{ .Anchor | safeURL }}" title="{{ .Text | safeHTML }}"><i class="fas fa-link fa-xs"></i></a>
+id="{{ .Anchor | safeURL }}">
+<div data-mf="false">
+    {{ .Text | safeHTML }}
+    <a class="headerlink float-right" href="#{{ .Anchor | safeURL }}" title="{{ .Text | safeHTML }}">
+        <i class="fas fa-link fa-xs"></i>
+    </a>
+</div> 
+
+<a class="headerlink float-right" data-mf="true" style="display: none;" href="#{{ .Anchor | safeURL }}" title="{{ .Text | safeHTML }}">
+    {{ .Text | safeHTML }}
+</a>
 </h{{ .Level }}>