Beautify heading style (margin, anchor)

_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

_sass/addon/commons.scss

@@ -47,7 +47,7 @@ h1 {
 h2 {
   @extend %heading;
   @extend %section;
-  @extend %anchor-relative;
+  @extend %anchor;
 
   font-size: 1.5rem;
 }

_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;