diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 6da1c39..46c59f1 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -13,7 +13,7 @@ env: jobs: build: - runs-on: ubuntu-22.04 + runs-on: ubuntu-24.04 steps: - uses: actions/checkout@v2 @@ -21,7 +21,7 @@ jobs: - name: Setup mdBook uses: peaceiris/actions-mdbook@v2 with: - mdbook-version: "0.4.42" + mdbook-version: "0.5.2" - name: Build run: mdbook build diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index c54e6fa..3d9f09c 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -11,7 +11,7 @@ env: jobs: build: - runs-on: ubuntu-22.04 + runs-on: ubuntu-24.04 steps: - uses: actions/checkout@v2 @@ -19,7 +19,7 @@ jobs: - name: Setup mdBook uses: peaceiris/actions-mdbook@v2 with: - mdbook-version: "0.4.42" + mdbook-version: "0.5.2" - name: Build run: mdbook build diff --git a/book.toml b/book.toml index 507407c..c4f574e 100644 --- a/book.toml +++ b/book.toml @@ -1,7 +1,6 @@ [book] authors = ["Christian Beilschmidt "] language = "en" -multilingual = false src = "src" title = "Geo Engine Docs" diff --git a/src/operators/rasterstacker.md b/src/operators/rasterstacker.md index 56586dd..811f040 100644 --- a/src/operators/rasterstacker.md +++ b/src/operators/rasterstacker.md @@ -9,12 +9,9 @@ All inputs must have the same data type and spatial reference. ## Parameters -| Parameter | Type | Description | Example Value | -| ----------- | ------------- | ----------------------------------------------------------- | -------------------------------------- | -| renameBands | `RenameBands` | Specification of how to rename the bands to avoid conflicts | 
{ "type": "default" }
| -| Parameter | Type | Description | Example Value | -| ----------- | ------------- | ----------------------------------------------------------- | -------------------------------------- | -| renameBands | `RenameBands` | Specification of how to rename the bands to avoid conflicts | 
{ "type": "default" }
| +| Parameter | Type | Description | Example Value | +| ----------- | ------------- | ----------------------------------------------------------- | ----------------------- | +| renameBands | `RenameBands` | Specification of how to rename the bands to avoid conflicts | `{ "type": "default" }` | ## Types diff --git a/src/operators/temporalrasteraggregation.md b/src/operators/temporalrasteraggregation.md index 9832c4a..304b662 100644 --- a/src/operators/temporalrasteraggregation.md +++ b/src/operators/temporalrasteraggregation.md @@ -17,12 +17,12 @@ If we perform a query with an instant like [2021-01-01, 2021-01-01), we will get ## Parameters -| Parameter | Type | Description | Example Value | -| ----------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | -| `aggregation` | [`Aggregation`](#aggregation) | method for aggregating pixels | 
{
  "type": "max",
  "ignoreNoData": false
}
| -| `window` | [`TimeStep`](/datatypes/timestep.md) | length of time steps | 
{
  "granularity": "Months",
  "step": 1
}
| -| `windowReference` | [`TimeInstance`](/datatypes/timeinstance.md) | (Optional) anchor point for the aggregation windows. Default value is `1970-01-01T00:00:00Z` | `1970-01-01T00:00:00Z` | -| `outputType` | [`RasterDataType`](/datatypes/rasterdatatype.md) | (Optional) A raster data type for the output. Same as input, if not specified. | 
U8
                                                                         |
