From ef1489b078b17de04ff9f94f79706d45a464c297 Mon Sep 17 00:00:00 2001
From: Lorenz Sieben <me@lorenz-sieben.com>
Date: Wed, 18 Jan 2023 16:20:29 +0100
Subject: [PATCH 1/2] Fix the broken anchor links in the headings

---
 assets/icons/link.svg                        |  1 +
 assets/styles/framework.scss                 | 33 +++++++++++++++++---
 assets/styles/icons.scss                     |  6 ++++
 layouts/_default/_markup/render-heading.html |  5 ++-
 4 files changed, 37 insertions(+), 8 deletions(-)
 create mode 100644 assets/icons/link.svg

diff --git a/assets/icons/link.svg b/assets/icons/link.svg
new file mode 100644
index 000000000..5beeeff6a
--- /dev/null
+++ b/assets/icons/link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6.188 8.719c.439-.439.926-.801 1.444-1.087 2.887-1.591 6.589-.745 8.445 2.069l-2.246 2.245c-.644-1.469-2.243-2.305-3.834-1.949-.599.134-1.168.433-1.633.898l-4.304 4.306c-1.307 1.307-1.307 3.433 0 4.74 1.307 1.307 3.433 1.307 4.74 0l1.327-1.327c1.207.479 2.501.67 3.779.575l-2.929 2.929c-2.511 2.511-6.582 2.511-9.093 0s-2.511-6.582 0-9.093l4.304-4.306zm6.836-6.836l-2.929 2.929c1.277-.096 2.572.096 3.779.574l1.326-1.326c1.307-1.307 3.433-1.307 4.74 0 1.307 1.307 1.307 3.433 0 4.74l-4.305 4.305c-1.311 1.311-3.44 1.3-4.74 0-.303-.303-.564-.68-.727-1.051l-2.246 2.245c.236.358.481.667.796.982.812.812 1.846 1.417 3.036 1.704 1.542.371 3.194.166 4.613-.617.518-.286 1.005-.648 1.444-1.087l4.304-4.305c2.512-2.511 2.512-6.582.001-9.093-2.511-2.51-6.581-2.51-9.092 0z"/></svg>
\ No newline at end of file
diff --git a/assets/styles/framework.scss b/assets/styles/framework.scss
index 37b18178e..f9b1a053e 100644
--- a/assets/styles/framework.scss
+++ b/assets/styles/framework.scss
@@ -176,19 +176,42 @@ h2 {
 }
 
 .sub-heading {
-    h2 {
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
         display: inline-block;
         width: fit-content;
     }
 
-    .heading-anchor-link {
-        display: none;
-        font-size: 1.4em;
+    .heading-anchor-link-container {
+        position: relative;
+        width: 0;
+        display: inline-block;
+
+        .heading-anchor-link {
+            display: none;
+            font-size: 15px;
+            color: $accent-color;
+            position: absolute;
+            width: 20px;
+            text-align: center;
+            bottom: 0;
+            left: -20px;
+            padding-right: 5px;
+            line-height: 1;
+
+            &:hover,
+            &:focus {
+                color: color('teal', 900);
+            }
+        }
     }
 
     &:hover,
     &:focus {
-        .heading-anchor-link {
+        a.heading-anchor-link {
             display: inline-block;
         }
     }
diff --git a/assets/styles/icons.scss b/assets/styles/icons.scss
index 3fbdb962a..4e46f0c24 100644
--- a/assets/styles/icons.scss
+++ b/assets/styles/icons.scss
@@ -273,3 +273,9 @@
     font-icon: url('gavel.svg');
     vertical-align: -2px;
 }
+
+.icon-link:before {
+    @extend %icon;
+    font-icon: url('link.svg');
+    vertical-align: -3px;
+}
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
index ae0f4c0ca..4391f898d 100644
--- a/layouts/_default/_markup/render-heading.html
+++ b/layouts/_default/_markup/render-heading.html
@@ -1,6 +1,5 @@
 <!-- Adapted after: https://gohugo.io/getting-started/configuration-markup#heading-link-example -->
 <div class="sub-heading">
-    <h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</h{{ .Level }}>
-    <a href="#{{ .Anchor | safeURL }}" class="heading-anchor-link" aria-label="Link to this heading"
-        aria-describedby="{{ .Anchor | safeURL }}" title="Link to this heading">#</a>
+    <span class="heading-anchor-link-container"><a href="#{{ .Anchor | safeURL }}" class="heading-anchor-link no-link-decoration" aria-label="Link to this heading"
+    aria-describedby="{{ .Anchor | safeURL }}" title="Link to this heading"><span class="icon-link"></span></a></span><h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</h{{ .Level }}>
 </div>

From c748ca6cbb8240dedf40f8095a7440928833eb00 Mon Sep 17 00:00:00 2001
From: Lorenz Sieben <me@lorenz-sieben.com>
Date: Sun, 11 Jun 2023 00:52:51 +0200
Subject: [PATCH 2/2] Make changes suggested in #1020

---
 assets/styles/framework.scss                 | 41 +++++++++-----------
 assets/styles/icons.scss                     |  2 +-
 layouts/_default/_markup/render-heading.html |  5 ++-
 3 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/assets/styles/framework.scss b/assets/styles/framework.scss
index f9b1a053e..7be9ae406 100644
--- a/assets/styles/framework.scss
+++ b/assets/styles/framework.scss
@@ -181,38 +181,33 @@ h2 {
     h4,
     h5,
     h6 {
-        display: inline-block;
+        display: inline;
         width: fit-content;
     }
 
-    .heading-anchor-link-container {
-        position: relative;
-        width: 0;
-        display: inline-block;
-
-        .heading-anchor-link {
-            display: none;
-            font-size: 15px;
-            color: $accent-color;
-            position: absolute;
-            width: 20px;
-            text-align: center;
-            bottom: 0;
-            left: -20px;
-            padding-right: 5px;
-            line-height: 1;
-
-            &:hover,
-            &:focus {
-                color: color('teal', 900);
-            }
+    display: inline-block;
+    margin-top: 1em;
+    width: 100%;
+
+    .heading-anchor-link {
+        @extend %sr-only;
+        font-size: 15px;
+        color: $accent-color;
+        width: 20px;
+        text-align: center;
+        padding-right: 5px;
+
+        &:hover,
+        &:focus {
+            color: color('teal', 900);
         }
     }
 
     &:hover,
     &:focus {
         a.heading-anchor-link {
-            display: inline-block;
+            @extend %remove-sr-only;
+            display: inline;
         }
     }
 }
diff --git a/assets/styles/icons.scss b/assets/styles/icons.scss
index 4e46f0c24..52843e07d 100644
--- a/assets/styles/icons.scss
+++ b/assets/styles/icons.scss
@@ -277,5 +277,5 @@
 .icon-link:before {
     @extend %icon;
     font-icon: url('link.svg');
-    vertical-align: -3px;
+    vertical-align: -1px;
 }
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
index 4391f898d..e83a064b0 100644
--- a/layouts/_default/_markup/render-heading.html
+++ b/layouts/_default/_markup/render-heading.html
@@ -1,5 +1,6 @@
 <!-- Adapted after: https://gohugo.io/getting-started/configuration-markup#heading-link-example -->
 <div class="sub-heading">
-    <span class="heading-anchor-link-container"><a href="#{{ .Anchor | safeURL }}" class="heading-anchor-link no-link-decoration" aria-label="Link to this heading"
-    aria-describedby="{{ .Anchor | safeURL }}" title="Link to this heading"><span class="icon-link"></span></a></span><h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</h{{ .Level }}>
+    <h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</h{{ .Level }}>
+    <a href="#{{ .Anchor | safeURL }}" class="heading-anchor-link no-link-decoration" aria-label="Link to this heading"
+    aria-describedby="{{ .Anchor | safeURL }}" title="Link to this heading"><span class="icon-link"></span></a>
 </div>