[styles] Header's anchor now has its own class

3 files changed, 9 insertions, 10 deletions

diff --git a/generate-hooks/create-header-anchors.awk b/generate-hooks/create-header-anchors.awk
index a07c736..f6d2815 100644
--- a/generate-hooks/create-header-anchors.awk
+++ b/generate-hooks/create-header-anchors.awk
@@ -8,7 +8,7 @@
 /[ \t]*<h[23456]/ {
 	id = substr($0, index($0, "id=\"") + 4)
 	id = substr(id, 0, index(id, "\"") - 1)
-	gsub(/$/, ORS "<a href=\"#" id "\"><img src=\"/img/link-tabler.svg\" alt=\"🔗\" loading=\"lazy\"></a>")
+	gsub(/$/, ORS "<a class=\"h-anchor\" href=\"#" id "\"><img src=\"/img/link-tabler.svg\" alt=\"🔗\" loading=\"lazy\"></a>")
 }
 
 {
diff --git a/src/darkmode.css b/src/darkmode.css
index fd995a5..b977289 100644
--- a/src/darkmode.css
+++ b/src/darkmode.css
@@ -22,7 +22,7 @@
 }
 
   /* This selects the link images, next to headings */
-h2 + a img, h3 + a img, h4 + a img, h5 + a img, h6 + a img, .icon, .file-icon, .file-wrapper > summary {
+.h-anchor img, .icon, .file-icon, .file-wrapper > summary {
     /* Refer to styles.css on why this is necessary */
     filter: none; 
   }
diff --git a/src/styles.css b/src/styles.css
index cee4c39..942512b 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -165,17 +165,16 @@ h1, h2, h3, h4, h5, h6, b {
   h4 { border-bottom: 2px solid var(--border-color); }
   h2, h3, h4, h5, h6 { display: inline-block; } /* For link to appear next to heading */
 
-  /* Heading link */ h2 + a, h3 + a, h4 + a, h5 + a, h6 + a {
+  .h-anchor {
       border: none !important;
       display: inline;
     }
-  /* Heading link */ h2 + a img, h3 + a img, h4 + a img, h5 + a img, h6 + a img {
-      border: none;
-      height: 1.3em;
-      vertical-align: text-bottom;
-    }
-  /* Heading link */ h2 + a img, h3 + a img, h4 + a img, h5 + a img, h6 + a img,
-  .icon, .file-icon, .file-wrapper > summary {
+    .h-anchor img {
+        border: none;
+        height: 1.3em;
+        vertical-align: text-bottom;
+      }
+  .h-anchor img, .icon, .file-icon, .file-wrapper > summary {
       /* Since link images are made for dark mode, and have white-ish foreground,
        * this filter makes them black (when in light mode)
        */