From e52dc9551cb3e35e1df672b5a64afc1bd74a5fbf Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 13 Feb 2022 19:19:01 +0800
Subject: [PATCH] Beautify heading style (margin, anchor)

---
 _includes/refactor-content.html |  7 +++----
 _sass/addon/commons.scss        |  2 +-
 _sass/addon/module.scss         | 17 ++++++-----------
 3 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html
index 3c07e9a..5bbcc93 100644
--- a/_includes/refactor-content.html
+++ b/_includes/refactor-content.html
@@ -205,12 +205,11 @@
       {% endif %}
 
       {% assign id = snippet | split: '"' | first %}
-      {% capture anchor %} <a href="#{{ id }}" class="anchor"><i class="fas fa-hashtag"></i></a>{% endcapture %}
+      {% capture anchor %}<a href="#{{ id }}" class="anchor text-muted"><i class="fas fa-hashtag"></i></a>{% endcapture %}
 
       {% assign left = snippet | split: mark_end | first %}
-      {% assign _start_index = left | size %}
-      {% assign _end_index = snippet | size | minus: 1 %}
-      {% assign right = snippet | slice: _start_index, _end_index %}
+      {% assign right = snippet | slice: left.size, snippet.size %}
+      {% assign left = left | replace: '">', '"><span class="mr-2">' | append: '</span>' %}
 
       {% assign _new_content = _new_content | append: mark_start
           | append: left | append: anchor | append: mark_end | append: right
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss
index 9840a64..6fa3126 100644
--- a/_sass/addon/commons.scss
+++ b/_sass/addon/commons.scss
@@ -47,7 +47,7 @@ h1 {
 h2 {
   @extend %heading;
   @extend %section;
-  @extend %anchor-relative;
+  @extend %anchor;
 
   font-size: 1.5rem;
 }
diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss
index 3cd8223..992c48b 100644
--- a/_sass/addon/module.scss
+++ b/_sass/addon/module.scss
@@ -13,13 +13,17 @@
 %section {
   #core-wrapper & {
     margin-top: 2.5rem;
-    margin-bottom: 2rem;
+    margin-bottom: 1.25rem;
+
+    &:focus {
+      outline: none; // avoid outline in Safari
+    }
   }
 }
 
 %anchor {
   .anchor {
-    font-size: 1rem;
+    font-size: 80%;
   }
 
   @media (hover: hover) {
@@ -39,15 +43,6 @@
   }
 }
 
-%anchor-relative {
-  @extend %anchor;
-
-  .anchor {
-    position: relative;
-    bottom: 1px;
-  }
-}
-
 %tag-hover {
   background: var(--tag-hover);
   transition: background 0.35s ease-in-out;