Activate section anchors in the Documentation Portal

Right now every heading except the main one will display an
anchor when the cursor is over the heading.

In this way parts of the documentation can be easily shared
only clicking in the anchor.

documentation/config/_default/config.toml

@@ -37,6 +37,7 @@ enableGitInfo = true
       env-beastie = true
       isOnline = true
       skip-front-matter = true
+      sectanchors = true
 
 [outputs]
 home = [ "HTML" ]

documentation/themes/beastie/assets/styles/global.scss

@@ -316,59 +316,40 @@ h6 {
   font-size: var(--size-300);
 }
 
-h2,
-h3,
-h4,
-h5,
-h6 {
-  border-bottom: 1px solid var(--lines-color);
-}
+h2 > .anchor,
+h3 > .anchor,
+h4 > .anchor,
+h5 > .anchor,
+h6 > .anchor {
+  text-decoration: none;
 
-h1 .anchor,
-h2 .anchor,
-h3 .anchor,
-h4 .anchor,
-h5 .anchor,
-h6 .anchor,
-h1 .link,
-h2 .link,
-h3 .link,
-h4 .link,
-h5 .link,
-h6 .link {
-  text-decoration: none !important;
-  color: var(--global-font-color);
+  &:hover {
+    text-decoration: none;
+  }
 }
 
-h1 .anchor,
-h2 .anchor,
-h3 .anchor,
-h4 .anchor,
-h5 .anchor,
-h6 .anchor {
+h2 > .anchor::before,
+h3 > .anchor::before,
+h4 > .anchor::before,
+h5 > .anchor::before,
+h6 > .anchor::before {
   visibility: hidden;
-  font-weight: normal;
-  margin-right: 5px;
+  margin-right: .3rem;
+  content: "#";
+  color: var(--global-font-color);
 }
 
-h1 .anchor::before,
-h2 .anchor::before,
-h3 .anchor::before,
-h4 .anchor::before,
-h5 .anchor::before,
-h6 .anchor::before {
-  content: "\00a7";
-}
+h2,
+h3,
+h4,
+h5,
+h6 {
+  border-bottom: 1px solid var(--lines-color);
 
-h1:hover .anchor,
-h2:hover .anchor,
-h3:hover .anchor,
-h4:hover .anchor,
-h5:hover .anchor,
-h6:hover .anchor {
-  visibility: visible;
-  font-weight: normal;
-  margin-right: 5px;
+  &:hover .anchor::before {
+    visibility: visible;
+    transition: visibility 0s easy 0s;
+  }
 }
 
 hr {