+| Parameter         | Type                                             | Description                                                                                  | Example Value                                                 |
+| ----------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
+| `aggregation`     | [`Aggregation`](#aggregation)                    | method for aggregating pixels                                                                | `{`
`  "type": "max",`
`  "ignoreNoData": false`
`}` |
+| `window`          | [`TimeStep`](/datatypes/timestep.md)             | length of time steps                                                                         | `{`
`  "granularity": "Months",`
`  "step": 1`
`}`   |
+| `windowReference` | [`TimeInstance`](/datatypes/timeinstance.md)     | (Optional) anchor point for the aggregation windows. Default value is `1970-01-01T00:00:00Z` | `1970-01-01T00:00:00Z`                                        |
+| `outputType`      | [`RasterDataType`](/datatypes/rasterdatatype.md) | (Optional) A raster data type for the output. Same as input, if not specified.               | `U8`                                                          |
 
 ## Types
 
diff --git a/theme/book.js b/theme/book.js
index 178f1e9..62d7c4c 100644
--- a/theme/book.js
+++ b/theme/book.js
@@ -1,14 +1,16 @@
-"use strict";
+'use strict';
+
+/* global default_theme, default_dark_theme, default_light_theme, hljs, ClipboardJS */
 
 // Fix back button cache problem
-window.onunload = function () { };
+window.onunload = function() { };
 
 // Global variable, shared between modules
 function playground_text(playground, hidden = true) {
-    let code_block = playground.querySelector("code");
+    const code_block = playground.querySelector('code');
 
-    if (window.ace && code_block.classList.contains("editable")) {
-        let editor = window.ace.edit(code_block);
+    if (window.ace && code_block.classList.contains('editable')) {
+        const editor = window.ace.edit(code_block);
         return editor.getValue();
     } else if (hidden) {
         return code_block.textContent;
@@ -21,25 +23,25 @@ function playground_text(playground, hidden = true) {
     function fetch_with_timeout(url, options, timeout = 6000) {
         return Promise.race([
             fetch(url, options),
-            new Promise((_, reject) => setTimeout(() => reject(new Error('timeout')), timeout))
+            new Promise((_, reject) => setTimeout(() => reject(new Error('timeout')), timeout)),
         ]);
     }
 
-    var playgrounds = Array.from(document.querySelectorAll(".playground"));
+    const playgrounds = Array.from(document.querySelectorAll('.playground'));
     if (playgrounds.length > 0) {
-        fetch_with_timeout("https://play.rust-lang.org/meta/crates", {
+        fetch_with_timeout('https://play.rust-lang.org/meta/crates', {
             headers: {
-                'Content-Type': "application/json",
+                'Content-Type': 'application/json',
             },
             method: 'POST',
             mode: 'cors',
         })
-        .then(response => response.json())
-        .then(response => {
+            .then(response => response.json())
+            .then(response => {
             // get list of crates available in the rust playground
-            let playground_crates = response.crates.map(item => item["id"]);
-            playgrounds.forEach(block => handle_crate_list_update(block, playground_crates));
-        });
+                const playground_crates = response.crates.map(item => item['id']);
+                playgrounds.forEach(block => handle_crate_list_update(block, playground_crates));
+            });
     }
 
     function handle_crate_list_update(playground_block, playground_crates) {
@@ -48,20 +50,20 @@ function playground_text(playground, hidden = true) {
 
         // and install on change listener to dynamically update ACE editors
         if (window.ace) {
-            let code_block = playground_block.querySelector("code");
-            if (code_block.classList.contains("editable")) {
-                let editor = window.ace.edit(code_block);
-                editor.addEventListener("change", function (e) {
+            const code_block = playground_block.querySelector('code');
+            if (code_block.classList.contains('editable')) {
+                const editor = window.ace.edit(code_block);
+                editor.addEventListener('change', () => {
                     update_play_button(playground_block, playground_crates);
                 });
                 // add Ctrl-Enter command to execute rust code
                 editor.commands.addCommand({
-                    name: "run",
+                    name: 'run',
                     bindKey: {
-                        win: "Ctrl-Enter",
-                        mac: "Ctrl-Enter"
+                        win: 'Ctrl-Enter',
+                        mac: 'Ctrl-Enter',
                     },
-                    exec: _editor => run_rust_code(playground_block)
+                    exec: _editor => run_rust_code(playground_block),
                 });
             }
         }
@@ -70,37 +72,38 @@ function playground_text(playground, hidden = true) {
     // updates the visibility of play button based on `no_run` class and
     // used crates vs ones available on https://play.rust-lang.org
     function update_play_button(pre_block, playground_crates) {
-        var play_button = pre_block.querySelector(".play-button");
+        const play_button = pre_block.querySelector('.play-button');
 
         // skip if code is `no_run`
-        if (pre_block.querySelector('code').classList.contains("no_run")) {
-            play_button.classList.add("hidden");
+        if (pre_block.querySelector('code').classList.contains('no_run')) {
+            play_button.classList.add('hidden');
             return;
         }
 
         // get list of `extern crate`'s from snippet
-        var txt = playground_text(pre_block);
-        var re = /extern\s+crate\s+([a-zA-Z_0-9]+)\s*;/g;
-        var snippet_crates = [];
-        var item;
+        const txt = playground_text(pre_block);
+        const re = /extern\s+crate\s+([a-zA-Z_0-9]+)\s*;/g;
+        const snippet_crates = [];
+        let item;
         while (item = re.exec(txt)) {
             snippet_crates.push(item[1]);
         }
 
         // check if all used crates are available on play.rust-lang.org
-        var all_available = snippet_crates.every(function (elem) {
+        const all_available = snippet_crates.every(function(elem) {
             return playground_crates.indexOf(elem) > -1;
         });
 
         if (all_available) {
-            play_button.classList.remove("hidden");
+            play_button.classList.remove('hidden');
+            play_button.hidden = false;
         } else {
-            play_button.classList.add("hidden");
+            play_button.classList.add('hidden');
         }
     }
 
     function run_rust_code(code_block) {
-        var result_block = code_block.querySelector(".result");
+        let result_block = code_block.querySelector('.result');
         if (!result_block) {
             result_block = document.createElement('code');
             result_block.className = 'result hljs language-bash';
@@ -108,105 +111,121 @@ function playground_text(playground, hidden = true) {
             code_block.append(result_block);
         }
 
-        let text = playground_text(code_block);
-        let classes = code_block.querySelector('code').classList;
-        let edition = "2015";
-        if(classes.contains("edition2018")) {
-            edition = "2018";
-        } else if(classes.contains("edition2021")) {
-            edition = "2021";
-        }
-        var params = {
-            version: "stable",
-            optimize: "0",
+        const text = playground_text(code_block);
+        const classes = code_block.querySelector('code').classList;
+        let edition = '2015';
+        classes.forEach(className => {
+            if (className.startsWith('edition')) {
+                edition = className.slice(7);
+            }
+        });
+        const params = {
+            version: 'stable',
+            optimize: '0',
             code: text,
-            edition: edition
+            edition: edition,
         };
 
-        if (text.indexOf("#![feature") !== -1) {
-            params.version = "nightly";
+        if (text.indexOf('#![feature') !== -1) {
+            params.version = 'nightly';
         }
 
-        result_block.innerText = "Running...";
+        result_block.innerText = 'Running...';
 
-        fetch_with_timeout("https://play.rust-lang.org/evaluate.json", {
+        fetch_with_timeout('https://play.rust-lang.org/evaluate.json', {
             headers: {
-                'Content-Type': "application/json",
+                'Content-Type': 'application/json',
             },
             method: 'POST',
             mode: 'cors',
-            body: JSON.stringify(params)
+            body: JSON.stringify(params),
         })
-        .then(response => response.json())
-        .then(response => {
-            if (response.result.trim() === '') {
-                result_block.innerText = "No output";
-                result_block.classList.add("result-no-output");
-            } else {
-                result_block.innerText = response.result;
-                result_block.classList.remove("result-no-output");
-            }
-        })
-        .catch(error => result_block.innerText = "Playground Communication: " + error.message);
+            .then(response => response.json())
+            .then(response => {
+                if (response.result.trim() === '') {
+                    result_block.innerText = 'No output';
+                    result_block.classList.add('result-no-output');
+                } else {
+                    result_block.innerText = response.result;
+                    result_block.classList.remove('result-no-output');
+                }
+            })
+            .catch(error => result_block.innerText = 'Playground Communication: ' + error.message);
     }
 
     // Syntax highlighting Configuration
     hljs.configure({
         tabReplace: '    ', // 4 spaces
-        languages: [],      // Languages used for auto-detection
+        languages: [], // Languages used for auto-detection
     });
 
-    let code_nodes = Array
+    const code_nodes = Array
         .from(document.querySelectorAll('code'))
         // Don't highlight `inline code` blocks in headers.
-        .filter(function (node) {return !node.parentElement.classList.contains("header"); });
+        .filter(function(node) {
+            return !node.parentElement.classList.contains('header');
+        });
 
     if (window.ace) {
         // language-rust class needs to be removed for editable
         // blocks or highlightjs will capture events
         code_nodes
-            .filter(function (node) {return node.classList.contains("editable"); })
-            .forEach(function (block) { block.classList.remove('language-rust'); });
+            .filter(function(node) {
+                return node.classList.contains('editable');
+            })
+            .forEach(function(block) {
+                block.classList.remove('language-rust');
+            });
 
         code_nodes
-            .filter(function (node) {return !node.classList.contains("editable"); })
-            .forEach(function (block) { hljs.highlightBlock(block); });
+            .filter(function(node) {
+                return !node.classList.contains('editable');
+            })
+            .forEach(function(block) {
+                hljs.highlightBlock(block);
+            });
     } else {
-        code_nodes.forEach(function (block) { hljs.highlightBlock(block); });
+        code_nodes.forEach(function(block) {
+            hljs.highlightBlock(block);
+        });
     }
 
     // Adding the hljs class gives code blocks the color css
     // even if highlighting doesn't apply
-    code_nodes.forEach(function (block) { block.classList.add('hljs'); });
+    code_nodes.forEach(function(block) {
+        block.classList.add('hljs');
+    });
 
-    Array.from(document.querySelectorAll("code.hljs")).forEach(function (block) {
+    Array.from(document.querySelectorAll('code.hljs')).forEach(function(block) {
 
-        var lines = Array.from(block.querySelectorAll('.boring'));
+        const lines = Array.from(block.querySelectorAll('.boring'));
         // If no lines were hidden, return
-        if (!lines.length) { return; }
-        block.classList.add("hide-boring");
+        if (!lines.length) {
+            return;
+        }
+        block.classList.add('hide-boring');
 
-        var buttons = document.createElement('div');
+        const buttons = document.createElement('div');
         buttons.className = 'buttons';
-        buttons.innerHTML = "";
+        buttons.innerHTML = '';
+        buttons.firstChild.innerHTML = document.getElementById('fa-eye').innerHTML;
 
         // add expand button
-        var pre_block = block.parentNode;
+        const pre_block = block.parentNode;
         pre_block.insertBefore(buttons, pre_block.firstChild);
 
-        pre_block.querySelector('.buttons').addEventListener('click', function (e) {
-            if (e.target.classList.contains('fa-eye')) {
-                e.target.classList.remove('fa-eye');
-                e.target.classList.add('fa-eye-slash');
-                e.target.title = 'Hide lines';
-                e.target.setAttribute('aria-label', e.target.title);
+        buttons.firstChild.addEventListener('click', function(e) {
+            if (this.title === 'Show hidden lines') {
+                this.innerHTML = document.getElementById('fa-eye-slash').innerHTML;
+                this.title = 'Hide lines';
+                this.setAttribute('aria-label', e.target.title);
 
                 block.classList.remove('hide-boring');
-            } else if (e.target.classList.contains('fa-eye-slash')) {
-                e.target.classList.remove('fa-eye-slash');
-                e.target.classList.add('fa-eye');
-                e.target.title = 'Show hidden lines';
-                e.target.setAttribute('aria-label', e.target.title);
+            } else if (this.title === 'Hide lines') {
+                this.innerHTML = document.getElementById('fa-eye').innerHTML;
+                this.title = 'Show hidden lines';
+                this.setAttribute('aria-label', e.target.title);
 
                 block.classList.add('hide-boring');
             }
@@ -214,21 +233,21 @@ function playground_text(playground, hidden = true) {
     });
 
     if (window.playground_copyable) {
-        Array.from(document.querySelectorAll('pre code')).forEach(function (block) {
-            var pre_block = block.parentNode;
+        Array.from(document.querySelectorAll('pre code')).forEach(function(block) {
+            const pre_block = block.parentNode;
             if (!pre_block.classList.contains('playground')) {
-                var buttons = pre_block.querySelector(".buttons");
+                let buttons = pre_block.querySelector('.buttons');
                 if (!buttons) {
                     buttons = document.createElement('div');
                     buttons.className = 'buttons';
                     pre_block.insertBefore(buttons, pre_block.firstChild);
                 }
 
-                var clipButton = document.createElement('button');
+                const clipButton = document.createElement('button');
                 clipButton.className = 'clip-button';
                 clipButton.title = 'Copy to clipboard';
                 clipButton.setAttribute('aria-label', clipButton.title);
-                clipButton.innerHTML = '';
+                clipButton.innerHTML = '';
 
                 buttons.insertBefore(clipButton, buttons.firstChild);
             }
@@ -236,28 +255,29 @@ function playground_text(playground, hidden = true) {
     }
 
     // Process playground code blocks
-    Array.from(document.querySelectorAll(".playground")).forEach(function (pre_block) {
+    Array.from(document.querySelectorAll('.playground')).forEach(function(pre_block) {
         // Add play button
-        var buttons = pre_block.querySelector(".buttons");
+        let buttons = pre_block.querySelector('.buttons');
         if (!buttons) {
             buttons = document.createElement('div');
             buttons.className = 'buttons';
             pre_block.insertBefore(buttons, pre_block.firstChild);
         }
 
-        var runCodeButton = document.createElement('button');
-        runCodeButton.className = 'fa fa-play play-button';
+        const runCodeButton = document.createElement('button');
+        runCodeButton.className = 'play-button';
         runCodeButton.hidden = true;
         runCodeButton.title = 'Run this code';
         runCodeButton.setAttribute('aria-label', runCodeButton.title);
+        runCodeButton.innerHTML = document.getElementById('fa-play').innerHTML;
 
         buttons.insertBefore(runCodeButton, buttons.firstChild);
-        runCodeButton.addEventListener('click', function (e) {
+        runCodeButton.addEventListener('click', () => {
             run_rust_code(pre_block);
         });
 
         if (window.playground_copyable) {
-            var copyCodeClipboardButton = document.createElement('button');
+            const copyCodeClipboardButton = document.createElement('button');
             copyCodeClipboardButton.className = 'clip-button';
             copyCodeClipboardButton.innerHTML = '';
             copyCodeClipboardButton.title = 'Copy to clipboard';
@@ -266,17 +286,19 @@ function playground_text(playground, hidden = true) {
             buttons.insertBefore(copyCodeClipboardButton, buttons.firstChild);
         }
 
-        let code_block = pre_block.querySelector("code");
-        if (window.ace && code_block.classList.contains("editable")) {
-            var undoChangesButton = document.createElement('button');
-            undoChangesButton.className = 'fa fa-history reset-button';
+        const code_block = pre_block.querySelector('code');
+        if (window.ace && code_block.classList.contains('editable')) {
+            const undoChangesButton = document.createElement('button');
+            undoChangesButton.className = 'reset-button';
             undoChangesButton.title = 'Undo changes';
             undoChangesButton.setAttribute('aria-label', undoChangesButton.title);
+            undoChangesButton.innerHTML +=
+                document.getElementById('fa-clock-rotate-left').innerHTML;
 
             buttons.insertBefore(undoChangesButton, buttons.firstChild);
 
-            undoChangesButton.addEventListener('click', function () {
-                let editor = window.ace.edit(code_block);
+            undoChangesButton.addEventListener('click', function() {
+                const editor = window.ace.edit(code_block);
                 editor.setValue(editor.originalCode);
                 editor.clearSelection();
             });
@@ -285,31 +307,37 @@ function playground_text(playground, hidden = true) {
 })();
 
 (function themes() {
-    var html = document.querySelector('html');
-    var themeToggleButton = document.getElementById('theme-toggle');
-    var themePopup = document.getElementById('theme-list');
-    var themeColorMetaTag = document.querySelector('meta[name="theme-color"]');
-    var themeIds = [];
-    themePopup.querySelectorAll('button.theme').forEach(function (el) {
+    const html = document.querySelector('html');
+    const themeToggleButton = document.getElementById('mdbook-theme-toggle');
+    const themePopup = document.getElementById('mdbook-theme-list');
+    const themeColorMetaTag = document.querySelector('meta[name="theme-color"]');
+    const themeIds = [];
+    themePopup.querySelectorAll('button.theme').forEach(function(el) {
         themeIds.push(el.id);
     });
-    var stylesheets = {
-        ayuHighlight: document.querySelector("[href$='ayu-highlight.css']"),
-        tomorrowNight: document.querySelector("[href$='tomorrow-night.css']"),
-        highlight: document.querySelector("[href$='highlight.css']"),
+    const stylesheets = {
+        ayuHighlight: document.querySelector('#mdbook-ayu-highlight-css'),
+        tomorrowNight: document.querySelector('#mdbook-tomorrow-night-css'),
+        highlight: document.querySelector('#mdbook-highlight-css'),
     };
 
     function showThemes() {
         themePopup.style.display = 'block';
         themeToggleButton.setAttribute('aria-expanded', true);
-        themePopup.querySelector("button#" + get_theme()).focus();
+        themePopup.querySelector('button#mdbook-theme-' + get_theme()).focus();
     }
 
     function updateThemeSelected() {
-        themePopup.querySelectorAll('.theme-selected').forEach(function (el) {
+        themePopup.querySelectorAll('.theme-selected').forEach(function(el) {
             el.classList.remove('theme-selected');
         });
-        themePopup.querySelector("button#" + get_theme()).classList.add('theme-selected');
+        const selected = get_saved_theme() ?? 'default_theme';
+        let element = themePopup.querySelector('button#mdbook-theme-' + selected);
+        if (element === null) {
+            // Fall back in case there is no "Default" item.
+            element = themePopup.querySelector('button#mdbook-theme-' + get_theme());
+        }
+        element.classList.add('theme-selected');
     }
 
     function hideThemes() {
@@ -318,64 +346,91 @@ function playground_text(playground, hidden = true) {
         themeToggleButton.focus();
     }
 
+    function get_saved_theme() {
+        let theme = null;
+        try {
+            theme = localStorage.getItem('mdbook-theme');
+        } catch {
+            // ignore error.
+        }
+        return theme;
+    }
+
+    function delete_saved_theme() {
+        localStorage.removeItem('mdbook-theme');
+    }
+
     function get_theme() {
-        var theme;
-        try { theme = localStorage.getItem('mdbook-theme'); } catch (e) { }
-        if (theme === null || theme === undefined || !themeIds.includes(theme)) {
-            return default_theme;
+        const theme = get_saved_theme();
+        if (theme === null || theme === undefined || !themeIds.includes('mdbook-theme-' + theme)) {
+            if (typeof default_dark_theme === 'undefined') {
+                // A customized index.hbs might not define this, so fall back to
+                // old behavior of determining the default on page load.
+                return default_theme;
+            }
+            return window.matchMedia('(prefers-color-scheme: dark)').matches
+                ? default_dark_theme
+                : default_light_theme;
         } else {
             return theme;
         }
     }
 
+    let previousTheme = default_theme;
     function set_theme(theme, store = true) {
         let ace_theme;
 
-        if (theme == 'coal' || theme == 'navy') {
+        if (theme === 'coal' || theme === 'navy') {
             stylesheets.ayuHighlight.disabled = true;
             stylesheets.tomorrowNight.disabled = false;
             stylesheets.highlight.disabled = true;
 
-            ace_theme = "ace/theme/tomorrow_night";
-        } else if (theme == 'ayu') {
+            ace_theme = 'ace/theme/tomorrow_night';
+        } else if (theme === 'ayu') {
             stylesheets.ayuHighlight.disabled = false;
             stylesheets.tomorrowNight.disabled = true;
             stylesheets.highlight.disabled = true;
-            ace_theme = "ace/theme/tomorrow_night";
+            ace_theme = 'ace/theme/tomorrow_night';
         } else {
             stylesheets.ayuHighlight.disabled = true;
             stylesheets.tomorrowNight.disabled = true;
             stylesheets.highlight.disabled = false;
-            ace_theme = "ace/theme/dawn";
+            ace_theme = 'ace/theme/dawn';
         }
 
-        setTimeout(function () {
+        setTimeout(function() {
             themeColorMetaTag.content = getComputedStyle(document.documentElement).backgroundColor;
         }, 1);
 
         if (window.ace && window.editors) {
-            window.editors.forEach(function (editor) {
+            window.editors.forEach(function(editor) {
                 editor.setTheme(ace_theme);
             });
         }
 
-        var previousTheme = get_theme();
-
         if (store) {
-            try { localStorage.setItem('mdbook-theme', theme); } catch (e) { }
+            try {
+                localStorage.setItem('mdbook-theme', theme);
+            } catch {
+                // ignore error.
+            }
         }
 
         html.classList.remove(previousTheme);
         html.classList.add(theme);
+        previousTheme = theme;
         updateThemeSelected();
     }
 
-    // Set theme
-    var theme = get_theme();
+    const query = window.matchMedia('(prefers-color-scheme: dark)');
+    query.onchange = function() {
+        set_theme(get_theme(), false);
+    };
 
-    set_theme(theme, false);
+    // Set theme.
+    set_theme(get_theme(), false);
 
-    themeToggleButton.addEventListener('click', function () {
+    themeToggleButton.addEventListener('click', function() {
         if (themePopup.style.display === 'block') {
             hideThemes();
         } else {
@@ -383,163 +438,208 @@ function playground_text(playground, hidden = true) {
         }
     });
 
-    themePopup.addEventListener('click', function (e) {
-        var theme;
-        if (e.target.className === "theme") {
+    themePopup.addEventListener('click', function(e) {
+        let theme;
+        if (e.target.className === 'theme') {
             theme = e.target.id;
-        } else if (e.target.parentElement.className === "theme") {
+        } else if (e.target.parentElement.className === 'theme') {
             theme = e.target.parentElement.id;
         } else {
             return;
         }
-        set_theme(theme);
+        theme = theme.replace(/^mdbook-theme-/, '');
+
+        if (theme === 'default_theme' || theme === null) {
+            delete_saved_theme();
+            set_theme(get_theme(), false);
+        } else {
+            set_theme(theme);
+        }
     });
 
     themePopup.addEventListener('focusout', function(e) {
         // e.relatedTarget is null in Safari and Firefox on macOS (see workaround below)
-        if (!!e.relatedTarget && !themeToggleButton.contains(e.relatedTarget) && !themePopup.contains(e.relatedTarget)) {
+        if (!!e.relatedTarget &&
+            !themeToggleButton.contains(e.relatedTarget) &&
+            !themePopup.contains(e.relatedTarget)
+        ) {
             hideThemes();
         }
     });
 
-    // Should not be needed, but it works around an issue on macOS & iOS: https://github.com/rust-lang/mdBook/issues/628
+    // Should not be needed, but it works around an issue on macOS & iOS:
+    // https://github.com/rust-lang/mdBook/issues/628
     document.addEventListener('click', function(e) {
-        if (themePopup.style.display === 'block' && !themeToggleButton.contains(e.target) && !themePopup.contains(e.target)) {
+        if (themePopup.style.display === 'block' &&
+            !themeToggleButton.contains(e.target) &&
+            !themePopup.contains(e.target)
+        ) {
             hideThemes();
         }
     });
 
-    document.addEventListener('keydown', function (e) {
-        if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) { return; }
-        if (!themePopup.contains(e.target)) { return; }
+    document.addEventListener('keydown', function(e) {
+        if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
+            return;
+        }
+        if (!themePopup.contains(e.target)) {
+            return;
+        }
 
+        let li;
         switch (e.key) {
-            case 'Escape':
-                e.preventDefault();
-                hideThemes();
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                var li = document.activeElement.parentElement;
-                if (li && li.previousElementSibling) {
-                    li.previousElementSibling.querySelector('button').focus();
-                }
-                break;
-            case 'ArrowDown':
-                e.preventDefault();
-                var li = document.activeElement.parentElement;
-                if (li && li.nextElementSibling) {
-                    li.nextElementSibling.querySelector('button').focus();
-                }
-                break;
-            case 'Home':
-                e.preventDefault();
-                themePopup.querySelector('li:first-child button').focus();
-                break;
-            case 'End':
-                e.preventDefault();
-                themePopup.querySelector('li:last-child button').focus();
-                break;
+        case 'Escape':
+            e.preventDefault();
+            hideThemes();
+            break;
+        case 'ArrowUp':
+            e.preventDefault();
+            li = document.activeElement.parentElement;
+            if (li && li.previousElementSibling) {
+                li.previousElementSibling.querySelector('button').focus();
+            }
+            break;
+        case 'ArrowDown':
+            e.preventDefault();
+            li = document.activeElement.parentElement;
+            if (li && li.nextElementSibling) {
+                li.nextElementSibling.querySelector('button').focus();
+            }
+            break;
+        case 'Home':
+            e.preventDefault();
+            themePopup.querySelector('li:first-child button').focus();
+            break;
+        case 'End':
+            e.preventDefault();
+            themePopup.querySelector('li:last-child button').focus();
+            break;
         }
     });
 })();
 
 (function sidebar() {
-    var body = document.querySelector("body");
-    var sidebar = document.getElementById("sidebar");
-    var sidebarLinks = document.querySelectorAll('#sidebar a');
-    var sidebarToggleButton = document.getElementById("sidebar-toggle");
-    var sidebarResizeHandle = document.getElementById("sidebar-resize-handle");
-    var firstContact = null;
+    const sidebar = document.getElementById('mdbook-sidebar');
+    const sidebarLinks = document.querySelectorAll('#mdbook-sidebar a');
+    const sidebarToggleButton = document.getElementById('mdbook-sidebar-toggle');
+    const sidebarResizeHandle = document.getElementById('mdbook-sidebar-resize-handle');
+    const sidebarCheckbox = document.getElementById('mdbook-sidebar-toggle-anchor');
+    let firstContact = null;
+
+
+    /* Because we cannot change the `display` using only CSS after/before the transition, we
+       need JS to do it. We change the display to prevent the browsers search to find text inside
+       the collapsed sidebar. */
+    if (!document.documentElement.classList.contains('sidebar-visible')) {
+        sidebar.style.display = 'none';
+    }
+    sidebar.addEventListener('transitionend', () => {
+        /* We only change the display to "none" if we're collapsing the sidebar. */
+        if (!sidebarCheckbox.checked) {
+            sidebar.style.display = 'none';
+        }
+    });
+    sidebarToggleButton.addEventListener('click', () => {
+        /* To allow the sidebar expansion animation, we first need to put back the display. */
+        if (!sidebarCheckbox.checked) {
+            sidebar.style.display = '';
+            // Workaround for Safari skipping the animation when changing
+            // `display` and a transform in the same event loop. This forces a
+            // reflow after updating the display.
+            sidebar.offsetHeight;
+        }
+    });
 
     function showSidebar() {
-        body.classList.remove('sidebar-hidden')
-        body.classList.add('sidebar-visible');
-        Array.from(sidebarLinks).forEach(function (link) {
+        document.documentElement.classList.add('sidebar-visible');
+        Array.from(sidebarLinks).forEach(function(link) {
             link.setAttribute('tabIndex', 0);
         });
         sidebarToggleButton.setAttribute('aria-expanded', true);
         sidebar.setAttribute('aria-hidden', false);
-        try { localStorage.setItem('mdbook-sidebar', 'visible'); } catch (e) { }
+        try {
+            localStorage.setItem('mdbook-sidebar', 'visible');
+        } catch {
+            // Ignore error.
+        }
     }
 
     function hideSidebar() {
-        body.classList.remove('sidebar-visible')
-        body.classList.add('sidebar-hidden');
-        Array.from(sidebarLinks).forEach(function (link) {
+        document.documentElement.classList.remove('sidebar-visible');
+        Array.from(sidebarLinks).forEach(function(link) {
             link.setAttribute('tabIndex', -1);
         });
         sidebarToggleButton.setAttribute('aria-expanded', false);
         sidebar.setAttribute('aria-hidden', true);
-        try { localStorage.setItem('mdbook-sidebar', 'hidden'); } catch (e) { }
+        try {
+            localStorage.setItem('mdbook-sidebar', 'hidden');
+        } catch {
+            // Ignore error.
+        }
     }
 
     // Toggle sidebar
-    sidebarToggleButton.addEventListener('click', function sidebarToggle() {
-        if (body.classList.contains("sidebar-hidden")) {
-            var current_width = parseInt(
-                document.documentElement.style.getPropertyValue('--sidebar-width'), 10);
+    sidebarCheckbox.addEventListener('change', function sidebarToggle() {
+        if (sidebarCheckbox.checked) {
+            const current_width = parseInt(
+                document.documentElement.style.getPropertyValue('--sidebar-target-width'), 10);
             if (current_width < 150) {
-                document.documentElement.style.setProperty('--sidebar-width', '150px');
+                document.documentElement.style.setProperty('--sidebar-target-width', '150px');
             }
             showSidebar();
-        } else if (body.classList.contains("sidebar-visible")) {
-            hideSidebar();
         } else {
-            if (getComputedStyle(sidebar)['transform'] === 'none') {
-                hideSidebar();
-            } else {
-                showSidebar();
-            }
+            hideSidebar();
         }
     });
 
     sidebarResizeHandle.addEventListener('mousedown', initResize, false);
 
-    function initResize(e) {
+    function initResize() {
         window.addEventListener('mousemove', resize, false);
         window.addEventListener('mouseup', stopResize, false);
-        body.classList.add('sidebar-resizing');
+        document.documentElement.classList.add('sidebar-resizing');
     }
     function resize(e) {
-        var pos = (e.clientX - sidebar.offsetLeft);
+        let pos = e.clientX - sidebar.offsetLeft;
         if (pos < 20) {
             hideSidebar();
         } else {
-            if (body.classList.contains("sidebar-hidden")) {
+            if (!document.documentElement.classList.contains('sidebar-visible')) {
                 showSidebar();
             }
             pos = Math.min(pos, window.innerWidth - 100);
-            document.documentElement.style.setProperty('--sidebar-width', pos + 'px');
+            document.documentElement.style.setProperty('--sidebar-target-width', pos + 'px');
         }
     }
     //on mouseup remove windows functions mousemove & mouseup
-    function stopResize(e) {
-        body.classList.remove('sidebar-resizing');
+    function stopResize() {
+        document.documentElement.classList.remove('sidebar-resizing');
         window.removeEventListener('mousemove', resize, false);
         window.removeEventListener('mouseup', stopResize, false);
     }
 
-    document.addEventListener('touchstart', function (e) {
+    document.addEventListener('touchstart', function(e) {
         firstContact = {
             x: e.touches[0].clientX,
-            time: Date.now()
+            time: Date.now(),
         };
     }, { passive: true });
 
-    document.addEventListener('touchmove', function (e) {
-        if (!firstContact)
+    document.addEventListener('touchmove', function(e) {
+        if (!firstContact) {
             return;
+        }
 
-        var curX = e.touches[0].clientX;
-        var xDiff = curX - firstContact.x,
+        const curX = e.touches[0].clientX;
+        const xDiff = curX - firstContact.x,
             tDiff = Date.now() - firstContact.time;
 
         if (tDiff < 250 && Math.abs(xDiff) >= 150) {
-            if (xDiff >= 0 && firstContact.x < Math.min(document.body.clientWidth * 0.25, 300))
+            if (xDiff >= 0 && firstContact.x < Math.min(document.body.clientWidth * 0.25, 300)) {
                 showSidebar();
-            else if (xDiff < 0 && curX < 300)
+            } else if (xDiff < 0 && curX < 300) {
                 hideSidebar();
+            }
 
             firstContact = null;
         }
@@ -547,49 +647,102 @@ function playground_text(playground, hidden = true) {
 })();
 
 (function chapterNavigation() {
-    document.addEventListener('keydown', function (e) {
-        if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) { return; }
-        if (window.search && window.search.hasFocus()) { return; }
-        var html = document.querySelector('html');
+    document.addEventListener('keydown', function(e) {
+        if (e.altKey || e.ctrlKey || e.metaKey) {
+            return;
+        }
+        if (window.search && window.search.hasFocus()) {
+            return;
+        }
+        const html = document.querySelector('html');
 
         function next() {
-            var nextButton = document.querySelector('.nav-chapters.next');
+            const nextButton = document.querySelector('.nav-chapters.next');
             if (nextButton) {
                 window.location.href = nextButton.href;
             }
         }
         function prev() {
-            var previousButton = document.querySelector('.nav-chapters.previous');
+            const previousButton = document.querySelector('.nav-chapters.previous');
             if (previousButton) {
                 window.location.href = previousButton.href;
             }
         }
-        switch (e.key) {
-            case 'ArrowRight':
-                e.preventDefault();
-                if (html.dir == 'rtl') {
-                    prev();
-                } else {
-                    next();
+        function showHelp() {
+            const container = document.getElementById('mdbook-help-container');
+            const overlay = document.getElementById('mdbook-help-popup');
+            container.style.display = 'flex';
+
+            // Clicking outside the popup will dismiss it.
+            const mouseHandler = event => {
+                if (overlay.contains(event.target)) {
+                    return;
                 }
-                break;
-            case 'ArrowLeft':
-                e.preventDefault();
-                if (html.dir == 'rtl') {
-                    next();
-                } else {
-                    prev();
+                if (event.button !== 0) {
+                    return;
                 }
-                break;
+                event.preventDefault();
+                event.stopPropagation();
+                document.removeEventListener('mousedown', mouseHandler);
+                hideHelp();
+            };
+
+            // Pressing esc will dismiss the popup.
+            const escapeKeyHandler = event => {
+                if (event.key === 'Escape') {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    document.removeEventListener('keydown', escapeKeyHandler, true);
+                    hideHelp();
+                }
+            };
+            document.addEventListener('keydown', escapeKeyHandler, true);
+            document.getElementById('mdbook-help-container')
+                .addEventListener('mousedown', mouseHandler);
+        }
+        function hideHelp() {
+            document.getElementById('mdbook-help-container').style.display = 'none';
+        }
+
+        // Usually needs the Shift key to be pressed
+        switch (e.key) {
+        case '?':
+            e.preventDefault();
+            showHelp();
+            break;
+        }
+
+        // Rest of the keys are only active when the Shift key is not pressed
+        if (e.shiftKey) {
+            return;
+        }
+
+        switch (e.key) {
+        case 'ArrowRight':
+            e.preventDefault();
+            if (html.dir === 'rtl') {
+                prev();
+            } else {
+                next();
+            }
+            break;
+        case 'ArrowLeft':
+            e.preventDefault();
+            if (html.dir === 'rtl') {
+                next();
+            } else {
+                prev();
+            }
+            break;
         }
     });
 })();
 
 (function clipboard() {
-    var clipButtons = document.querySelectorAll('.clip-button');
+    const clipButtons = document.querySelectorAll('.clip-button');
 
     function hideTooltip(elem) {
-        elem.firstChild.innerText = "";
+        elem.firstChild.innerText = '';
         elem.className = 'clip-button';
     }
 
@@ -598,58 +751,58 @@ function playground_text(playground, hidden = true) {
         elem.className = 'clip-button tooltipped';
     }
 
-    var clipboardSnippets = new ClipboardJS('.clip-button', {
-        text: function (trigger) {
+    const clipboardSnippets = new ClipboardJS('.clip-button', {
+        text: function(trigger) {
             hideTooltip(trigger);
-            let playground = trigger.closest("pre");
+            const playground = trigger.closest('pre');
             return playground_text(playground, false);
-        }
+        },
     });
 
-    Array.from(clipButtons).forEach(function (clipButton) {
-        clipButton.addEventListener('mouseout', function (e) {
+    Array.from(clipButtons).forEach(function(clipButton) {
+        clipButton.addEventListener('mouseout', function(e) {
             hideTooltip(e.currentTarget);
         });
     });
 
-    clipboardSnippets.on('success', function (e) {
+    clipboardSnippets.on('success', function(e) {
         e.clearSelection();
-        showTooltip(e.trigger, "Copied!");
+        showTooltip(e.trigger, 'Copied!');
     });
 
-    clipboardSnippets.on('error', function (e) {
-        showTooltip(e.trigger, "Clipboard error!");
+    clipboardSnippets.on('error', function(e) {
+        showTooltip(e.trigger, 'Clipboard error!');
     });
 })();
 
-(function scrollToTop () {
-    var menuTitle = document.querySelector('.menu-title');
+(function scrollToTop() {
+    const menuTitle = document.querySelector('.menu-title');
 
-    menuTitle.addEventListener('click', function () {
+    menuTitle.addEventListener('click', function() {
         document.scrollingElement.scrollTo({ top: 0, behavior: 'smooth' });
     });
 })();
 
 (function controllMenu() {
-    var menu = document.getElementById('menu-bar');
+    const menu = document.getElementById('mdbook-menu-bar');
 
     (function controllPosition() {
-        var scrollTop = document.scrollingElement.scrollTop;
-        var prevScrollTop = scrollTop;
-        var minMenuY = -menu.clientHeight - 50;
-        // When the script loads, the page can be at any scroll (e.g. if you reforesh it).
+        let scrollTop = document.scrollingElement.scrollTop;
+        let prevScrollTop = scrollTop;
+        const minMenuY = -menu.clientHeight - 50;
+        // When the script loads, the page can be at any scroll (e.g. if you refresh it).
         menu.style.top = scrollTop + 'px';
         // Same as parseInt(menu.style.top.slice(0, -2), but faster
-        var topCache = menu.style.top.slice(0, -2);
+        let topCache = menu.style.top.slice(0, -2);
         menu.classList.remove('sticky');
-        var stickyCache = false; // Same as menu.classList.contains('sticky'), but faster
-        document.addEventListener('scroll', function () {
+        let stickyCache = false; // Same as menu.classList.contains('sticky'), but faster
+        document.addEventListener('scroll', function() {
             scrollTop = Math.max(document.scrollingElement.scrollTop, 0);
             // `null` means that it doesn't need to be updated
-            var nextSticky = null;
-            var nextTop = null;
-            var scrollDown = scrollTop > prevScrollTop;
-            var menuPosAbsoluteY = topCache - scrollTop;
+            let nextSticky = null;
+            let nextTop = null;
+            const scrollDown = scrollTop > prevScrollTop;
+            const menuPosAbsoluteY = topCache - scrollTop;
             if (scrollDown) {
                 nextSticky = false;
                 if (menuPosAbsoluteY > 0) {
diff --git a/theme/css/chrome.css b/theme/css/chrome.css
index 9562872..c832692 100644
--- a/theme/css/chrome.css
+++ b/theme/css/chrome.css
@@ -1,116 +1,114 @@
 /* CSS for UI elements (a.k.a. chrome) */
 
 html {
-  scrollbar-color: var(--scrollbar) var(--bg);
+    scrollbar-color: var(--scrollbar) transparent;
 }
-#searchresults a,
+#mdbook-searchresults a,
 .content a:link,
 a:visited,
 a > .hljs {
-  color: var(--links);
+    color: var(--links);
 }
 
 /*
-    body-container is necessary because mobile browsers don't seem to like
+    mdbook-body-container is necessary because mobile browsers don't seem to like
     overflow-x on the body tag when there is a  tag.
 */
-#body-container {
-  /*
+#mdbook-body-container {
+    /*
         This is used when the sidebar pushes the body content off the side of
         the screen on small screens. Without it, dragging on mobile Safari
         will want to reposition the viewport in a weird way.
     */
-  overflow-x: clip;
+    overflow-x: clip;
 }
 
 /* Menu Bar */
 
-#menu-bar,
-#menu-bar-hover-placeholder {
-  z-index: 101;
-  margin: auto calc(0px - var(--page-padding));
-}
-#menu-bar {
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  background-color: var(--bg);
-  border-block-end-color: var(--bg);
-  border-block-end-width: 1px;
-  border-block-end-style: solid;
-}
-#menu-bar.sticky,
-#menu-bar-hover-placeholder:hover + #menu-bar,
-#menu-bar:hover,
-html.sidebar-visible #menu-bar {
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0 !important;
-}
-#menu-bar-hover-placeholder {
-  position: sticky;
-  position: -webkit-sticky;
-  top: 0;
-  height: var(--menu-bar-height);
-}
-#menu-bar.bordered {
-  border-block-end-color: var(--table-border-color);
-}
-#menu-bar i,
-#menu-bar .icon-button {
-  position: relative;
-  padding: 0 8px;
-  z-index: 10;
-  line-height: var(--menu-bar-height);
-  cursor: pointer;
-  transition: color 0.5s;
+#mdbook-menu-bar,
+#mdbook-menu-bar-hover-placeholder {
+    z-index: 101;
+    margin: auto calc(0px - var(--page-padding));
+}
+#mdbook-menu-bar {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    background-color: var(--bg);
+    border-block-end-color: var(--bg);
+    border-block-end-width: 1px;
+    border-block-end-style: solid;
+}
+#mdbook-menu-bar.sticky,
+#mdbook-menu-bar-hover-placeholder:hover + #mdbook-menu-bar,
+#mdbook-menu-bar:hover,
+html.sidebar-visible #mdbook-menu-bar {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0 !important;
+}
+#mdbook-menu-bar-hover-placeholder {
+    position: sticky;
+    position: -webkit-sticky;
+    top: 0;
+    height: var(--menu-bar-height);
+}
+#mdbook-menu-bar.bordered {
+    border-block-end-color: var(--table-border-color);
+}
+#mdbook-menu-bar .fa-svg, #mdbook-menu-bar .icon-button {
+    position: relative;
+    padding: 0 8px;
+    z-index: 10;
+    line-height: var(--menu-bar-height);
+    cursor: pointer;
+    transition: color 0.5s;
 }
 @media only screen and (max-width: 420px) {
-  #menu-bar i,
-  #menu-bar .icon-button {
-    padding: 0 5px;
-  }
+    #mdbook-menu-bar .fa-svg, #mdbook-menu-bar .icon-button {
+        padding: 0 5px;
+    }
 }
 
 .icon-button {
-  border: none;
-  background: none;
-  padding: 0;
-  color: inherit;
+    border: none;
+    background: none;
+    padding: 0;
+    color: inherit;
 }
-.icon-button i {
-  margin: 0;
+.icon-button .fa-svg {
+    margin: 0;
 }
 
 .right-buttons {
-  margin: 0 15px;
+    margin: 0 15px;
 }
 .right-buttons a {
-  text-decoration: none;
+    text-decoration: none;
 }
 
 .left-buttons {
-  display: flex;
-  margin: 0 5px;
+    display: flex;
+    margin: 0 5px;
 }
 html:not(.js) .left-buttons button {
-  display: none;
+    display: none;
 }
 
 .menu-title {
-  display: inline-block;
-  font-weight: 200;
-  font-size: 2.4rem;
-  line-height: var(--menu-bar-height);
-  text-align: center;
-  margin: 0;
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+    display: inline-block;
+    font-weight: 200;
+    font-size: 2.4rem;
+    line-height: var(--menu-bar-height);
+    text-align: center;
+    margin: 0;
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 .menu-title {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .menu-bar,
@@ -120,174 +118,151 @@ html:not(.js) .left-buttons button {
 .mobile-nav-chapters,
 .mobile-nav-chapters:visited,
 .menu-bar .icon-button,
-.menu-bar a i {
-  color: var(--icons);
+.menu-bar a .fa-svg {
+    color: var(--icons);
 }
 
-.menu-bar i:hover,
+.menu-bar .fa-svg:hover,
 .menu-bar .icon-button:hover,
 .nav-chapters:hover,
-.mobile-nav-chapters i:hover {
-  color: var(--icons-hover);
+.mobile-nav-chapters .fa-svg:hover {
+    color: var(--icons-hover);
 }
 
 /* Nav Icons */
 
 .nav-chapters {
-  font-size: 2.5em;
-  text-align: center;
-  text-decoration: none;
+    font-size: 2.5em;
+    text-align: center;
+    text-decoration: none;
 
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  margin: 0;
-  max-width: 150px;
-  min-width: 90px;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    margin: 0;
+    max-width: 150px;
+    min-width: 90px;
 
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  flex-direction: column;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    flex-direction: column;
 
-  transition: color 0.5s, background-color 0.5s;
+    transition: color 0.5s, background-color 0.5s;
 }
 
 .nav-chapters:hover {
-  text-decoration: none;
-  background-color: var(--theme-hover);
-  transition: background-color 0.15s, color 0.15s;
+    text-decoration: none;
+    background-color: var(--theme-hover);
+    transition: background-color 0.15s, color 0.15s;
 }
 
 .nav-wrapper {
-  margin-block-start: 50px;
-  display: none;
+    margin-block-start: 50px;
+    display: none;
 }
 
 .mobile-nav-chapters {
-  font-size: 2.5em;
-  text-align: center;
-  text-decoration: none;
-  width: 90px;
-  border-radius: 5px;
-  background-color: var(--sidebar-bg);
+    font-size: 2.5em;
+    text-align: center;
+    text-decoration: none;
+    width: 90px;
+    border-radius: 5px;
+    background-color: var(--sidebar-bg);
 }
 
 /* Only Firefox supports flow-relative values */
-.previous {
-  float: left;
-}
-[dir="rtl"] .previous {
-  float: right;
-}
+.previous { float: left; }
+[dir=rtl] .previous { float: right; }
 
 /* Only Firefox supports flow-relative values */
 .next {
-  float: right;
-  right: var(--page-padding);
+    float: right;
+    right: var(--page-padding);
 }
-[dir="rtl"] .next {
-  float: left;
-  right: unset;
-  left: var(--page-padding);
-}
-
-/* Use the correct buttons for RTL layouts*/
-[dir="rtl"] .previous i.fa-angle-left:before {
-  content: "\f105";
-}
-[dir="rtl"] .next i.fa-angle-right:before {
-  content: "\f104";
+[dir=rtl] .next {
+    float: left;
+    right: unset;
+    left: var(--page-padding);
 }
 
 @media only screen and (max-width: 1080px) {
-  .nav-wide-wrapper {
-    display: none;
-  }
-  .nav-wrapper {
-    display: block;
-  }
+    .nav-wide-wrapper { display: none; }
+    .nav-wrapper { display: block; }
 }
 
 /* sidebar-visible */
 @media only screen and (max-width: 1380px) {
-  #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper {
-    display: none;
-  }
-  #sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper {
-    display: block;
-  }
+    #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wide-wrapper { display: none; }
+    #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper .nav-wrapper { display: block; }
 }
 
 /* Inline code */
 
 :not(pre) > .hljs {
-  display: inline;
-  padding: 0.1em 0.3em;
-  border-radius: 3px;
+    display: inline;
+    padding: 0.1em 0.3em;
+    border-radius: 3px;
 }
 
 :not(pre):not(a) > .hljs {
-  color: var(--inline-code-color);
-  overflow-x: initial;
+    color: var(--inline-code-color);
+    overflow-x: initial;
 }
 
 a:hover > .hljs {
-  text-decoration: underline;
+    text-decoration: underline;
 }
 
 pre {
-  position: relative;
+    position: relative;
 }
 pre > .buttons {
-  position: absolute;
-  z-index: 100;
-  right: 0px;
-  top: 2px;
-  margin: 0px;
-  padding: 2px 0px;
-
-  color: var(--sidebar-fg);
-  cursor: pointer;
-  visibility: hidden;
-  opacity: 0;
-  transition: visibility 0.1s linear, opacity 0.1s linear;
+    position: absolute;
+    z-index: 100;
+    right: 0px;
+    top: 2px;
+    margin: 0px;
+    padding: 2px 0px;
+
+    color: var(--sidebar-fg);
+    cursor: pointer;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 0.1s linear, opacity 0.1s linear;
 }
 pre:hover > .buttons {
-  visibility: visible;
-  opacity: 1;
+    visibility: visible;
+    opacity: 1
 }
 pre > .buttons :hover {
-  color: var(--sidebar-active);
-  border-color: var(--icons-hover);
-  background-color: var(--theme-hover);
-}
-pre > .buttons i {
-  margin-inline-start: 8px;
+    color: var(--sidebar-active);
+    border-color: var(--icons-hover);
+    background-color: var(--theme-hover);
 }
 pre > .buttons button {
-  cursor: inherit;
-  margin: 0px 5px;
-  padding: 4px 4px 3px 5px;
-  font-size: 23px;
+    cursor: inherit;
+    margin: 0px 5px;
+    padding: 2px 3px 0px 4px;
+    font-size: 23px;
 
-  border-style: solid;
-  border-width: 1px;
-  border-radius: 4px;
-  border-color: var(--icons);
-  background-color: var(--theme-popup-bg);
-  transition: 100ms;
-  transition-property: color, border-color, background-color;
-  color: var(--icons);
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 4px;
+    border-color: var(--icons);
+    background-color: var(--theme-popup-bg);
+    transition: 100ms;
+    transition-property: color,border-color,background-color;
+    color: var(--icons);
 }
 
 pre > .buttons button.clip-button {
-  padding: 2px 4px 0px 6px;
+    padding: 2px 4px 0px 6px;
 }
 pre > .buttons button.clip-button::before {
-  /* clipboard image from octicons (https://github.com/primer/octicons/tree/v2.0.0) MIT license
+    /* clipboard image from octicons (https://github.com/primer/octicons/tree/v2.0.0) MIT license
      */
-  content: url('data:image/svg+xml,\
 \
 2s-1.75.755-1.75 1.667c0 .911-.793 1.666-1.75 1.666H4.75C3.793 5.333 3 6.09 3 7z"/>\
 \
 ');
-  filter: var(--copy-button-filter);
+    filter: var(--copy-button-filter);
 }
 pre > .buttons button.clip-button:hover::before {
-  filter: var(--copy-button-filter-hover);
+    filter: var(--copy-button-filter-hover);
 }
 
 @media (pointer: coarse) {
-  pre > .buttons button {
-    /* On mobile, make it easier to tap buttons. */
-    padding: 0.3rem 1rem;
-  }
+    pre > .buttons button {
+        /* On mobile, make it easier to tap buttons. */
+        padding: 0.3rem 1rem;
+    }
 
-  .sidebar-resize-indicator {
-    /* Hide resize indicator on devices with limited accuracy */
-    display: none;
-  }
+    .sidebar-resize-indicator {
+        /* Hide resize indicator on devices with limited accuracy */
+        display: none;
+    }
 }
 pre > code {
-  display: block;
-  padding: 1rem;
+    display: block;
+    padding: 1rem;
 }
 
 /* FIXME: ACE editors overlap their buttons because ACE does absolute
@@ -327,357 +302,414 @@ pre > code {
 }
 
 pre > .result {
-  margin-block-start: 10px;
+    margin-block-start: 10px;
 }
 
 /* Search */
 
-#searchresults a {
-  text-decoration: none;
+#mdbook-searchresults a {
+    text-decoration: none;
 }
 
 mark {
-  border-radius: 2px;
-  padding-block-start: 0;
-  padding-block-end: 1px;
-  padding-inline-start: 3px;
-  padding-inline-end: 3px;
-  margin-block-start: 0;
-  margin-block-end: -1px;
-  margin-inline-start: -3px;
-  margin-inline-end: -3px;
-  background-color: var(--search-mark-bg);
-  transition: background-color 300ms linear;
-  cursor: pointer;
+    border-radius: 2px;
+    padding-block-start: 0;
+    padding-block-end: 1px;
+    padding-inline-start: 3px;
+    padding-inline-end: 3px;
+    margin-block-start: 0;
+    margin-block-end: -1px;
+    margin-inline-start: -3px;
+    margin-inline-end: -3px;
+    background-color: var(--search-mark-bg);
+    transition: background-color 300ms linear;
+    cursor: pointer;
 }
 
 mark.fade-out {
-  background-color: rgba(0, 0, 0, 0) !important;
-  cursor: auto;
+    background-color: rgba(0,0,0,0) !important;
+    cursor: auto;
 }
 
 .searchbar-outer {
-  margin-inline-start: auto;
-  margin-inline-end: auto;
-  max-width: var(--content-max-width);
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+    max-width: var(--content-max-width);
 }
 
-#searchbar {
-  width: 100%;
-  margin-block-start: 5px;
-  margin-block-end: 0;
-  margin-inline-start: auto;
-  margin-inline-end: auto;
-  padding: 10px 16px;
-  transition: box-shadow 300ms ease-in-out;
-  border: 1px solid var(--searchbar-border-color);
-  border-radius: 3px;
-  background-color: var(--searchbar-bg);
-  color: var(--searchbar-fg);
-}
-#searchbar:focus,
-#searchbar.active {
-  box-shadow: 0 0 3px var(--searchbar-shadow-color);
+#mdbook-searchbar-outer.searching #mdbook-searchbar {
+    padding-right: 30px;
+}
+#mdbook-searchbar-outer .spinner-wrapper {
+    display: none;
+}
+#mdbook-searchbar-outer.searching .spinner-wrapper {
+    display: block;
+}
+
+.search-wrapper {
+    position: relative;
+}
+
+.spinner-wrapper {
+    --spinner-margin: 2px;
+    position: absolute;
+    margin-block-start: calc(var(--searchbar-margin-block-start) + var(--spinner-margin));
+    right: var(--spinner-margin);
+    top: 0;
+    bottom: var(--spinner-margin);
+    padding: 6px;
+    background-color: var(--bg);
+}
+
+#fa-spin {
+    animation: rotating 2s linear infinite;
+    display: inline-block;
+}
+
+@keyframes rotating {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+#mdbook-searchbar {
+    width: 100%;
+    margin-block-start: var(--searchbar-margin-block-start);
+    margin-block-end: 0;
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+    padding: 10px 16px;
+    transition: box-shadow 300ms ease-in-out;
+    border: 1px solid var(--searchbar-border-color);
+    border-radius: 3px;
+    background-color: var(--searchbar-bg);
+    color: var(--searchbar-fg);
+}
+#mdbook-searchbar:focus,
+#mdbook-searchbar.active {
+    box-shadow: 0 0 3px var(--searchbar-shadow-color);
 }
 
 .searchresults-header {
-  font-weight: bold;
-  font-size: 1em;
-  padding-block-start: 18px;
-  padding-block-end: 0;
-  padding-inline-start: 5px;
-  padding-inline-end: 0;
-  color: var(--searchresults-header-fg);
+    font-weight: bold;
+    font-size: 1em;
+    padding-block-start: 18px;
+    padding-block-end: 0;
+    padding-inline-start: 5px;
+    padding-inline-end: 0;
+    color: var(--searchresults-header-fg);
 }
 
 .searchresults-outer {
-  margin-inline-start: auto;
-  margin-inline-end: auto;
-  max-width: var(--content-max-width);
-  border-block-end: 1px dashed var(--searchresults-border-color);
+    margin-inline-start: auto;
+    margin-inline-end: auto;
+    max-width: var(--content-max-width);
+    border-block-end: 1px dashed var(--searchresults-border-color);
 }
 
-ul#searchresults {
-  list-style: none;
-  padding-inline-start: 20px;
+ul#mdbook-searchresults {
+    list-style: none;
+    padding-inline-start: 20px;
 }
-ul#searchresults li {
-  margin: 10px 0px;
-  padding: 2px;
-  border-radius: 2px;
+ul#mdbook-searchresults li {
+    margin: 10px 0px;
+    padding: 2px;
+    border-radius: 2px;
 }
-ul#searchresults li.focus {
-  background-color: var(--searchresults-li-bg);
+ul#mdbook-searchresults li.focus {
+    background-color: var(--searchresults-li-bg);
 }
-ul#searchresults span.teaser {
-  display: block;
-  clear: both;
-  margin-block-start: 5px;
-  margin-block-end: 0;
-  margin-inline-start: 20px;
-  margin-inline-end: 0;
-  font-size: 0.8em;
+ul#mdbook-searchresults span.teaser {
+    display: block;
+    clear: both;
+    margin-block-start: 5px;
+    margin-block-end: 0;
+    margin-inline-start: 20px;
+    margin-inline-end: 0;
+    font-size: 0.8em;
 }
-ul#searchresults span.teaser em {
-  font-weight: bold;
-  font-style: normal;
+ul#mdbook-searchresults span.teaser em {
+    font-weight: bold;
+    font-style: normal;
 }
 
 /* Sidebar */
 
 .sidebar {
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: var(--sidebar-width);
-  font-size: 0.875em;
-  box-sizing: border-box;
-  -webkit-overflow-scrolling: touch;
-  overscroll-behavior-y: contain;
-  background-color: var(--sidebar-bg);
-  color: var(--sidebar-fg);
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: var(--sidebar-width);
+    font-size: 0.875em;
+    box-sizing: border-box;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior-y: contain;
+    background-color: var(--sidebar-bg);
+    color: var(--sidebar-fg);
 }
 .sidebar-iframe-inner {
-  background-color: var(--sidebar-bg);
-  color: var(--sidebar-fg);
-  padding: 10px 10px;
-  margin: 0;
-  font-size: 1.4rem;
+    --padding: 10px;
+
+    background-color: var(--sidebar-bg);
+    padding: var(--padding);
+    margin: 0;
+    font-size: 1.4rem;
+    color: var(--sidebar-fg);
+    min-height: calc(100vh - var(--padding) * 2);
 }
 .sidebar-iframe-outer {
-  border: none;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-[dir="rtl"] .sidebar {
-  left: unset;
-  right: 0;
-}
+    border: none;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+[dir=rtl] .sidebar { left: unset; right: 0; }
 .sidebar-resizing {
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 html:not(.sidebar-resizing) .sidebar {
-  transition: transform 0.3s; /* Animation: slide away */
+    transition: transform 0.3s; /* Animation: slide away */
 }
 .sidebar code {
-  line-height: 2em;
+    line-height: 2em;
 }
 .sidebar .sidebar-scrollbox {
-  overflow-y: auto;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  padding: 10px 10px;
+    overflow-y: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 10px 10px;
 }
 .sidebar .sidebar-resize-handle {
-  position: absolute;
-  cursor: col-resize;
-  width: 0;
-  right: calc(var(--sidebar-resize-indicator-width) * -1);
-  top: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
+    position: absolute;
+    cursor: col-resize;
+    width: 0;
+    right: calc(var(--sidebar-resize-indicator-width) * -1);
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
 }
 
 .sidebar-resize-handle .sidebar-resize-indicator {
-  width: 100%;
-  height: 12px;
-  background-color: var(--icons);
-  margin-inline-start: var(--sidebar-resize-indicator-space);
-}
-
-[dir="rtl"] .sidebar .sidebar-resize-handle {
-  left: calc(var(--sidebar-resize-indicator-width) * -1);
-  right: unset;
+    width: 100%;
+    height: 16px;
+    color: var(--icons);
+    margin-inline-start: var(--sidebar-resize-indicator-space);
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+.sidebar-resize-handle .sidebar-resize-indicator::before {
+    content: "";
+    width: 2px;
+    height: 12px;
+    border-left: dotted 2px currentColor;
+}
+.sidebar-resize-handle .sidebar-resize-indicator::after {
+    content: "";
+    width: 2px;
+    height: 16px;
+    border-left: dotted 2px currentColor;
+}
+
+[dir=rtl] .sidebar .sidebar-resize-handle {
+    left: calc(var(--sidebar-resize-indicator-width) * -1);
+    right: unset;
 }
 .js .sidebar .sidebar-resize-handle {
-  cursor: col-resize;
-  width: calc(
-    var(--sidebar-resize-indicator-width) -
-      var(--sidebar-resize-indicator-space)
-  );
+    cursor: col-resize;
+    width: calc(var(--sidebar-resize-indicator-width) - var(--sidebar-resize-indicator-space));
 }
+
+html:not(.js) .sidebar-resize-handle {
+    display: none;
+}
+
 /* sidebar-hidden */
-#sidebar-toggle-anchor:not(:checked) ~ .sidebar {
-  transform: translateX(
-    calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width))
-  );
-  z-index: -1;
+#mdbook-sidebar-toggle-anchor:not(:checked) ~ .sidebar {
+    transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
 }
-[dir="rtl"] #sidebar-toggle-anchor:not(:checked) ~ .sidebar {
-  transform: translateX(
-    calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))
-  );
+[dir=rtl] #mdbook-sidebar-toggle-anchor:not(:checked) ~ .sidebar {
+    transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
 }
 .sidebar::-webkit-scrollbar {
-  background: var(--sidebar-bg);
+    background: var(--sidebar-bg);
 }
 .sidebar::-webkit-scrollbar-thumb {
-  background: var(--scrollbar);
+    background: var(--scrollbar);
 }
 
 /* sidebar-visible */
-#sidebar-toggle-anchor:checked ~ .page-wrapper {
-  transform: translateX(
-    calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width))
-  );
+#mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
+    transform: translateX(calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width)));
 }
-[dir="rtl"] #sidebar-toggle-anchor:checked ~ .page-wrapper {
-  transform: translateX(
-    calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width))
-  );
+[dir=rtl] #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
+    transform: translateX(calc(0px - var(--sidebar-width) - var(--sidebar-resize-indicator-width)));
 }
 @media only screen and (min-width: 620px) {
-  #sidebar-toggle-anchor:checked ~ .page-wrapper {
-    transform: none;
-    margin-inline-start: calc(
-      var(--sidebar-width) + var(--sidebar-resize-indicator-width)
-    );
-  }
-  [dir="rtl"] #sidebar-toggle-anchor:checked ~ .page-wrapper {
-    transform: none;
-  }
+    #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
+        transform: none;
+        margin-inline-start: calc(var(--sidebar-width) + var(--sidebar-resize-indicator-width));
+    }
+    [dir=rtl] #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper {
+        transform: none;
+    }
 }
 
 .chapter {
-  list-style: none outside none;
-  padding-inline-start: 0;
-  line-height: 2.2em;
+    list-style: none outside none;
+    padding-inline-start: 0;
+    line-height: 2.2em;
 }
 
-.chapter ol {
-  width: 100%;
+.chapter li {
+    color: var(--sidebar-non-existant);
 }
 
-.chapter li {
-  display: flex;
-  color: var(--sidebar-non-existant);
+/* This is a span wrapping the chapter link and the fold chevron. */
+.chapter-link-wrapper {
+    /* Used to position the chevron to the right, allowing the text to wrap before it. */
+    display: flex;
 }
+
 .chapter li a {
-  display: block;
-  padding: 0;
-  text-decoration: none;
-  color: var(--sidebar-fg);
+    /* Remove underlines. */
+    text-decoration: none;
+    color: var(--sidebar-fg);
 }
 
 .chapter li a:hover {
-  color: var(--sidebar-active);
+    color: var(--sidebar-active);
 }
 
 .chapter li a.active {
-  color: var(--sidebar-active);
+    color: var(--sidebar-active);
 }
 
-.chapter li > a.toggle {
-  cursor: pointer;
-  display: block;
-  margin-inline-start: auto;
-  padding: 0 10px;
-  user-select: none;
-  opacity: 0.68;
+/* This is the toggle chevron. */
+.chapter-fold-toggle {
+    cursor: pointer;
+    /* Positions the chevron to the side. */
+    margin-inline-start: auto;
+    padding: 0 10px;
+    user-select: none;
+    opacity: 0.68;
 }
 
-.chapter li > a.toggle div {
-  transition: transform 0.5s;
+.chapter-fold-toggle div {
+    transition: transform 0.5s;
 }
 
 /* collapse the section */
-.chapter li:not(.expanded) + li > ol {
-  display: none;
+.chapter li:not(.expanded) > ol {
+    display: none;
 }
 
 .chapter li.chapter-item {
-  line-height: 1.5em;
-  margin-block-start: 0.6em;
+    line-height: 1.5em;
+    margin-block-start: 0.6em;
+}
+
+/* When expanded, rotate the chevron to point down. */
+.chapter li.expanded > span > .chapter-fold-toggle div {
+    transform: rotate(90deg);
+}
+
+.chapter a.current-header {
+    color: var(--sidebar-active);
 }
 
-.chapter li.expanded > a.toggle div {
-  transform: rotate(90deg);
+.on-this-page {
+    margin-left: 22px;
+    border-inline-start: 4px solid var(--sidebar-header-border-color);
+    padding-left: 8px;
 }
 
+.on-this-page > ol {
+    padding-left: 0;
+}
+
+/* Horizontal line in chapter list. */
 .spacer {
-  width: 100%;
-  height: 3px;
-  margin: 5px 0px;
+    width: 100%;
+    height: 3px;
+    margin: 5px 0px;
 }
 .chapter .spacer {
-  background-color: var(--sidebar-spacer);
+    background-color: var(--sidebar-spacer);
 }
 
+/* On touch devices, add more vertical spacing to make it easier to tap links. */
 @media (-moz-touch-enabled: 1), (pointer: coarse) {
-  .chapter li a {
-    padding: 5px 0;
-  }
-  .spacer {
-    margin: 10px 0;
-  }
+    .chapter li a { padding: 5px 0; }
+    .spacer { margin: 10px 0; }
 }
 
 .section {
-  list-style: none outside none;
-  padding-inline-start: 20px;
-  line-height: 1.9em;
+    list-style: none outside none;
+    padding-inline-start: 20px;
+    line-height: 1.9em;
 }
 
 /* Theme Menu Popup */
 
 .theme-popup {
-  position: absolute;
-  left: 10px;
-  top: var(--menu-bar-height);
-  z-index: 1000;
-  border-radius: 4px;
-  font-size: 0.7em;
-  color: var(--fg);
-  background: var(--theme-popup-bg);
-  border: 1px solid var(--theme-popup-border);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: none;
-  /* Don't let the children's background extend past the rounded corners. */
-  overflow: hidden;
-}
-[dir="rtl"] .theme-popup {
-  left: unset;
-  right: 10px;
+    position: absolute;
+    left: 10px;
+    top: var(--menu-bar-height);
+    z-index: 1000;
+    border-radius: 4px;
+    font-size: 0.7em;
+    color: var(--fg);
+    background: var(--theme-popup-bg);
+    border: 1px solid var(--theme-popup-border);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: none;
+    /* Don't let the children's background extend past the rounded corners. */
+    overflow: hidden;
 }
+[dir=rtl] .theme-popup { left: unset;  right: 10px; }
 .theme-popup .default {
-  color: var(--icons);
+    color: var(--icons);
 }
 .theme-popup .theme {
-  width: 100%;
-  border: 0;
-  margin: 0;
-  padding: 2px 20px;
-  line-height: 25px;
-  white-space: nowrap;
-  text-align: start;
-  cursor: pointer;
-  color: inherit;
-  background: inherit;
-  font-size: inherit;
+    width: 100%;
+    border: 0;
+    margin: 0;
+    padding: 2px 20px;
+    line-height: 25px;
+    white-space: nowrap;
+    text-align: start;
+    cursor: pointer;
+    color: inherit;
+    background: inherit;
+    font-size: inherit;
 }
 .theme-popup .theme:hover {
-  background-color: var(--theme-hover);
+    background-color: var(--theme-hover);
 }
 
 .theme-selected::before {
-  display: inline-block;
-  content: "✓";
-  margin-inline-start: -14px;
-  width: 14px;
+    display: inline-block;
+    content: "✓";
+    margin-inline-start: -14px;
+    width: 14px;
 }
 
 /* TODO: replace with https://github.com/rust-lang/mdBook/pull/1584 */
@@ -694,3 +726,46 @@ html:not(.sidebar-resizing) .sidebar {
 .sidebar-scrollbox {
   margin-top: 7rem !important;
 }
+
+/* The container for the help popup that covers the whole window. */
+#mdbook-help-container {
+    /* Position and size for the whole window. */
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    /* This uses flex layout (which is set in book.js), and centers the popup
+       in the window.*/
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    /* Dim out the book while the popup is visible. */
+    background: var(--overlay-bg);
+}
+
+/* The popup help box. */
+#mdbook-help-popup {
+    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
+    min-width: 300px;
+    max-width: 500px;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: var(--bg);
+    color: var(--fg);
+    border-width: 1px;
+    border-color: var(--theme-popup-border);
+    border-style: solid;
+    border-radius: 8px;
+    padding: 10px;
+}
+
+.mdbook-help-title {
+    text-align: center;
+    /* mdbook's margin for h2 is way too large. */
+    margin: 10px;
+}
diff --git a/theme/css/general.css b/theme/css/general.css
index 0862b51..df8a3ef 100644
--- a/theme/css/general.css
+++ b/theme/css/general.css
@@ -61,7 +61,8 @@ h2:target::before,
 h3:target::before,
 h4:target::before,
 h5:target::before,
-h6:target::before {
+h6:target::before,
+dt:target::before {
     display: inline-block;
     content: "»";
     margin-inline-start: -30px;
@@ -80,17 +81,18 @@ h6:target::before {
 .page {
     outline: 0;
     padding: 0 var(--page-padding);
-    margin-block-start: calc(0px - var(--menu-bar-height)); /* Compensate for the #menu-bar-hover-placeholder */
+    margin-block-start: calc(0px - var(--menu-bar-height)); /* Compensate for the #mdbook-menu-bar-hover-placeholder */
 }
 .page-wrapper {
     box-sizing: border-box;
     background-color: var(--bg);
 }
-.no-js .page-wrapper,
+html:not(.js) .page-wrapper,
 .js:not(.sidebar-resizing) .page-wrapper {
     transition: margin-left 0.3s ease, transform 0.3s ease; /* Animation: slide away */
 }
-[dir=rtl] .js:not(.sidebar-resizing) .page-wrapper {
+[dir=rtl]:not(.js) .page-wrapper,
+[dir=rtl].js:not(.sidebar-resizing) .page-wrapper {
     transition: margin-right 0.3s ease, transform 0.3s ease; /* Animation: slide away */
 }
 
@@ -154,6 +156,8 @@ blockquote {
     border-block-end: .1em solid var(--quote-border);
 }
 
+/* TODO: Remove .warning in a future version of mdbook, it is replaced by
+blockquote tags. */
 .warning {
     margin: 20px;
     padding: 0 20px;
@@ -200,16 +204,53 @@ sup {
     line-height: 0;
 }
 
-:not(.footnote-definition) + .footnote-definition,
-.footnote-definition + :not(.footnote-definition) {
-    margin-block-start: 2em;
-}
 .footnote-definition {
     font-size: 0.9em;
-    margin: 0.5em 0;
 }
-.footnote-definition p {
-    display: inline;
+/* The default spacing for a list is a little too large. */
+.footnote-definition ul,
+.footnote-definition ol {
+    padding-left: 20px;
+}
+.footnote-definition > li {
+    /* Required to position the ::before target */
+    position: relative;
+}
+.footnote-definition > li:target {
+    scroll-margin-top: 50vh;
+}
+.footnote-reference:target {
+    scroll-margin-top: 50vh;
+}
+/* Draws a border around the footnote (including the marker) when it is selected.
+   TODO: If there are multiple linkbacks, highlight which one you just came
+   from so you know which one to click.
+*/
+.footnote-definition > li:target::before {
+    border: 2px solid var(--footnote-highlight);
+    border-radius: 6px;
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    bottom: -8px;
+    left: -32px;
+    pointer-events: none;
+    content: "";
+}
+/* Pulses the footnote reference so you can quickly see where you left off reading.
+   This could use some improvement.
+*/
+@media not (prefers-reduced-motion) {
+    .footnote-reference:target  {
+        animation: fn-highlight 0.8s;
+        border-radius: 2px;
+    }
+
+    @keyframes fn-highlight {
+        from {
+            background-color: var(--footnote-highlight);
+        }
+    }
 }
 
 .tooltiptext {
@@ -240,3 +281,128 @@ sup {
 .result-no-output {
     font-style: italic;
 }
+
+.fa-svg svg {
+    width: 1em;
+    height: 1em;
+    fill: currentColor;
+    margin-bottom: -0.1em;
+}
+
+dt {
+    font-weight: bold;
+    margin-top: 0.5em;
+    margin-bottom: 0.1em;
+}
+
+/* This uses a CSS counter to add numbers to definitions, but only if there is
+ more than one definition. */
+dl, dt {
+    counter-reset: dd-counter;
+}
+
+/* When there is more than one definition, increment the counter. The first
+selector selects the first definition, and the second one selects definitions
+2 and beyond.*/
+dd:has(+ dd), dd + dd {
+    counter-increment: dd-counter;
+    /* Use flex display to help with positioning the numbers when there is a p
+    tag inside the definition. */
+    display: flex;
+    align-items: flex-start;
+}
+
+/* Shows the counter for definitions. The first selector selects the first
+definition, and the second one selections definitions 2 and beyond.*/
+dd:has(+ dd)::before, dd + dd::before  {
+    content: counter(dd-counter) ". ";
+    font-weight: 600;
+    display: inline-block;
+    margin-right: 0.5em;
+}
+
+dd > p {
+    /* For loose definitions that have a p tag inside, don't add a bunch of
+    space before the definition. */
+    margin-top: 0;
+}
+
+/* Remove some excess space from the bottom. */
+.blockquote-tag p:last-child {
+    margin-bottom: 2px;
+}
+
+.blockquote-tag {
+    /* Add some padding to make the vertical bar a little taller than the text.*/
+    padding: 2px 0px 2px 20px;
+    /* Add a solid color bar on the left side. */
+    border-inline-start-style: solid;
+    border-inline-start-width: 4px;
+    /* Disable the background color from normal blockquotes . */
+    background-color: inherit;
+    /* Disable border blocks from blockquotes. */
+    border-block-start: none;
+    border-block-end: none;
+}
+
+.blockquote-tag-title svg {
+    fill: currentColor;
+    /* Add space between the icon and the title. */
+    margin-right: 8px;
+}
+
+.blockquote-tag-note {
+    border-inline-start-color: var(--blockquote-note-color);
+}
+
+.blockquote-tag-tip {
+    border-inline-start-color: var(--blockquote-tip-color);
+}
+
+.blockquote-tag-important {
+    border-inline-start-color: var(--blockquote-important-color);
+}
+
+.blockquote-tag-warning {
+    border-inline-start-color: var(--blockquote-warning-color);
+}
+
+.blockquote-tag-caution {
+    border-inline-start-color: var(--blockquote-caution-color);
+}
+
+.blockquote-tag-note .blockquote-tag-title {
+    color: var(--blockquote-note-color);
+}
+
+.blockquote-tag-tip .blockquote-tag-title {
+    color: var(--blockquote-tip-color);
+}
+
+.blockquote-tag-important .blockquote-tag-title {
+    color: var(--blockquote-important-color);
+}
+
+.blockquote-tag-warning .blockquote-tag-title {
+    color: var(--blockquote-warning-color);
+}
+
+.blockquote-tag-caution .blockquote-tag-title {
+    color: var(--blockquote-caution-color);
+}
+
+.blockquote-tag-title {
+    /* Slightly increase the weight for more emphasis. */
+    font-weight: 600;
+    /* Vertically center the icon with the text. */
+    display: flex;
+    align-items: center;
+    /* Remove default large margins for a more compact display. */
+    margin: 2px 0 8px 0;
+}
+
+.blockquote-tag-title .fa-svg {
+    fill: currentColor;
+    /* Add some space between the icon and the text. */
+    margin-right: 8px;
+}
diff --git a/theme/css/print.css b/theme/css/print.css
index 80ec3a5..2004384 100644
--- a/theme/css/print.css
+++ b/theme/css/print.css
@@ -1,18 +1,18 @@
 
-#sidebar,
-#menu-bar,
+#mdbook-sidebar,
+#mdbook-menu-bar,
 .nav-chapters,
 .mobile-nav-chapters {
     display: none;
 }
 
-#page-wrapper.page-wrapper {
+#mdbook-page-wrapper.page-wrapper {
     transform: none !important;
     margin-inline-start: 0px;
     overflow-y: initial;
 }
 
-#content {
+#mdbook-content {
     max-width: none;
     margin: 0;
     padding: 0;
diff --git a/theme/css/variables.css b/theme/css/variables.css
index 8f48018..632300c 100644
--- a/theme/css/variables.css
+++ b/theme/css/variables.css
@@ -1,323 +1,385 @@
+
 /* Globals */
 
 :root {
-  --sidebar-width: 300px;
-  --sidebar-resize-indicator-width: 8px;
-  --sidebar-resize-indicator-space: 2px;
-  --page-padding: 15px;
-  --content-max-width: 750px;
-  --menu-bar-height: 50px;
-  --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo,
-    "DejaVu Sans Mono", monospace, monospace;
-  --code-font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */
+    --sidebar-target-width: 300px;
+    --sidebar-width: min(var(--sidebar-target-width), 80vw);
+    --sidebar-resize-indicator-width: 8px;
+    --sidebar-resize-indicator-space: 2px;
+    --page-padding: 15px;
+    --content-max-width: 750px;
+    --menu-bar-height: 50px;
+    --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace, monospace;
+    --code-font-size: 0.875em; /* please adjust the ace font size accordingly in editor.js */
+    --searchbar-margin-block-start: 5px;
 }
 
 /* Themes */
 
 .ayu {
-  --bg: hsl(210, 25%, 8%);
-  --fg: #c5c5c5;
+    --bg: hsl(210, 25%, 8%);
+    --fg: #c5c5c5;
 
-  --sidebar-bg: #14191f;
-  --sidebar-fg: #c8c9db;
-  --sidebar-non-existant: #5c6773;
-  --sidebar-active: #ffb454;
-  --sidebar-spacer: #2d334f;
+    --sidebar-bg: #14191f;
+    --sidebar-fg: #c8c9db;
+    --sidebar-non-existant: #5c6773;
+    --sidebar-active: #ffb454;
+    --sidebar-spacer: #2d334f;
 
-  --scrollbar: var(--sidebar-fg);
+    --scrollbar: var(--sidebar-fg);
 
-  --icons: #737480;
-  --icons-hover: #b7b9cc;
+    --icons: #737480;
+    --icons-hover: #b7b9cc;
 
-  --links: #0096cf;
+    --links: #0096cf;
 
-  --inline-code-color: #ffb454;
+    --inline-code-color: #ffb454;
 
-  --theme-popup-bg: #14191f;
-  --theme-popup-border: #5c6773;
-  --theme-hover: #191f26;
+    --theme-popup-bg: #14191f;
+    --theme-popup-border: #5c6773;
+    --theme-hover: #191f26;
 
-  --quote-bg: hsl(226, 15%, 17%);
-  --quote-border: hsl(226, 15%, 22%);
+    --quote-bg: hsl(226, 15%, 17%);
+    --quote-border: hsl(226, 15%, 22%);
 
-  --warning-border: #ff8e00;
+    --warning-border: #ff8e00;
 
-  --table-border-color: hsl(210, 25%, 13%);
-  --table-header-bg: hsl(210, 25%, 28%);
-  --table-alternate-bg: hsl(210, 25%, 11%);
+    --table-border-color: hsl(210, 25%, 13%);
+    --table-header-bg: hsl(210, 25%, 28%);
+    --table-alternate-bg: hsl(210, 25%, 11%);
 
-  --searchbar-border-color: #848484;
-  --searchbar-bg: #424242;
-  --searchbar-fg: #fff;
-  --searchbar-shadow-color: #d4c89f;
-  --searchresults-header-fg: #666;
-  --searchresults-border-color: #888;
-  --searchresults-li-bg: #252932;
-  --search-mark-bg: #e3b171;
+    --searchbar-border-color: #848484;
+    --searchbar-bg: #424242;
+    --searchbar-fg: #fff;
+    --searchbar-shadow-color: #d4c89f;
+    --searchresults-header-fg: #666;
+    --searchresults-border-color: #888;
+    --searchresults-li-bg: #252932;
+    --search-mark-bg: #e3b171;
+
+    --color-scheme: dark;
+
+    /* Same as `--icons` */
+    --copy-button-filter: invert(45%) sepia(6%) saturate(621%) hue-rotate(198deg) brightness(99%) contrast(85%);
+    /* Same as `--sidebar-active` */
+    --copy-button-filter-hover: invert(68%) sepia(55%) saturate(531%) hue-rotate(341deg) brightness(104%) contrast(101%);
+
+    --footnote-highlight: #2668a6;
+
+    --overlay-bg: rgba(33, 40, 48, 0.4);
 
-  --color-scheme: dark;
+    --blockquote-note-color: #74b9ff;
+    --blockquote-tip-color: #09ca09;
+    --blockquote-important-color: #d3abff;
+    --blockquote-warning-color: #f0b72f;
+    --blockquote-caution-color: #f21424;
 
-  /* Same as `--icons` */
-  --copy-button-filter: invert(45%) sepia(6%) saturate(621%) hue-rotate(198deg)
-    brightness(99%) contrast(85%);
-  /* Same as `--sidebar-active` */
-  --copy-button-filter-hover: invert(68%) sepia(55%) saturate(531%)
-    hue-rotate(341deg) brightness(104%) contrast(101%);
+    --sidebar-header-border-color: #c18639;
 }
 
 .coal {
-  --bg: hsl(200, 7%, 8%);
-  --fg: #98a3ad;
-
-  --sidebar-bg: #292c2f;
-  --sidebar-fg: #a1adb8;
-  --sidebar-non-existant: #505254;
-  --sidebar-active: #3473ad;
-  --sidebar-spacer: #393939;
+    --bg: hsl(200, 7%, 8%);
+    --fg: #98a3ad;
 
-  --scrollbar: var(--sidebar-fg);
+    --sidebar-bg: #292c2f;
+    --sidebar-fg: #a1adb8;
+    --sidebar-non-existant: #505254;
+    --sidebar-active: #3473ad;
+    --sidebar-spacer: #393939;
 
-  --icons: #43484d;
-  --icons-hover: #b3c0cc;
+    --scrollbar: var(--sidebar-fg);
 
-  --links: #2b79a2;
+    --icons: #43484d;
+    --icons-hover: #b3c0cc;
 
-  --inline-code-color: #c5c8c6;
+    --links: #2b79a2;
 
-  --theme-popup-bg: #141617;
-  --theme-popup-border: #43484d;
-  --theme-hover: #1f2124;
+    --inline-code-color: #c5c8c6;
 
-  --quote-bg: hsl(234, 21%, 18%);
-  --quote-border: hsl(234, 21%, 23%);
+    --theme-popup-bg: #141617;
+    --theme-popup-border: #43484d;
+    --theme-hover: #1f2124;
 
-  --warning-border: #ff8e00;
+    --quote-bg: hsl(234, 21%, 18%);
+    --quote-border: hsl(234, 21%, 23%);
 
-  --table-border-color: hsl(200, 7%, 13%);
-  --table-header-bg: hsl(200, 7%, 28%);
-  --table-alternate-bg: hsl(200, 7%, 11%);
+    --warning-border: #ff8e00;
 
-  --searchbar-border-color: #aaa;
-  --searchbar-bg: #b7b7b7;
-  --searchbar-fg: #000;
-  --searchbar-shadow-color: #aaa;
-  --searchresults-header-fg: #666;
-  --searchresults-border-color: #98a3ad;
-  --searchresults-li-bg: #2b2b2f;
-  --search-mark-bg: #355c7d;
-
-  --color-scheme: dark;
-
-  /* Same as `--icons` */
-  --copy-button-filter: invert(26%) sepia(8%) saturate(575%) hue-rotate(169deg)
-    brightness(87%) contrast(82%);
-  /* Same as `--sidebar-active` */
-  --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%)
-    hue-rotate(167deg) brightness(98%) contrast(89%);
-}
+    --table-border-color: hsl(200, 7%, 13%);
+    --table-header-bg: hsl(200, 7%, 28%);
+    --table-alternate-bg: hsl(200, 7%, 11%);
 
-.light,
-html:not(.js) {
-  --bg: hsl(0, 0%, 100%);
-  --fg: hsl(0, 0%, 0%);
+    --searchbar-border-color: #aaa;
+    --searchbar-bg: #b7b7b7;
+    --searchbar-fg: #000;
+    --searchbar-shadow-color: #aaa;
+    --searchresults-header-fg: #666;
+    --searchresults-border-color: #98a3ad;
+    --searchresults-li-bg: #2b2b2f;
+    --search-mark-bg: #355c7d;
 
-  --sidebar-bg: #fafafa;
-  --sidebar-fg: hsl(0, 0%, 0%);
-  --sidebar-non-existant: #aaaaaa;
-  --sidebar-active: #1f1fff;
-  --sidebar-spacer: #f4f4f4;
+    --color-scheme: dark;
 
-  --scrollbar: #8f8f8f;
+    /* Same as `--icons` */
+    --copy-button-filter: invert(26%) sepia(8%) saturate(575%) hue-rotate(169deg) brightness(87%) contrast(82%);
+    /* Same as `--sidebar-active` */
+    --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%) hue-rotate(167deg) brightness(98%) contrast(89%);
 
-  --icons: #747474;
-  --icons-hover: #000000;
+    --footnote-highlight: #4079ae;
 
-  --links: #20609f;
+    --overlay-bg: rgba(33, 40, 48, 0.4);
 
-  --inline-code-color: #301900;
+    --blockquote-note-color: #4493f8;
+    --blockquote-tip-color: #08ae08;
+    --blockquote-important-color: #ab7df8;
+    --blockquote-warning-color: #d29922;
+    --blockquote-caution-color: #d91b29;
 
-  --theme-popup-bg: #fafafa;
-  --theme-popup-border: #cccccc;
-  --theme-hover: #e6e6e6;
+    --sidebar-header-border-color: #3473ad;
+}
 
-  --quote-bg: hsl(197, 37%, 96%);
-  --quote-border: hsl(197, 37%, 91%);
+.light, html:not(.js) {
+    --bg: hsl(0, 0%, 100%);
+    --fg: hsl(0, 0%, 0%);
 
-  --warning-border: #ff8e00;
+    --sidebar-bg: #fafafa;
+    --sidebar-fg: hsl(0, 0%, 0%);
+    --sidebar-non-existant: #aaaaaa;
+    --sidebar-active: #1f1fff;
+    --sidebar-spacer: #f4f4f4;
 
-  --table-border-color: hsl(0, 0%, 95%);
-  --table-header-bg: hsl(0, 0%, 80%);
-  --table-alternate-bg: hsl(0, 0%, 97%);
+    --scrollbar: #8F8F8F;
 
-  --searchbar-border-color: #aaa;
-  --searchbar-bg: #fafafa;
-  --searchbar-fg: #000;
-  --searchbar-shadow-color: #aaa;
-  --searchresults-header-fg: #666;
-  --searchresults-border-color: #888;
-  --searchresults-li-bg: #e4f2fe;
-  --search-mark-bg: #a2cff5;
+    --icons: #747474;
+    --icons-hover: #000000;
 
-  --color-scheme: light;
+    --links: #20609f;
 
-  /* Same as `--icons` */
-  --copy-button-filter: invert(45.49%);
-  /* Same as `--sidebar-active` */
-  --copy-button-filter-hover: invert(14%) sepia(93%) saturate(4250%)
-    hue-rotate(243deg) brightness(99%) contrast(130%);
-}
+    --inline-code-color: #301900;
 
-.navy {
-  --bg: hsl(226, 23%, 11%);
-  --fg: #bcbdd0;
+    --theme-popup-bg: #fafafa;
+    --theme-popup-border: #cccccc;
+    --theme-hover: #e6e6e6;
 
-  --sidebar-bg: #282d3f;
-  --sidebar-fg: #c8c9db;
-  --sidebar-non-existant: #505274;
-  --sidebar-active: #2b79a2;
-  --sidebar-spacer: #2d334f;
+    --quote-bg: hsl(197, 37%, 96%);
+    --quote-border: hsl(197, 37%, 91%);
 
-  --scrollbar: var(--sidebar-fg);
+    --warning-border: #ff8e00;
 
-  --icons: #737480;
-  --icons-hover: #b7b9cc;
+    --table-border-color: hsl(0, 0%, 95%);
+    --table-header-bg: hsl(0, 0%, 80%);
+    --table-alternate-bg: hsl(0, 0%, 97%);
 
-  --links: #2b79a2;
+    --searchbar-border-color: #aaa;
+    --searchbar-bg: #fafafa;
+    --searchbar-fg: #000;
+    --searchbar-shadow-color: #aaa;
+    --searchresults-header-fg: #666;
+    --searchresults-border-color: #888;
+    --searchresults-li-bg: #e4f2fe;
+    --search-mark-bg: #a2cff5;
 
-  --inline-code-color: #c5c8c6;
+    --color-scheme: light;
 
-  --theme-popup-bg: #161923;
-  --theme-popup-border: #737480;
-  --theme-hover: #282e40;
+    /* Same as `--icons` */
+    --copy-button-filter: invert(45.49%);
+    /* Same as `--sidebar-active` */
+    --copy-button-filter-hover: invert(14%) sepia(93%) saturate(4250%) hue-rotate(243deg) brightness(99%) contrast(130%);
 
-  --quote-bg: hsl(226, 15%, 17%);
-  --quote-border: hsl(226, 15%, 22%);
+    --footnote-highlight: #7e7eff;
 
-  --warning-border: #ff8e00;
+    --overlay-bg: rgba(200, 200, 205, 0.4);
 
-  --table-border-color: hsl(226, 23%, 16%);
-  --table-header-bg: hsl(226, 23%, 31%);
-  --table-alternate-bg: hsl(226, 23%, 14%);
+    --blockquote-note-color: #0969da;
+    --blockquote-tip-color: #008000;
+    --blockquote-important-color: #8250df;
+    --blockquote-warning-color: #9a6700;
+    --blockquote-caution-color: #b52731;
 
-  --searchbar-border-color: #aaa;
-  --searchbar-bg: #aeaec6;
-  --searchbar-fg: #000;
-  --searchbar-shadow-color: #aaa;
-  --searchresults-header-fg: #5f5f71;
-  --searchresults-border-color: #5c5c68;
-  --searchresults-li-bg: #242430;
-  --search-mark-bg: #a2cff5;
-
-  --color-scheme: dark;
-
-  /* Same as `--icons` */
-  --copy-button-filter: invert(51%) sepia(10%) saturate(393%) hue-rotate(198deg)
-    brightness(86%) contrast(87%);
-  /* Same as `--sidebar-active` */
-  --copy-button-filter-hover: invert(46%) sepia(20%) saturate(1537%)
-    hue-rotate(156deg) brightness(85%) contrast(90%);
+    --sidebar-header-border-color: #6e6edb;
 }
 
-.rust {
-  --bg: hsl(60, 9%, 87%);
-  --fg: #262625;
+.navy {
+    --bg: hsl(226, 23%, 11%);
+    --fg: #bcbdd0;
 
-  --sidebar-bg: #3b2e2a;
-  --sidebar-fg: #c8c9db;
-  --sidebar-non-existant: #505254;
-  --sidebar-active: #e69f67;
-  --sidebar-spacer: #45373a;
+    --sidebar-bg: #282d3f;
+    --sidebar-fg: #c8c9db;
+    --sidebar-non-existant: #505274;
+    --sidebar-active: #2b79a2;
+    --sidebar-spacer: #2d334f;
 
-  --scrollbar: var(--sidebar-fg);
+    --scrollbar: var(--sidebar-fg);
 
-  --icons: #737480;
-  --icons-hover: #262625;
+    --icons: #737480;
+    --icons-hover: #b7b9cc;
 
-  --links: #2b79a2;
+    --links: #2b79a2;
 
-  --inline-code-color: #6e6b5e;
+    --inline-code-color: #c5c8c6;
 
-  --theme-popup-bg: #e1e1db;
-  --theme-popup-border: #b38f6b;
-  --theme-hover: #99908a;
+    --theme-popup-bg: #161923;
+    --theme-popup-border: #737480;
+    --theme-hover: #282e40;
 
-  --quote-bg: hsl(60, 5%, 75%);
-  --quote-border: hsl(60, 5%, 70%);
+    --quote-bg: hsl(226, 15%, 17%);
+    --quote-border: hsl(226, 15%, 22%);
 
-  --warning-border: #ff8e00;
+    --warning-border: #ff8e00;
 
-  --table-border-color: hsl(60, 9%, 82%);
-  --table-header-bg: #b3a497;
-  --table-alternate-bg: hsl(60, 9%, 84%);
+    --table-border-color: hsl(226, 23%, 16%);
+    --table-header-bg: hsl(226, 23%, 31%);
+    --table-alternate-bg: hsl(226, 23%, 14%);
 
-  --searchbar-border-color: #aaa;
-  --searchbar-bg: #fafafa;
-  --searchbar-fg: #000;
-  --searchbar-shadow-color: #aaa;
-  --searchresults-header-fg: #666;
-  --searchresults-border-color: #888;
-  --searchresults-li-bg: #dec2a2;
-  --search-mark-bg: #e69f67;
-
-  /* Same as `--icons` */
-  --copy-button-filter: invert(51%) sepia(10%) saturate(393%) hue-rotate(198deg)
-    brightness(86%) contrast(87%);
-  /* Same as `--sidebar-active` */
-  --copy-button-filter-hover: invert(77%) sepia(16%) saturate(1798%)
-    hue-rotate(328deg) brightness(98%) contrast(83%);
+    --searchbar-border-color: #aaa;
+    --searchbar-bg: #aeaec6;
+    --searchbar-fg: #000;
+    --searchbar-shadow-color: #aaa;
+    --searchresults-header-fg: #5f5f71;
+    --searchresults-border-color: #5c5c68;
+    --searchresults-li-bg: #242430;
+    --search-mark-bg: #a2cff5;
+
+    --color-scheme: dark;
+
+    /* Same as `--icons` */
+    --copy-button-filter: invert(51%) sepia(10%) saturate(393%) hue-rotate(198deg) brightness(86%) contrast(87%);
+    /* Same as `--sidebar-active` */
+    --copy-button-filter-hover: invert(46%) sepia(20%) saturate(1537%) hue-rotate(156deg) brightness(85%) contrast(90%);
+
+    --footnote-highlight: #4079ae;
+
+    --overlay-bg: rgba(33, 40, 48, 0.4);
+
+    --blockquote-note-color: #4493f8;
+    --blockquote-tip-color: #09ca09;
+    --blockquote-important-color: #ab7df8;
+    --blockquote-warning-color: #d29922;
+    --blockquote-caution-color: #f21424;
+
+    --sidebar-header-border-color: #2f6ab5;
 }
 
-@media (prefers-color-scheme: dark) {
-  html:not(.js) {
-    --bg: hsl(200, 7%, 8%);
-    --fg: #98a3ad;
+.rust {
+    --bg: hsl(60, 9%, 87%);
+    --fg: #262625;
 
-    --sidebar-bg: #292c2f;
-    --sidebar-fg: #a1adb8;
+    --sidebar-bg: #3b2e2a;
+    --sidebar-fg: #c8c9db;
     --sidebar-non-existant: #505254;
-    --sidebar-active: #3473ad;
-    --sidebar-spacer: #393939;
+    --sidebar-active: #e69f67;
+    --sidebar-spacer: #45373a;
 
     --scrollbar: var(--sidebar-fg);
 
-    --icons: #43484d;
-    --icons-hover: #b3c0cc;
+    --icons: #737480;
+    --icons-hover: #262625;
 
     --links: #2b79a2;
 
-    --inline-code-color: #c5c8c6;
+    --inline-code-color: #6e6b5e;
 
-    --theme-popup-bg: #141617;
-    --theme-popup-border: #43484d;
-    --theme-hover: #1f2124;
+    --theme-popup-bg: #e1e1db;
+    --theme-popup-border: #b38f6b;
+    --theme-hover: #99908a;
 
-    --quote-bg: hsl(234, 21%, 18%);
-    --quote-border: hsl(234, 21%, 23%);
+    --quote-bg: hsl(60, 5%, 75%);
+    --quote-border: hsl(60, 5%, 70%);
 
     --warning-border: #ff8e00;
 
-    --table-border-color: hsl(200, 7%, 13%);
-    --table-header-bg: hsl(200, 7%, 28%);
-    --table-alternate-bg: hsl(200, 7%, 11%);
+    --table-border-color: hsl(60, 9%, 82%);
+    --table-header-bg: #b3a497;
+    --table-alternate-bg: hsl(60, 9%, 84%);
 
     --searchbar-border-color: #aaa;
-    --searchbar-bg: #b7b7b7;
+    --searchbar-bg: #fafafa;
     --searchbar-fg: #000;
     --searchbar-shadow-color: #aaa;
     --searchresults-header-fg: #666;
-    --searchresults-border-color: #98a3ad;
-    --searchresults-li-bg: #2b2b2f;
-    --search-mark-bg: #355c7d;
-
-    --color-scheme: dark;
+    --searchresults-border-color: #888;
+    --searchresults-li-bg: #dec2a2;
+    --search-mark-bg: #e69f67;
 
     /* Same as `--icons` */
-    --copy-button-filter: invert(26%) sepia(8%) saturate(575%)
-      hue-rotate(169deg) brightness(87%) contrast(82%);
+    --copy-button-filter: invert(51%) sepia(10%) saturate(393%) hue-rotate(198deg) brightness(86%) contrast(87%);
     /* Same as `--sidebar-active` */
-    --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%)
-      hue-rotate(167deg) brightness(98%) contrast(89%);
-  }
+    --copy-button-filter-hover: invert(77%) sepia(16%) saturate(1798%) hue-rotate(328deg) brightness(98%) contrast(83%);
+
+    --footnote-highlight: #d3a17a;
+
+    --overlay-bg: rgba(150, 150, 150, 0.25);
+
+    --blockquote-note-color: #023b95;
+    --blockquote-tip-color: #007700;
+    --blockquote-important-color: #8250df;
+    --blockquote-warning-color: #603700;
+    --blockquote-caution-color: #aa1721;
+
+    --sidebar-header-border-color: #8c391f;
+}
+
+@media (prefers-color-scheme: dark) {
+    html:not(.js) {
+        --bg: hsl(200, 7%, 8%);
+        --fg: #98a3ad;
+
+        --sidebar-bg: #292c2f;
+        --sidebar-fg: #a1adb8;
+        --sidebar-non-existant: #505254;
+        --sidebar-active: #3473ad;
+        --sidebar-spacer: #393939;
+
+        --scrollbar: var(--sidebar-fg);
+
+        --icons: #43484d;
+        --icons-hover: #b3c0cc;
+
+        --links: #2b79a2;
+
+        --inline-code-color: #c5c8c6;
+
+        --theme-popup-bg: #141617;
+        --theme-popup-border: #43484d;
+        --theme-hover: #1f2124;
+
+        --quote-bg: hsl(234, 21%, 18%);
+        --quote-border: hsl(234, 21%, 23%);
+
+        --warning-border: #ff8e00;
+
+        --table-border-color: hsl(200, 7%, 13%);
+        --table-header-bg: hsl(200, 7%, 28%);
+        --table-alternate-bg: hsl(200, 7%, 11%);
+
+        --searchbar-border-color: #aaa;
+        --searchbar-bg: #b7b7b7;
+        --searchbar-fg: #000;
+        --searchbar-shadow-color: #aaa;
+        --searchresults-header-fg: #666;
+        --searchresults-border-color: #98a3ad;
+        --searchresults-li-bg: #2b2b2f;
+        --search-mark-bg: #355c7d;
+
+        --color-scheme: dark;
+
+        /* Same as `--icons` */
+        --copy-button-filter: invert(26%) sepia(8%) saturate(575%) hue-rotate(169deg) brightness(87%) contrast(82%);
+        /* Same as `--sidebar-active` */
+        --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%) hue-rotate(167deg) brightness(98%) contrast(89%);
+
+        --footnote-highlight: #4079ae;
+
+        --overlay-bg: rgba(33, 40, 48, 0.4);
+
+        --blockquote-note-color: #4493f8;
+        --blockquote-tip-color: #08ae08;
+        --blockquote-important-color: #ab7df8;
+        --blockquote-warning-color: #d29922;
+        --blockquote-caution-color: #d91b29;
+
+        --sidebar-header-border-color: #3473ad;
+    }
 }
 
 .geo-engine {
diff --git a/theme/fonts/fonts.css b/theme/fonts/fonts.css
index 858efa5..a6b12b3 100644
--- a/theme/fonts/fonts.css
+++ b/theme/fonts/fonts.css
@@ -7,7 +7,7 @@
   font-style: normal;
   font-weight: 300;
   src: local('Open Sans Light'), local('OpenSans-Light'),
-       url('open-sans-v17-all-charsets-300.woff2') format('woff2');
+       url('{{ resource "fonts/open-sans-v17-all-charsets-300.woff2" }}') format('woff2');
 }
 
 /* open-sans-300italic - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
@@ -16,7 +16,7 @@
   font-style: italic;
   font-weight: 300;
   src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'),
-       url('open-sans-v17-all-charsets-300italic.woff2') format('woff2');
+       url('{{ resource "fonts/open-sans-v17-all-charsets-300italic.woff2" }}') format('woff2');
 }
 
 /* open-sans-regular - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
@@ -25,7 +25,7 @@
   font-style: normal;
   font-weight: 400;
   src: local('Open Sans Regular'), local('OpenSans-Regular'),
-       url('open-sans-v17-all-charsets-regular.woff2') format('woff2');
+       url('{{ resource "fonts/open-sans-v17-all-charsets-regular.woff2" }}') format('woff2');
 }
 
 /* open-sans-italic - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
@@ -34,7 +34,7 @@
   font-style: italic;
   font-weight: 400;
   src: local('Open Sans Italic'), local('OpenSans-Italic'),
-       url('open-sans-v17-all-charsets-italic.woff2') format('woff2');
+       url('{{ resource "fonts/open-sans-v17-all-charsets-italic.woff2" }}') format('woff2');
 }
 
 /* open-sans-600 - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
@@ -43,7 +43,7 @@
   font-style: normal;
   font-weight: 600;
   src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
-       url('open-sans-v17-all-charsets-600.woff2') format('woff2');
+       url('{{ resource "fonts/open-sans-v17-all-charsets-600.woff2" }}') format('woff2');
 }
 
 /* open-sans-600italic - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
@@ -52,7 +52,7 @@
   font-style: italic;
   font-weight: 600;
   src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
-       url('open-sans-v17-all-charsets-600italic.woff2') format('woff2');
+       url('{{ resource "fonts/open-sans-v17-all-charsets-600italic.woff2" }}') format('woff2');
 }
 
 /* open-sans-700 - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
@@ -61,7 +61,7 @@
   font-style: normal;
   font-weight: 700;
   src: local('Open Sans Bold'), local('OpenSans-Bold'),
-       url('open-sans-v17-all-charsets-700.woff2') format('woff2');
+       url('{{ resource "fonts/open-sans-v17-all-charsets-700.woff2" }}') format('woff2');
 }
 
 /* open-sans-700italic - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
@@ -70,7 +70,7 @@
   font-style: italic;
   font-weight: 700;
   src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
-       url('open-sans-v17-all-charsets-700italic.woff2') format('woff2');
+       url('{{ resource "fonts/open-sans-v17-all-charsets-700italic.woff2" }}') format('woff2');
 }
 
 /* open-sans-800 - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
@@ -79,7 +79,7 @@
   font-style: normal;
   font-weight: 800;
   src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
-       url('open-sans-v17-all-charsets-800.woff2') format('woff2');
+       url('{{ resource "fonts/open-sans-v17-all-charsets-800.woff2" }}') format('woff2');
 }
 
 /* open-sans-800italic - latin_vietnamese_latin-ext_greek-ext_greek_cyrillic-ext_cyrillic */
@@ -88,7 +88,7 @@
   font-style: italic;
   font-weight: 800;
   src: local('Open Sans ExtraBold Italic'), local('OpenSans-ExtraBoldItalic'),
-       url('open-sans-v17-all-charsets-800italic.woff2') format('woff2');
+       url('{{ resource "fonts/open-sans-v17-all-charsets-800italic.woff2" }}') format('woff2');
 }
 
 /* source-code-pro-500 - latin_vietnamese_latin-ext_greek_cyrillic-ext_cyrillic */
@@ -96,5 +96,5 @@
   font-family: 'Source Code Pro';
   font-style: normal;
   font-weight: 500;
-  src: url('source-code-pro-v11-all-charsets-500.woff2') format('woff2');
+  src: url('{{ resource "fonts/source-code-pro-v11-all-charsets-500.woff2" }}') format('woff2');
 }
diff --git a/theme/index.hbs b/theme/index.hbs
index 95265e2..e271d1a 100644
--- a/theme/index.hbs
+++ b/theme/index.hbs
@@ -20,32 +20,29 @@
         
 
         {{#if favicon_svg}}
-        
+        
         {{/if}}
         {{#if favicon_png}}
-        
+        
         {{/if}}
-        
-        
-        
+        
+        
+        
         {{#if print_enable}}
-        
+        
         {{/if}}
 
         
-        
-        {{#if copy_fonts}}
-        
-        {{/if}}
+        
 
         
-        
-        
-        
+        
+        
+        
 
         
         {{#each additional_css}}
-        
+        
         {{/each}}
 
         {{#if mathjax_support}}
@@ -53,21 +50,38 @@
         
         {{/if}}
 
-        
+        
         
         
-        
+        
     
     
-    

+    

+        

+            
Keyboard shortcuts

+            

+                
Press ← or → to navigate between chapters

+                {{#if search_enabled}}
+                
Press S or / to search in the book

+                {{/if}}
+                
Press ? to show this help

+                
Press Esc to hide this help

+            

+        

+    

+    

         
         
 
-        
+        
 
         
         
 
-