From ae12d645ef0225831e59248c45689042ebdb83d2 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Sat, 19 Feb 2022 15:16:23 +0200
Subject: Replace AnchorJS with a Hugo render hook (#32953)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Replace AnchorJS with a Hugo render hook

* docs(anchors): improve aria-label on anchor links

* docs(anchors): show anchor link when ed

* docs(anchors): add hash in pseudo-element

Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>
---
 site/assets/scss/_anchor.scss | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

(limited to 'site/assets/scss')

diff --git a/site/assets/scss/_anchor.scss b/site/assets/scss/_anchor.scss
index 96a7dbf9c7..5bb39150b1 100644
--- a/site/assets/scss/_anchor.scss
+++ b/site/assets/scss/_anchor.scss
@@ -1,11 +1,21 @@
-.anchorjs-link {
+.anchor-link {
+  padding: 0 .175rem;
   font-weight: 400;
   color: rgba($link-color, .5);
-  @include transition(color .15s ease-in-out);
+  text-decoration: none;
+  opacity: 0;
+  @include transition(color .15s ease-in-out, opacity .15s ease-in-out);
+
+  &::after {
+    content: "#";
+  }
 
   &:focus,
-  &:hover {
+  &:hover,
+  :hover > &,
+  :target > & {
     color: $link-color;
     text-decoration: none;
+    opacity: 1;
   }
 }
-- 
cgit v1.2.3