Prepare release 0.6.0

danirus · Nov 29, 2024 · 44af61c · 44af61c
1 parent 6bd8ca7
commit 44af61c
Show file tree

Hide file tree

Showing 39 changed files with 110 additions and 78 deletions.
diff --git a/ChangeLog.md b/ChangeLog.md
@@ -1,5 +1,10 @@
 # Change Log
 
+## [0.6.0] - 2024-11-29
+
+- New: Highlight the item in the TOC at the right side ('on this page' column) when the location bar refers to an anchor that is part of the TOC.
+- Change: Lighten body background in light color-scheme for all colorsets.
+
 ## [0.5.3] - 2024-11-28
 
 - ReadTheDocs no longer provides versions in the context of the template.

diff --git a/js/src/index.js b/js/src/index.js
@@ -4,7 +4,7 @@ import { CSchemeHandler } from "./cschemes.js";
 import { MenuHandler } from "./menu.js";
 import { selectActiveHeaderLink } from "./navbar.js";
 import { updateRepoMetrics } from "./repometrics.js";
-import { TocObserver } from "./pagetoc.js";
+import { LocationHashHandler, TocObserver } from "./pagetoc.js";
 import { resizeAsides, updateScrollPaddingTop } from "./tocresize.js";
 import { feedVersionsMenu, updateVersion } from "./versions.js";
 
@@ -170,6 +170,7 @@ function loadSphinxNefertiti() {
   // 'active' to the one corresponding to the current URL.
   selectActiveHeaderLink();
 
+  // -------------------------------------------------------------------
   // Scroll the item from the left sidebar into view:
   const sidebar_elem = document.querySelector(".nftt-sidebar a.current");
   if (sidebar_elem) {
@@ -178,6 +179,8 @@ function loadSphinxNefertiti() {
       parent.scrollIntoView({behavior: "smooth", block: "end"});
     }
   }
+  // And scroll down to the anchor name referred in the URL in the TOC.
+  const location_hash_handler = new LocationHashHandler();
 }
 
 runWhenDOMContentLoaded(loadSphinxNefertiti);
diff --git a/js/src/pagetoc.js b/js/src/pagetoc.js
@@ -68,3 +68,47 @@ export class TocObserver {
     return 0;
   }
 }
