From 30b5defb5896f54f986af0efacce5e17d6e29597 Mon Sep 17 00:00:00 2001
From: Oscar Najera <hi@oscarnajera.com>
Date: Mon, 16 Oct 2023 00:11:31 +0200
Subject: Anchors on headings

---
 assets/scss/style.scss                       | 70 +++++++++++++++-------------
 layouts/_default/_markup/render-heading.html |  7 +++
 layouts/_default/about.html                  |  5 +-
 layouts/index.html                           |  5 +-
 layouts/partials/metadata.html               |  2 +-
 5 files changed, 53 insertions(+), 36 deletions(-)
 create mode 100644 layouts/_default/_markup/render-heading.html

diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 49fc481..3115609 100644
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -1,6 +1,10 @@
 @import "tachyons/css/tachyons";
 @import "syntax";
 
+html {
+  scroll-behavior: smooth;
+}
+
 .header ul {
   clear: both;
   max-height: 0;
@@ -69,72 +73,72 @@
 }
 
 .w3-theme-l5 {
-  color: #000 !important;
-  background-color: #f7fcf5 !important;
+  color: #000;
+  background-color: #f7fcf5;
 }
 .w3-theme-l4 {
-  color: #000 !important;
-  background-color: #e4f4dc !important;
+  color: #000;
+  background-color: #e4f4dc;
 }
 .w3-theme-l3 {
-  color: #000 !important;
-  background-color: #c9e9ba !important;
+  color: #000;
+  background-color: #c9e9ba;
 }
 .w3-theme-l2 {
-  color: #000 !important;
-  background-color: #aedd97 !important;
+  color: #000;
+  background-color: #aedd97;
 }
 .w3-theme-l1 {
-  color: #000 !important;
-  background-color: #94d274 !important;
+  color: #000;
+  background-color: #94d274;
 }
 .w3-theme-d1 {
-  color: #fff !important;
-  background-color: #69bf3e !important;
+  color: #fff;
+  background-color: #69bf3e;
 }
 .w3-theme-d2 {
-  color: #fff !important;
-  background-color: #5da937 !important;
+  color: #fff;
+  background-color: #5da937;
 }
 .w3-theme-d3 {
-  color: #fff !important;
-  background-color: #519430 !important;
+  color: #fff;
+  background-color: #519430;
 }
 .w3-theme-d4 {
-  color: #fff !important;
-  background-color: #467f29 !important;
+  color: #fff;
+  background-color: #467f29;
 }
 .w3-theme-d5 {
-  color: #fff !important;
-  background-color: #3a6a22 !important;
+  color: #fff;
+  background-color: #3a6a22;
 }
 
 .w3-theme-light {
-  color: #000 !important;
-  background-color: #f7fcf5 !important;
+  color: #000;
+  background-color: #f7fcf5;
 }
 .w3-theme-dark {
-  color: #fff !important;
-  background-color: #3a6a22 !important;
+  color: #fff;
+  background-color: #3a6a22;
 }
 .w3-theme-action {
-  color: #fff !important;
-  background-color: #3a6a22 !important;
+  color: #fff;
+  background-color: #3a6a22;
 }
 
 .w3-theme {
-  color: #fff !important;
-  background-color: #79c753 !important;
+  color: #fff;
+  background-color: #79c753;
 }
 .w3-text-theme {
-  color: #79c753 !important;
+  color: #79c753;
 }
 .w3-theme-border {
-  border-color: #79c753 !important;
+  border-color: #79c753;
 }
 .w3-hover-theme:hover {
-  color: #fff !important;
-  background-color: #79c753 !important;
+  color: #fff;
+  background-color: #79c753;
 }
 // Extra sizes
 .mw-20 {
@@ -153,7 +157,7 @@
 // POSTS
 .main-content {
   a {
-    @extend .link, .near-black, .ph1, .br2, .w3-text-theme;
+    @extend .link, .ph1, .w3-text-theme;
   }
 
   p code {
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
new file mode 100644
index 0000000..3df797e
--- /dev/null
+++ b/layouts/_default/_markup/render-heading.html
@@ -0,0 +1,7 @@
+<!-- https://discourse.gohugo.io/t/adding-anchor-next-to-headers/1726/24 -->
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">
+    {{ .Text | safeHTML }}
+    <a class="heading-anchor" href="#{{ .Anchor | safeURL }}">
+        <i class="fa fa-chain" aria-hidden="true"></i>
+    </a>
+</h{{ .Level }}>
diff --git a/layouts/_default/about.html b/layouts/_default/about.html
index 4a3a656..99eb93a 100644
--- a/layouts/_default/about.html
+++ b/layouts/_default/about.html
@@ -21,7 +21,10 @@
   {{ range .Paginator.Pages }}
     <div class="stripe-dark">
       <div class="mw7 center pv2 lh-copy f4-ns ph1">
-        <h2 class="athelas lh-title f2">
+        <h2
+          id="{{ anchorize .Title | safeURL }}"
+          class="baskerville lh-title f2"
+        >
           {{ .Title }}
         </h2>
         {{ with .Content }}
diff --git a/layouts/index.html b/layouts/index.html
index f787152..021da39 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -9,7 +9,10 @@
   {{ range $index, $element :=  (where .Pages "Type" "in" .Site.Params.mainSections).ByWeight }}
     <div class="stripe-dark">
       <div class="mw7 center pv2">
-        <h2 class="athelas lh-title f2">
+        <h2
+          id="{{ anchorize .Title | safeURL }}"
+          class="baskerville lh-title f2"
+        >
           {{ .Title }}
         </h2>
         {{ range first 3 .Pages.ByPublishDate.Reverse }}
diff --git a/layouts/partials/metadata.html b/layouts/partials/metadata.html
index 5ad92e3..0c68b3c 100644
--- a/layouts/partials/metadata.html
+++ b/layouts/partials/metadata.html
@@ -50,7 +50,7 @@
   }}
     {{ with $val }}
       <a
-        class="f6 link br3 ba ma2 ph2 pv1 dib near-white bg-green"
+        class="f6 link ba br3 ma2 ph2 pv1 dib w3-text-theme w3-hover-theme"
         href="{{ . }}"
         target="_blank"
         rel="noopener"
-- 
cgit v1.2.3