From 1487ae528470dc004fa3e1b9174e19072195dbba Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Mon, 6 Dec 2021 02:40:51 +0800
Subject: [PATCH] Add style for heading anchor

---
 _sass/addon/commons.scss |  6 ++---
 _sass/addon/module.scss  | 50 ++++++++++++++++++++++++++++++----------
 2 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 1901a65..dc8e264 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -54,7 +54,7 @@ h1 {
 h2 {
   @extend %heading;
   @extend %section;
-  @extend %anchor;
+  @extend %anchor-relative;
 
   font-size: 1.5rem;
 }
@@ -62,7 +62,7 @@ h2 {
 h3 {
   @extend %heading;
   @extend %section;
-  @extend %anchor;
+  @extend %anchor-relative;
 
   font-size: 1.2rem;
 }
@@ -1126,7 +1126,7 @@ $sidebar-display: "sidebar-display";
 
     h1 {
       margin-top: 2.2rem;
-      font-size: 1.55rem;
+      font-size: 1.75rem;
     }
   }
 
diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss
index 51d3c88..45d57bc 100644
--- a/_sass/addon/module.scss
+++ b/_sass/addon/module.scss
@@ -10,6 +10,44 @@
   font-family: 'Lato', 'Microsoft Yahei', sans-serif;
 }
 
+%section {
+  padding-top: 3.5rem;
+  margin-top: -2.5rem;
+
+  #core-wrapper & {
+    line-height: 1.2;
+    margin-bottom: 1rem;
+  }
+}
+
+%anchor {
+  > a {
+    font-size: 70%;
+    visibility: hidden;
+    margin-left: 0.25rem;
+    border-bottom: none !important;
+    opacity: 0;
+    transition: opacity 0.25s ease-in, visibility 0s ease-in 0.25s;
+  }
+
+  &:hover {
+    > a {
+      visibility: visible;
+      opacity: 1;
+      transition: opacity 0.25s ease-in, visibility 0s ease-in 0s;
+    }
+  }
+}
+
+%anchor-relative {
+  @extend %anchor;
+
+  > a {
+    position: relative;
+    bottom: 1px;
+  }
+}
+
 %tag-hover {
   background: var(--tag-hover);
   transition: background 0.35s ease-in-out;
@@ -47,18 +85,6 @@
   border-bottom: none;
 }
 
-%section {
-  #core-wrapper & {
-    line-height: 1.2;
-    margin-bottom: 1rem;
-  }
-}
-
-%anchor {
-  padding-top: 3.5rem;
-  margin-top: -2.5rem;
-}
-
 %cursor-pointer {
   cursor: pointer;
 }