+
+
+export class LocationHashHandler {
+  constructor() {
+    this.toc = document.querySelector("#TableOfContents");
+    window.addEventListener("hashchange", this.hashChanged);
+    this.hashChanged();
+  }
+
+  isInViewport = (element) => {
+    const rect = element.getBoundingClientRect();
+    return (
+      rect.top >= 0 &&
+      rect.left >= 0 &&
+      rect.bottom <= (
+        window.innerHeight || document.documentElement.clientHeight
+      ) &&
+      rect.right <= (
+        window.innerWidth || document.documentElement.clientWidth
+      )
+    );
+  }
+
+  hashChanged = (_) => {
+    const anchors = this.toc.querySelectorAll("a.reference.internal");
+    for (const anchor of anchors) {
+      anchor.classList.remove("active");
+    }
+
+    const ubits = window.location.href.split("#");
+    if (ubits.length > 1) {
+      const toc_ref = `a.reference.internal[href='#${ubits[1]}']`;
+      const toc_ref_elem = this.toc.querySelector(toc_ref);
+      if (toc_ref_elem) {
+        toc_ref_elem.classList.add("active");
+        if (!this.isInViewport(toc_ref_elem)) {
+          toc_ref_elem.scrollIntoView({
+            behavior: "smooth", block: "center"
+          });
+        }
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sphinx-nefertiti",
-  "version": "0.5.3",
+  "version": "0.6.0",
   "private": true,
   "description": "Nefertiti is a theme for the Sphinx Documentation Generator.",
   "engines": {

diff --git a/scss/_theme.scss b/scss/_theme.scss
@@ -310,35 +310,6 @@ blockquote {
   }
 }
 
-aside.sidebar {
-  float: right;
-  width: 33%;
-  padding: .8rem .9rem;
-  margin: 0 0 .4rem 1.8rem;
-  background-color: var(--#{$prefix}foot1-bg);
-  border: 2px solid var(--#{$prefix}secondary-bg);
-  border-radius: .25rem;
-
-  .sidebar-title {
-    padding-bottom: .5rem;
-    font-size: 1.2em;
-    border-bottom: 1px solid var(--#{$prefix}secondary-bg);
-  }
-
-  .sidebar-subtitle {
-    font-size: 1.1em;
-  }
-
-  .rubric {
-    font-size: 1em;
-    font-weight: 700;
-  }
-
-  p:last-child {
-    margin-bottom: .5rem;
-  }
-}
-
 .search-input {
   max-width: 10rem;
 }
diff --git a/scss/_variables-blue.scss b/scss/_variables-blue.scss
@@ -64,9 +64,9 @@ $dark:          $gray-800 !default;
 // scheme-color light.
 $scheme-light-body-color: $gray-700;
 $scheme-light-body-hc-color: $gray-800;
-$scheme-light-body-bg: $gray-300;
+$scheme-light-body-bg: $gray-200;
 $scheme-light-body-secondary-color: rgba($scheme-light-body-color, .75) !default;
-$scheme-light-body-secondary-bg: $gray-200 !default;
+$scheme-light-body-secondary-bg: $blue-100 !default;
 $scheme-light-body-tertiary-color: rgba($scheme-light-body-color, .8) !default;
 $scheme-light-body-tertiary-bg: $gray-100 !default;
 $scheme-light-body-emphasis-color: $black !default;

diff --git a/scss/_variables-cyan.scss b/scss/_variables-cyan.scss
@@ -66,9 +66,9 @@ $dark:          $gray-800 !default;
 // scheme-color light.
 $scheme-light-body-color: $gray-700;
 $scheme-light-body-hc-color: $gray-800;
-$scheme-light-body-bg: $gray-300;
+$scheme-light-body-bg: $gray-200;
 $scheme-light-body-secondary-color: rgba($scheme-light-body-color, .9) !default;
-$scheme-light-body-secondary-bg: $gray-200 !default;
+$scheme-light-body-secondary-bg: $cyan-100 !default;
 $scheme-light-body-tertiary-color: rgba($scheme-light-body-color, .8) !default;
 $scheme-light-body-tertiary-bg: $gray-100 !default;
 $scheme-light-body-emphasis-color: $black !default;

diff --git a/scss/_variables-green.scss b/scss/_variables-green.scss
@@ -67,9 +67,9 @@ $dark:          $gray-800 !default;
 // scheme-color light.
 $scheme-light-body-color: $gray-700;
 $scheme-light-body-hc-color: $gray-800;
-$scheme-light-body-bg: $gray-300;
+$scheme-light-body-bg: $gray-200;
 $scheme-light-body-secondary-color: rgba($scheme-light-body-color, .75) !default;
-$scheme-light-body-secondary-bg: $gray-200 !default;
+$scheme-light-body-secondary-bg: $green-100 !default;
 $scheme-light-body-tertiary-color: rgba($scheme-light-body-color, .8) !default;
 $scheme-light-body-tertiary-bg: $gray-100 !default;
 $scheme-light-body-emphasis-color: $black !default;

diff --git a/scss/_variables-indigo.scss b/scss/_variables-indigo.scss
@@ -69,9 +69,9 @@ $dark:          $gray-800 !default;
 // scheme-color light.
 $scheme-light-body-color: $gray-700;
 $scheme-light-body-hc-color: $gray-800;
-$scheme-light-body-bg: $gray-300;
+$scheme-light-body-bg: $gray-200;
 $scheme-light-body-secondary-color: rgba($scheme-light-body-color, .75) !default;
-$scheme-light-body-secondary-bg: $gray-200 !default;
+$scheme-light-body-secondary-bg: $indigo-100 !default;
 $scheme-light-body-tertiary-color: rgba($scheme-light-body-color, .8) !default;
 $scheme-light-body-tertiary-bg: $gray-100 !default;
 $scheme-light-body-emphasis-color: $black !default;

diff --git a/scss/_variables-orange.scss b/scss/_variables-orange.scss
@@ -70,9 +70,9 @@ $dark:          $gray-800 !default;
 // scheme-color light.
 $scheme-light-body-color: $gray-700;
 $scheme-light-body-hc-color: $gray-800;
-$scheme-light-body-bg: $gray-300;
+$scheme-light-body-bg: $gray-200;
 $scheme-light-body-secondary-color: rgba($scheme-light-body-color, .75) !default;
-$scheme-light-body-secondary-bg: $gray-200 !default;
+$scheme-light-body-secondary-bg: $orange-100 !default;
 $scheme-light-body-tertiary-color: rgba($scheme-light-body-color, .8) !default;
 $scheme-light-body-tertiary-bg: $gray-100 !default;
 $scheme-light-body-emphasis-color: $black !default;

diff --git a/scss/_variables-pink.scss b/scss/_variables-pink.scss
@@ -70,9 +70,9 @@ $dark:          $gray-800 !default;
 // scheme-color light.
 $scheme-light-body-color: $gray-700;
 $scheme-light-body-hc-color: $gray-800;
-$scheme-light-body-bg: $gray-300;
+$scheme-light-body-bg: $gray-200;
 $scheme-light-body-secondary-color: rgba($scheme-light-body-color, .75) !default;
-$scheme-light-body-secondary-bg: $gray-200 !default;
+$scheme-light-body-secondary-bg: $pink-100 !default;
 $scheme-light-body-tertiary-color: rgba($scheme-light-body-color, .8) !default;
 $scheme-light-body-tertiary-bg: $gray-100 !default;
 $scheme-light-body-emphasis-color: $black !default;

diff --git a/scss/_variables-purple.scss b/scss/_variables-purple.scss
@@ -69,9 +69,9 @@ $dark:          $gray-800 !default;
 // scheme-color light.
 $scheme-light-body-color: $gray-700;
 $scheme-light-body-hc-color: $gray-800;
-$scheme-light-body-bg: $gray-300;
+$scheme-light-body-bg: $gray-200;
 $scheme-light-body-secondary-color: rgba($scheme-light-body-color, .75) !default;
-$scheme-light-body-secondary-bg: $gray-200 !default;
+$scheme-light-body-secondary-bg: $purple-100 !default;
 $scheme-light-body-tertiary-color: rgba($scheme-light-body-color, .8) !default;
 $scheme-light-body-tertiary-bg: $gray-100 !default;
 $scheme-light-body-emphasis-color: $black !default;

diff --git a/scss/_variables-red.scss b/scss/_variables-red.scss
@@ -68,9 +68,9 @@ $dark:          $gray-800 !default;
 // scheme-color light.
 $scheme-light-body-color: $gray-700;
 $scheme-light-body-hc-color: $gray-800;
-$scheme-light-body-bg: $gray-300;
+$scheme-light-body-bg: $gray-200;
 $scheme-light-body-secondary-color: rgba($scheme-light-body-color, .75) !default;
-$scheme-light-body-secondary-bg: $gray-200 !default;
+$scheme-light-body-secondary-bg: $red-100 !default;
 $scheme-light-body-tertiary-color: rgba($scheme-light-body-color, .8) !default;
 $scheme-light-body-tertiary-bg: $gray-100 !default;
 $scheme-light-body-emphasis-color: $black !default;

diff --git a/scss/_variables-teal.scss b/scss/_variables-teal.scss
@@ -68,9 +68,9 @@ $dark:          $gray-800 !default;
 // scheme-color light.
 $scheme-light-body-color: $gray-700;
 $scheme-light-body-hc-color: $gray-800;
-$scheme-light-body-bg: $gray-300;
+$scheme-light-body-bg: $gray-200;
 $scheme-light-body-secondary-color: rgba($scheme-light-body-color, .75) !default;
-$scheme-light-body-secondary-bg: $gray-200 !default;
+$scheme-light-body-secondary-bg: $teal-100 !default;
 $scheme-light-body-tertiary-color: rgba($scheme-light-body-color, .8) !default;
 $scheme-light-body-tertiary-bg: $gray-100 !default;
 $scheme-light-body-emphasis-color: $black !default;

diff --git a/scss/_variables-yellow.scss b/scss/_variables-yellow.scss
@@ -68,9 +68,9 @@ $dark:          $gray-800 !default;
 // scheme-color light.
 $scheme-light-body-color: $gray-700;
 $scheme-light-body-hc-color: $gray-800;
-$scheme-light-body-bg: $gray-300;
+$scheme-light-body-bg: $gray-200;
 $scheme-light-body-secondary-color: rgba($scheme-light-body-color, .75) !default;
-$scheme-light-body-secondary-bg: $gray-200 !default;
+$scheme-light-body-secondary-bg: $yellow-100 !default;
 $scheme-light-body-tertiary-color: rgba($scheme-light-body-color, .8) !default;
 $scheme-light-body-tertiary-bg: $gray-100 !default;
 $scheme-light-body-emphasis-color: $black !default;

diff --git a/scss/components/_toc.scss b/scss/components/_toc.scss
@@ -146,9 +146,8 @@
     right: 0;
     z-index: 2;
     padding-right: .25rem;
-    overflow-y: auto;
-    // overflow-x: auto;
-    // white-space: nowrap;
+    overflow-y: scroll;
+    scroll-snap-type: y mandatory;
 
     @include scrollbars();
   }
@@ -179,6 +178,10 @@
         list-style-position: outside;
         list-style-type: circle;
         border-left: 1px solid var(--#{$prefix}border-color);
+
+        li {
+          scroll-margin-bottom: 24px;
+        }
       }
     }
 
@@ -193,6 +196,12 @@
         text-decoration: none;
       }
 
+      &.active {
+        padding-left: 7px;
+        scroll-margin-bottom: 24px;
+        background-color: var(--#{$prefix}foot2-bg);
+      }
+
       code {
         font: inherit;
       }

diff --git a/sphinx_nefertiti/__init__.py b/sphinx_nefertiti/__init__.py
@@ -6,7 +6,7 @@
 
 from sphinx_nefertiti import colorsets, docsver, fonts, links, pygments
 
-__version__ = "0.5.3"
+__version__ = "0.6.0"
 
 pages_wo_index = ["genindex", "search"]
 

diff --git a/sphinx_nefertiti/colorsets/sphinx-nefertiti-blue.min.css b/sphinx_nefertiti/colorsets/sphinx-nefertiti-blue.min.css
diff --git a/sphinx_nefertiti/colorsets/sphinx-nefertiti-blue.min.css.map b/sphinx_nefertiti/colorsets/sphinx-nefertiti-blue.min.css.map
diff --git a/sphinx_nefertiti/colorsets/sphinx-nefertiti-default.min.css b/sphinx_nefertiti/colorsets/sphinx-nefertiti-default.min.css
diff --git a/sphinx_nefertiti/colorsets/sphinx-nefertiti-default.min.css.map b/sphinx_nefertiti/colorsets/sphinx-nefertiti-default.min.css.map
diff --git a/sphinx_nefertiti/colorsets/sphinx-nefertiti-green.min.css b/sphinx_nefertiti/colorsets/sphinx-nefertiti-green.min.css
diff --git a/sphinx_nefertiti/colorsets/sphinx-nefertiti-green.min.css.map b/sphinx_nefertiti/colorsets/sphinx-nefertiti-green.min.css.map
diff --git a/sphinx_nefertiti/colorsets/sphinx-nefertiti-indigo.min.css b/sphinx_nefertiti/colorsets/sphinx-nefertiti-indigo.min.css
diff --git a/sphinx_nefertiti/colorsets/sphinx-nefertiti-indigo.min.css.map b/sphinx_nefertiti/colorsets/sphinx-nefertiti-indigo.min.css.map
diff --git a/sphinx_nefertiti/colorsets/sphinx-nefertiti-orange.min.css b/sphinx_nefertiti/colorsets/sphinx-nefertiti-orange.min.css
diff --git a/sphinx_nefertiti/colorsets/sphinx-nefertiti-orange.min.css.map b/sphinx_nefertiti/colorsets/sphinx-nefertiti-orange.min.css.map
diff --git a/sphinx_nefertiti/colorsets/sphinx-nefertiti-pink.min.css b/sphinx_nefertiti/colorsets/sphinx-nefertiti-pink.min.css
diff --git a/sphinx_nefertiti/colorsets/sphinx-nefertiti-pink.min.css.map b/sphinx_nefertiti/colorsets/sphinx-nefertiti-pink.min.css.map
diff --git a/sphinx_nefertiti/colorsets/sphinx-nefertiti-purple.min.css b/sphinx_nefertiti/colorsets/sphinx-nefertiti-purple.min.css
diff --git a/sphinx_nefertiti/colorsets/sphinx-nefertiti-purple.min.css.map b/sphinx_nefertiti/colorsets/sphinx-nefertiti-purple.min.css.map
diff --git a/sphinx_nefertiti/colorsets/sphinx-nefertiti-red.min.css b/sphinx_nefertiti/colorsets/sphinx-nefertiti-red.min.css
diff --git a/sphinx_nefertiti/colorsets/sphinx-nefertiti-red.min.css.map b/sphinx_nefertiti/colorsets/sphinx-nefertiti-red.min.css.map
diff --git a/sphinx_nefertiti/colorsets/sphinx-nefertiti-teal.min.css b/sphinx_nefertiti/colorsets/sphinx-nefertiti-teal.min.css
diff --git a/sphinx_nefertiti/colorsets/sphinx-nefertiti-teal.min.css.map b/sphinx_nefertiti/colorsets/sphinx-nefertiti-teal.min.css.map
diff --git a/sphinx_nefertiti/colorsets/sphinx-nefertiti-yellow.min.css b/sphinx_nefertiti/colorsets/sphinx-nefertiti-yellow.min.css
diff --git a/sphinx_nefertiti/colorsets/sphinx-nefertiti-yellow.min.css.map b/sphinx_nefertiti/colorsets/sphinx-nefertiti-yellow.min.css.map