FIX: Scroll padding on top for anchor links (#669)

* FIX: Scroll padding on top for anchor links

* Fix minor regression in test

* Add comment about Sphinx versions in tests

* Scrollspy fix

* Slight tweak

* Shorter padding top

* Fix header

* Fix muted heading color

* Center image title

.github/workflows/tests.yml

@@ -27,19 +27,22 @@ jobs:
       matrix:
         os: [ubuntu-latest]
         python-version: [3.7, 3.8, 3.9]
-        sphinx: [">=4,<5", ">=5,<6"]
+        # Only test the latest major release of Sphinx because otherwise we need to
+        # keep multiple versions of regression tests on file and this creates lots of
+        # noise in the tests.
+        sphinx: [">=5,<6"]
         include:
         - os: windows-latest
           python-version: 3.9
-          sphinx: ">=4,<5"
+          sphinx: ">=5,<6"
         - os: macos-latest
           python-version: 3.9
           sphinx: ">=5,<6"
     runs-on: ${{ matrix.os }}
 
     steps:
     - uses: actions/checkout@v3
-    - name: Set up Python ${{ matrix.python-version }}
+    - name: Set up Python ${{ matrix.python-version }} and Sphinx ${{ matrix.sphinx }}
       uses: actions/setup-python@v4
       with:
         python-version: ${{ matrix.python-version }}

src/sphinx_book_theme/assets/styles/base/_base.scss

@@ -1,6 +1,16 @@
-/*********************************************
+/**
+ * General structural things
+ */
+html {
+  // The PyData theme value for this is based on `header-height` variable.
+  // We set the variable to 0 and have our own $article-header-height SCSS variable.
+  // So here we follow the same pattern but now using our variable.
+  scroll-padding-top: $header-article-height + 1rem;
+}
+
+/**
 * Utility classes used in a few places
-*********************************************/
+*/
 // For the helper pixel that we can watch to decide whether we've scrolled
 .sbt-scroll-pixel-helper {
   position: absolute;

src/sphinx_book_theme/assets/styles/base/_typography.scss

@@ -8,7 +8,7 @@
   h3,
   h4,
   h5 {
-    color: var(--pst-color-text-muted);
+    color: var(--pst-color-text);
   }
 }
 

src/sphinx_book_theme/assets/styles/sections/_sidebar-primary.scss

@@ -9,6 +9,8 @@
 
   .navbar-brand {
     height: unset;
+    // Auto-center the image and title
+    justify-content: center;
   }
 
   // Remove the header items that pop into the sidebar in the pydata theme

tests/test_build/test_marginnote.html

@@ -4,7 +4,7 @@ <h2>
    2.2.
   </span>
   Marginnotes
-  <a class="headerlink" href="#marginnotes" title="Permalink to this headline">
+  <a class="headerlink" href="#marginnotes" title="Permalink to this heading">
    #
   </a>
  </h2>

tests/test_build/test_sidenote.html

@@ -4,7 +4,7 @@ <h2>
    2.1.
   </span>
   Sidenotes
-  <a class="headerlink" href="#sidenotes" title="Permalink to this headline">
+  <a class="headerlink" href="#sidenotes" title="Permalink to this heading">
    #
   </a>
  </h2>

tox.ini

@@ -11,7 +11,7 @@
 # then then deleting compiled files has been found to fix it: `find . -name \*.pyc -delete`
 
 [tox]
-envlist = py39-sphinx4
+envlist = py39-sphinx5
 
 [testenv]
 usedevelop=true