diff --git a/source/_static/js/main.js b/source/_static/js/main.js index 96b207bf..6f39ba74 100644 --- a/source/_static/js/main.js +++ b/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"); + }); + } + })(); }); \ No newline at end of file diff --git a/source/_static/scss/includes/_aside.scss b/source/_static/scss/includes/_aside.scss index e6373055..57550a02 100644 --- a/source/_static/scss/includes/_aside.scss +++ b/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; } } } diff --git a/source/_static/scss/includes/_reset.scss b/source/_static/scss/includes/_reset.scss index 91c7fc34..71737911 100644 --- a/source/_static/scss/includes/_reset.scss +++ b/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 { - // Setting extra padding and margin to make room for anchors. - h1, h2, h3, h4, h5 { - padding-left: 1.5rem; - margin-left: -1.5rem; - } +*.headerlink-wrapper { + position: relative; + padding-left: 1.5rem; + margin-left: -1.5rem; } a.headerlink { @@ -117,20 +115,23 @@ code { border: 0; } -a { - code.xref, - code { - color: var(--code-link-color); - background-color: var(--code-link-bg); - transition: opacity 300ms; - } - - &:hover { +.content__main { + a { + code.xref, 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 { diff --git a/source/_static/scss/includes/_theme.scss b/source/_static/scss/includes/_theme.scss index 66813f98..88bce391 100644 --- a/source/_static/scss/includes/_theme.scss +++ b/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