fix: Text is now clickable

Author: lamATnginx

assets/css/v2/style.css

@@ -1012,6 +1012,8 @@ h3:target,
 h4:target,
 h5:target,
 h6:target {
+  color: var(--color-brand);
+
   .headerlink::before {
     display: block !important;
   }
@@ -1032,6 +1034,10 @@ h2:has(a):hover {
   .headerlink::before {
     display: block;
   }
+
+  .headerlink {
+    text-decoration-color: oklch(var(--color-brand) / 0.3);
+  }
 }
 
 h3:has(a):hover {
@@ -1058,13 +1064,17 @@ h6:has(a):hover {
   }
 }
 
+.headerlink {
+  text-decoration-color: transparent;
+}
+
 .headerlink::before {
   position: absolute;
   content: "#";
   margin-left: -1.5rem;
   opacity: 20%;
   display: none;
-  top: 0;
+  bottom: 0;
 }
 
 /* MARK: Tables

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 }}>