Fix headerlink and update code styles (#559)

source/_static/js/main.js

@@ -368,4 +368,18 @@ window.addEventListener("DOMContentLoaded", (event) => {
       });
     }
   })();
+
+  
+  // --------------------------------------------------
+  // Headerlink wrappers
+  // --------------------------------------------------
+  (function () {
+    const headerlinkEls = document.querySelectorAll(".headerlink");
+    if(headerlinkEls.length > 0) {
+      headerlinkEls.forEach((item) => {
+        var parent = item.parentNode;
+        parent.classList.add("headerlink-wrapper");
+      });
+    }
+  })();
 });

source/_static/scss/includes/_aside.scss

@@ -72,17 +72,37 @@ div.sidebar {
                 &:hover {
                     color: var(--text-color);
                 }
+
+                code {
+                    background-color: var(--theme-light-bg);
+                    color: var(--text-color);
+                    font-size: $font-size-sm;
+                    margin: -0.5rem 0;
+                    transition: background-color 300ms, color 300ms;
+                    padding: 0.2rem 0.45rem;
+                    border-radius: $border-radius;
+    
+                    &:hover {
+                        background-color: var(--theme-light-hover-bg);
+                        opacity: 1;
+                    }
+                }
             }
 
             &.current > a,
             & > a.current {
                 font-weight: $font-weight-medium;
                 color: var(--docs-nav-active-color);
+
+                code {
+                    color: var(--docs-nav-active-color);
+                    background-color: var(--docs-nav-active-code-bg);
+                }
             }
         }
 
         ul {
-            margin-left: 1rem;
+            margin: 0 0 0 1rem;
         }
     }
 }

source/_static/scss/includes/_reset.scss

@@ -39,7 +39,6 @@ h2, h3, h4, h5, h6 {
 }
 
 h1, h2, h3, h4, h5, h6 {
-    position: relative;
     line-height: 1.2;
 
     &, 
@@ -47,6 +46,7 @@ h1, h2, h3, h4, h5, h6 {
     code {
         color: var(--headings-color);
         font-size: inherit;
+        padding: 0;
     }
 }
 
@@ -57,12 +57,10 @@ h4 { font-size: 1rem; }
 h5 { font-size: 1rem; }
 h6 { font-size: 1rem; }
 
-.content__main {
+*.headerlink-wrapper {
-    // Setting extra padding and margin to make room for anchors.
+    position: relative;
-    h1, h2, h3, h4, h5 {
+    padding-left: 1.5rem;
-        padding-left: 1.5rem;
+    margin-left: -1.5rem;
-        margin-left: -1.5rem;
-    }
 }
 
 a.headerlink {
@@ -117,20 +115,23 @@ code {
     border: 0;
 }
 
-a {
+.content__main {
-    code.xref,
+    a {
-    code {
+        code.xref,
-        color: var(--code-link-color);
-        background-color: var(--code-link-bg);
-        transition: opacity 300ms;
-    }
-
-    &:hover {
         code {
+            color: var(--code-link-color);
             background-color: var(--code-link-bg);
-            opacity: 0.8;
+            transition: opacity 300ms;
+        }
+    
+        &:hover {
+            code {
+                background-color: var(--code-link-bg);
+                opacity: 0.8;
+            }
         }
     }
+    
 }
 
 .highlight {

source/_static/scss/includes/_theme.scss

@@ -57,6 +57,7 @@ $theme-properties: (
 
     // Docs nav
     --docs-nav-active-color: $theme-red $headings-dark-color,
+    --docs-nav-active-code-bg: #efdde0 #2E394A,
     --docs-nav-group-border-color: $light-300 $dark-300,
 
     // Scrollbar