docs: Add table of contents navigation (#15212)

To ease navigating on pages that are long and having a birds-eye view of
all the available content.

This is done client-side and done via the files initially generated by
the `mdbook-pagetoc` plugin ([crates.io link
here](https://crates.io/crates/mdbook-pagetoc)).

<img width="600" alt="Screenshot 2024-07-25 at 13 34 08"
src="https://github.com/user-attachments/assets/a78c69e5-8cc4-4414-9d9c-27a4ceb27620">

---

Release Notes:

- N/A

---------

Co-authored-by: Marshall Bowers <elliott.codes@gmail.com>

docs/theme/css/chrome.css

@@ -560,7 +560,7 @@ ul#searchresults span.teaser em {
 
 .chapter li a.active {
   color: var(--sidebar-active);
-  background-color: rgba(8, 76, 207, 0.1);
+  background-color: var(--sidebar-active-bg);
 }
 
 .chapter li > a.toggle {

docs/theme/css/general.css

@@ -113,7 +113,7 @@ h6:target::before {
 */
 :target {
   /* Safari does not support logical properties */
-  scroll-margin-top: calc(var(--menu-bar-height) + 0.5em);
+  scroll-margin-top: calc(var(--menu-bar-height) + 2rem);
 }
 
 .page {
@@ -141,7 +141,7 @@ h6:target::before {
 
 .content {
   overflow-y: auto;
-  padding: 24px 4px 48px 4px;
+  padding: 48px 4px;
 }
 .content main {
   margin-inline-start: auto;

docs/theme/css/variables.css

@@ -6,7 +6,7 @@
   --sidebar-resize-indicator-space: 2px;
   --page-padding: 15px;
   --content-max-width: 750px;
-  --menu-bar-height: 50px;
+  --menu-bar-height: 64px;
   --font: "IA Writer Quattro S", sans-serif;
   --title-font: "Agrandir", "Helvetica Neue", Helvetica, Arial, sans-serif;
   --mono-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
@@ -20,7 +20,8 @@
 
   --sidebar-fg: hsl(0, 0%, 0%);
   --sidebar-non-existant: #aaaaaa;
-  --sidebar-active: rgb(8, 76, 207);
+  --sidebar-active: hsl(219, 93%, 42%);
+  --sidebar-active-bg: hsl(219, 93%, 42%, 0.1);
   --sidebar-spacer: #f4f4f4;
 
   --scrollbar: #8f8f8f;