@conduction/docusaurus-preset 3.14.0 → 3.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "3.14.0",
+  "version": "3.15.0",
   "scripts": {
     "prepack": "node scripts/prepack-bundle-css.js"
   },

package/src/css/brand.css

@@ -311,6 +311,31 @@ a:not(.navbar__link):not(.footer__link-item):not(.button):hover {
   background: transparent;
 }
 
+/* ============================================================
+   Heading anchor hash glyphs.
+
+   Docusaurus auto-generates a hidden `<a class="hash-link">#</a>`
+   inside every h2-h6 so readers can copy a deep link. Default
+   Infima styling renders the glyph in the primary brand colour
+   (cobalt) which is fine for the visible state, but the affordance
+   reads stronger when the hash itself lights up in KNVB orange
+   the moment the cursor touches it.
+
+   We render the glyph in cobalt-300 by default (visible-on-hover
+   of the heading, via the theme's anchorWithStickyNavbar rule)
+   and flip it to var(--c-orange-knvb) the moment the user hovers
+   or focuses the hash itself.
+   ============================================================ */
+.hash-link {
+  color: var(--c-cobalt-300);
+  transition: color 120ms ease;
+}
+.hash-link:hover,
+.hash-link:focus-visible {
+  color: var(--c-orange-knvb);
+  text-decoration: none;
+}
+
 /* ============================================================
    Body grows with content.