From 06c9a95b758f803467b5b3300b395817398d0c8c Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@geeklabor.de>
Date: Tue, 17 Mar 2020 23:22:51 +0100
Subject: [PATCH] improve anchor link alignment and spacing

---
 CHANGELOG.md                          |  8 +++---
 exampleSite/config.yaml               |  2 ++
 exampleSite/content/shortcodes/toc.md |  8 ++++++
 layouts/partials/content.html         |  4 +--
 src/sass/_base.scss                   | 35 +++++++++++++++++++++++----
 5 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1777d7e..ae3ea4c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,3 @@
-* FEATURE
-  * add iconfont based on svg icons
-* BUGFIX
-  * use iconfont in next/prev links to fix unicode errors on mobile devices
-  * use fake underline for next/pref links on hover
+* ENHANCEMENT
+  * improve anchor link alignment and spacing
+  * show anchor link only on `:hover`
diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index ec7ab8a..09dced4 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -28,3 +28,5 @@ params:
 
   geekdocLegalNotice: https://geeklabor.de/legal-notice/#impressum
   geekdocPrivacyPolicy: https://geeklabor.de/legal-notice/#datenschutzerkl%C3%A4rung
+
+  geekdocAnchorLeft: true
diff --git a/exampleSite/content/shortcodes/toc.md b/exampleSite/content/shortcodes/toc.md
index db7ffc4..c7d06d0 100644
--- a/exampleSite/content/shortcodes/toc.md
+++ b/exampleSite/content/shortcodes/toc.md
@@ -22,6 +22,14 @@ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
 
+##### Level 2.1.1.1
+
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+
+###### Level 2.1.1.1.1
+
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
+
 ### Level 2.2
 
 Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.
diff --git a/layouts/partials/content.html b/layouts/partials/content.html
index 73bc6fb..f9d10d7 100644
--- a/layouts/partials/content.html
+++ b/layouts/partials/content.html
@@ -3,9 +3,9 @@
 
 {{ $.Scratch.Set "content" (.Content | replaceRE `<nav id="TableOfContents">\s*<ul>\s*<li>\s*<ul>` `<nav id="TableOfContents"><ul>` | replaceRE `</ul>\s*</li>\s*</ul>\s*</nav>` `</ul></nav>` | safeHTML) }}
 {{ if and $showAnchor $anchorLeft }}
-    {{ $.Scratch.Set "content" ($.Scratch.Get "content" | replaceRE "(<h[2-9] id=\"([^\"]+)\"[^>]*>)(.*?)(</h[2-9]+>)" (printf `%s<a data-clipboard-text="%s" class="gdoc-page__anchor gdoc-page__anchor--left clip" href="#%s"><svg class="icon link"><use xlink:href="#link"></use></svg></a>%s%s` `${1}` (absURL (printf "%s#%s" .Permalink `${2}`)) `${2}` `${3}` `${4}`) | safeHTML) }}
+    {{ $.Scratch.Set "content" ($.Scratch.Get "content" | replaceRE "(<h[2-9] id=\"([^\"]+)\"[^>]*>)(.*?)(</h[2-9]+>)" (printf `<div class="gdoc-page__anchorwrap">%s<a data-clipboard-text="%s" class="gdoc-page__anchor gdoc-page__anchor--left clip" href="#%s"><svg class="icon link"><use xlink:href="#link"></use></svg></a>%s%s</div>` `${1}` (absURL (printf "%s#%s" .Permalink `${2}`)) `${2}` `${3}` `${4}`) | safeHTML) }}
 {{ else if and $showAnchor (not $anchorLeft) }}
-    {{ $.Scratch.Set "content" ($.Scratch.Get "content" | replaceRE "(<h[2-9] id=\"([^\"]+)\"[^>]*>)(.*?)(</h[2-9]+>)" (printf `%s%s<a data-clipboard-text="%s" class="gdoc-page__anchor gdoc-page__anchor--right clip" href="#%s"><svg class="icon link"><use xlink:href="#link"></use></svg></a>%s` `${1}` `${3}` (absURL (printf "%s#%s" .Permalink `${2}`)) `${2}` `${4}`) | safeHTML) }}
+    {{ $.Scratch.Set "content" ($.Scratch.Get "content" | replaceRE "(<h[2-9] id=\"([^\"]+)\"[^>]*>)(.*?)(</h[2-9]+>)" (printf `<div class="gdoc-page__anchorwrap">%s%s<a data-clipboard-text="%s" class="gdoc-page__anchor gdoc-page__anchor--right clip" href="#%s"><svg class="icon link"><use xlink:href="#link"></use></svg></a>%s</div>` `${1}` `${3}` (absURL (printf "%s#%s" .Permalink `${2}`)) `${2}` `${4}`) | safeHTML) }}
 {{ end }}
 
 {{ $.Scratch.Get "content" }}
diff --git a/src/sass/_base.scss b/src/sass/_base.scss
index 74f1437..a05363d 100644
--- a/src/sass/_base.scss
+++ b/src/sass/_base.scss
@@ -234,18 +234,29 @@ img {
     }
   }
 
+  &__anchorwrap {
+    &:hover .gdoc-page__anchor .icon {
+      color: $gray-500;
+    }
+  }
+
   &__anchor {
+    min-width: 30px;
+
     &--left {
-      min-width: 35px;
+      position: absolute;
+      margin-left: -25px;
       text-align: left;
     }
 
     &--right {
-      margin-left: 0.5em;
+      text-align: right;
     }
 
     .icon {
-      color: $gray-400;
+      width: 1.4rem;
+      height: 1.4rem;
+      color: transparent;
     }
   }
 }
@@ -452,6 +463,10 @@ img {
   }
 
   .gdoc-header {
+    .container {
+      padding: $padding-16 $padding-16 * 2;
+    }
+
     .icon {
       width: $font-size-16 * 1.5;
       height: $font-size-16 * 1.5;
@@ -492,8 +507,18 @@ img {
     display: none;
   }
 
-  .gdoc-footer__item {
-    width: 100%;
+  .gdoc-page {
+    padding: $padding-16 * 1.5 $padding-16 * 2;
+  }
+
+  .gdoc-footer {
+    .container {
+      padding: $padding-16 $padding-16 * 2;
+    }
+
+    &__item {
+      width: 100%;
+    }
   }
 
   #menu-control:checked ~ main {