git: 52e33b2723 - main - Activate section anchors in the Documentation Portal

The branch main has been updated by carlavilla:

URL: https://cgit.FreeBSD.org/doc/commit/?id=52e33b2723159afc28ecdad36dae5bc51e52e47c

commit 52e33b2723159afc28ecdad36dae5bc51e52e47c
Author:     Sergio Carlavilla Delgado <carlavilla@FreeBSD.org>
AuthorDate: 2022-07-15 09:52:35 +0000
Commit:     Sergio Carlavilla Delgado <carlavilla@FreeBSD.org>
CommitDate: 2022-07-15 09:52:35 +0000

    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          |  1 +
 .../themes/beastie/assets/styles/global.scss       | 73 ++++++++--------------
 2 files changed, 28 insertions(+), 46 deletions(-)

diff --git a/documentation/config/_default/config.toml b/documentation/config/_default/config.toml
index 087c0f5576..770088c989 100644
--- a/documentation/config/_default/config.toml
+++ b/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" ]
diff --git a/documentation/themes/beastie/assets/styles/global.scss b/documentation/themes/beastie/assets/styles/global.scss
index c6e2bbaf6d..765d81b672 100644
--- a/documentation/themes/beastie/assets/styles/global.scss
+++ b/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 {