diff --git a/crates/docs/src/lib.rs b/crates/docs/src/lib.rs
index 9e8f60143a..8a7c1a6a59 100644
--- a/crates/docs/src/lib.rs
+++ b/crates/docs/src/lib.rs
@@ -156,6 +156,7 @@ pub fn generate_docs_html(root_file: PathBuf, build_dir: &Path) {
                 "<!-- Package Name -->",
                 render_name_link(package_name.as_str()).as_str(),
             )
+            .replace("<!-- Package Name String -->", package_name.as_str())
             .replace(
                 "<!-- Module Docs -->",
                 render_package_index(&exposed_module_docs).as_str(),
@@ -183,6 +184,7 @@ pub fn generate_docs_html(root_file: PathBuf, build_dir: &Path) {
                 "<!-- Package Name -->",
                 render_name_link(package_name.as_str()).as_str(),
             )
+            .replace("<!-- Package Name String -->", package_name.as_str())
             .replace(
                 "<!-- Module Docs -->",
                 render_module_documentation(
diff --git a/crates/docs/src/static/index.html b/crates/docs/src/static/index.html
index 21c7b3fcdc..c43d07bafb 100644
--- a/crates/docs/src/static/index.html
+++ b/crates/docs/src/static/index.html
@@ -1,107 +1,114 @@
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <!-- Page title -->
-        <!-- <meta name="description" content="TODO populate this based on the module's description"> -->
-        <meta name="viewport" content="width=device-width" />
-        <base href="<!-- base -->" />
-        <script type="text/javascript" src="search.js" defer></script>
-        <link rel="stylesheet" href="styles.css" />
-        <link rel="icon" href="/favicon.svg" />
-        <!-- Safari ignores rel="icon" and only respects rel="mask-icon". It will render the SVG with
+
+<head>
+    <meta charset="utf-8" />
+    <!-- Page title -->
+    <!-- <meta name="description" content="TODO populate this based on the module's description"> -->
+    <meta name="viewport" content="width=device-width" />
+    <base href="<!-- base -->" />
+    <script type="text/javascript" src="search.js" defer></script>
+    <link rel="stylesheet" href="styles.css" />
+    <link rel="icon" href="/favicon.svg" />
+    <!-- Safari ignores rel="icon" and only respects rel="mask-icon". It will render the SVG with
     fill="#000" unless this `color` attribute here is hardcoded (not a CSS `var()`) to override it.
   -->
-        <link rel="mask-icon" href="/favicon.svg" color="#7d59dd" />
-        <!-- Prefetch links -->
-    </head>
+    <link rel="mask-icon" href="/favicon.svg" color="#7d59dd" />
+    <!-- Prefetch links -->
+</head>
 
-    <body>
-        <nav id="sidebar-nav">
+<body>
+    <nav id="sidebar-nav">
+        <div class="pkg-and-logo">
+            <a class="logo" href="/" aria-labelledby="logo-link">
+                <svg viewBox="0 -6 51 58" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="logo-link"
+                    role="img">
+                    <title id="logo-link">Return to Roc packages</title>
+                    <polygon role="presentation"
+                        points="0,0 23.8834,3.21052 37.2438,19.0101 45.9665,16.6324 50.5,22 45,22 44.0315,26.3689 26.4673,39.3424 27.4527,45.2132 17.655,53 23.6751,22.7086" />
+                </svg>
+            </a>
+            <!-- Package Name -->
+            <button class="menu-toggle" aria-label="Toggle sidebar">
+                <svg viewBox="0 0 72 72" id="emoji" xmlns="http://www.w3.org/2000/svg" fill="currentcolor">
+                    <g id="SVGRepo_iconCarrier">
+                        <g id="color"></g>
+                        <g id="hair"></g>
+                        <g id="skin"></g>
+                        <g id="skin-shadow"></g>
+                        <g id="line">
+                            <line x1="16" x2="56" y1="26" y2="26" fill="none" stroke="currentColor"
+                                stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2">
+                            </line>
+                            <line x1="16" x2="56" y1="36" y2="36" fill="none" stroke="currentColor"
+                                stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2">
+                            </line>
+                            <line x1="16" x2="56" y1="46" y2="46" fill="none" stroke="currentColor"
+                                stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2">
+                            </line>
+                        </g>
+                    </g>
+                </svg>
+            </button>
+        </div>
+        <div class="module-links-container">
             <div class="module-links">
                 <!-- Module links -->
             </div>
-        </nav>
-        <div class="header-start-extension">
-            <!-- if the window gets big, this extends the purple bar on the top header to the left edge of the window -->
         </div>
-        <header class="top-header">
-            <div class="pkg-and-logo">
-                <a class="logo" href="/" aria-labelledby="logo-link">
-                    <svg
-                        viewBox="0 -6 51 58"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                        aria-labelledby="logo-link"
-                        role="img"
-                    >
-                        <title id="logo-link">Return to Roc packages</title>
-                        <polygon
-                            role="presentation"
-                            points="0,0 23.8834,3.21052 37.2438,19.0101 45.9665,16.6324 50.5,22 45,22 44.0315,26.3689 26.4673,39.3424 27.4527,45.2132 17.655,53 23.6751,22.7086"
-                        />
-                    </svg>
-                </a>
-                <!-- Package Name -->
-            </div>
-            <form id="module-search-form">
-                <input
-                    id="module-search"
-                    aria-labelledby="search-label"
-                    type="text"
-                    placeholder="Search"
-                    role="combobox"
-                    aria-autocomplete="list"
-                    aria-expanded="false"
-                    aria-controls="search-type-ahead"
-                />
-                <label for="module-search" id="search-label"
-                    >(press
-                    <span id="search-shortcut-key" aria-hidden="true">s</span
-                    >)</label
-                >
-                <!-- Magnifying Glass icon -->
-                <svg
-                    version="1.1"
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="search-icon"
-                    xmlns:xlink="http://www.w3.org/1999/xlink"
-                    width="24px"
-                    height="24px"
-                    viewBox="0 0 512 512"
-                    xml:space="preserve"
-                >
-                    <g>
-                        <path
-                            d="M449.803,62.197C408.443,20.807,353.85-0.037,299.646-0.006C245.428-0.037,190.85,20.807,149.49,62.197
+    </nav>
+    <main>
+        <form id="module-search-form">
+            <button class="menu-toggle" aria-label="Toggle sidebar">
+                <svg viewBox="0 0 72 72" id="emoji" xmlns="http://www.w3.org/2000/svg" fill="currentcolor">
+                    <g id="SVGRepo_iconCarrier">
+                        <g id="color"></g>
+                        <g id="hair"></g>
+                        <g id="skin"></g>
+                        <g id="skin-shadow"></g>
+                        <g id="line">
+                            <line x1="16" x2="56" y1="26" y2="26" fill="none" stroke="currentColor"
+                                stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2">
+                            </line>
+                            <line x1="16" x2="56" y1="36" y2="36" fill="none" stroke="currentColor"
+                                stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2">
+                            </line>
+                            <line x1="16" x2="56" y1="46" y2="46" fill="none" stroke="currentColor"
+                                stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2">
+                            </line>
+                        </g>
+                    </g>
+                </svg>
+            </button>
+            <input id="module-search" aria-labelledby="search-label" type="text"
+                placeholder="Search <!-- Package Name String -->" role="combobox" aria-autocomplete="list"
+                aria-expanded="false" aria-controls="search-type-ahead" />
+            <label for="module-search" id="search-label">(press
+                <span id="search-shortcut-key" aria-hidden="true">s</span>)</label>
+            <!-- Magnifying Glass icon -->
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="search-icon"
+                xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 512 512"
+                xml:space="preserve">
+                <g>
+                    <path d="M449.803,62.197C408.443,20.807,353.85-0.037,299.646-0.006C245.428-0.037,190.85,20.807,149.49,62.197
 		C108.1,103.557,87.24,158.15,87.303,212.338c-0.047,37.859,10.359,75.766,30.547,109.359L15.021,424.525
 		c-20.016,20.016-20.016,52.453,0,72.469c20,20.016,52.453,20.016,72.453,0L190.318,394.15
 		c33.578,20.203,71.5,30.594,109.328,30.547c54.203,0.047,108.797-20.797,150.156-62.188
 		c41.375-41.359,62.234-95.938,62.188-150.172C512.053,158.15,491.178,103.557,449.803,62.197z M391.818,304.541
 		c-25.547,25.531-58.672,38.125-92.172,38.188c-33.5-0.063-66.609-12.656-92.188-38.188c-25.531-25.578-38.125-58.688-38.188-92.203
 		c0.063-33.484,12.656-66.609,38.188-92.172c25.578-25.531,58.688-38.125,92.188-38.188c33.5,0.063,66.625,12.656,92.188,38.188
-		c25.531,25.563,38.125,58.688,38.188,92.172C429.959,245.854,417.365,278.963,391.818,304.541z"
-                        ></path>
-                    </g>
-                </svg>
-                <ul
-                    id="search-type-ahead"
-                    role="listbox"
-                    aria-label="Search Results"
-                    class="hidden"
-                >
-                    <!-- Search Type Ahead -->
-                </ul>
-            </form>
-        </header>
-        <div class="header-end-extension">
-            <!-- if the window gets big, this extends the purple bar on the top header to the right edge of the window -->
-        </div>
-        <main>
-            <!-- Module Docs -->
-        </main>
+		c25.531,25.563,38.125,58.688,38.188,92.172C429.959,245.854,417.365,278.963,391.818,304.541z"></path>
+                </g>
+            </svg>
+            <ul id="search-type-ahead" role="listbox" aria-label="Search Results" class="hidden">
+                <!-- Search Type Ahead -->
+            </ul>
+        </form>
+        <!-- Module Docs -->
         <footer>
             <p>Made by people who like to make nice things.</p>
         </footer>
-    </body>
+    </main>
+</body>
+
 </html>
diff --git a/crates/docs/src/static/search.js b/crates/docs/src/static/search.js
index 559f2e4f50..e3190a2b55 100644
--- a/crates/docs/src/static/search.js
+++ b/crates/docs/src/static/search.js
@@ -1,231 +1,270 @@
 (() => {
-    let sidebar = document.getElementById("sidebar-nav");
-
-    if (sidebar != null) {
-      // Un-hide everything
-      sidebar
-        .querySelectorAll(".sidebar-entry a")
-        .forEach((entry) => entry.classList.remove("hidden"));
-
-      // Re-hide all the sub-entries except for those of the current module
-      let currentModuleName = document.querySelector(".module-name").textContent;
-
-      sidebar.querySelectorAll(".sidebar-entry").forEach((entry) => {
-        let entryName = entry.querySelector(".sidebar-module-link").textContent;
-        if (currentModuleName === entryName) {
-          entry.firstChild.classList.add("active");
-          return;
-        }
-        entry
-          .querySelectorAll(".sidebar-sub-entries a")
-          .forEach((subEntry) => subEntry.classList.add("hidden"));
-      });
-    }
-
-    let searchTypeAhead = document.getElementById("search-type-ahead");
-    let searchBox = document.getElementById("module-search");
-    let searchForm = document.getElementById("module-search-form");
-    let topSearchResultListItem = undefined;
-
-    // Hide the results whenever anyone clicks outside the search results.
-    window.addEventListener("click", function(event) {
-        if (!searchForm?.contains(event.target)) {
-            searchTypeAhead.classList.add("hidden");
-        }
+  let sidebar = document.getElementById("sidebar-nav");
+
+  if (sidebar != null) {
+    // Un-hide everything
+    sidebar
+      .querySelectorAll(".sidebar-entry a")
+      .forEach((entry) => entry.classList.remove("hidden"));
+
+    // Re-hide all the sub-entries except for those of the current module
+    let currentModuleName = document.querySelector(".module-name").textContent;
+
+    sidebar.querySelectorAll(".sidebar-entry").forEach((entry) => {
+      let entryName = entry.querySelector(".sidebar-module-link").textContent;
+      if (currentModuleName === entryName) {
+        entry.firstChild.classList.add("active");
+        return;
+      }
+      entry
+        .querySelectorAll(".sidebar-sub-entries a")
+        .forEach((subEntry) => subEntry.classList.add("hidden"));
     });
+  }
 
-    if (searchBox != null) {
-        function searchKeyDown(event) {
-          switch (event.key) {
-            case "ArrowDown": {
-              event.preventDefault();
+  let searchTypeAhead = document.getElementById("search-type-ahead");
+  let searchBox = document.getElementById("module-search");
+  let searchForm = document.getElementById("module-search-form");
+  let topSearchResultListItem = undefined;
 
-              const focused = document.querySelector("#search-type-ahead > li:not([class*='hidden']) > a:focus");
-
-              // Find the next element to focus.
-              let nextToFocus = focused?.parentElement?.nextElementSibling;
-
-              while (nextToFocus != null && nextToFocus.classList.contains("hidden")) {
-                nextToFocus = nextToFocus.nextElementSibling;
-              }
-
-              if (nextToFocus == null) {
-                // If none of the links were focused, focus the first one.
-                // Also if we've reached the last one in the list, wrap around to the first.
-                document.querySelector("#search-type-ahead > li:not([class*='hidden']) > a")?.focus();
-              } else {
-                nextToFocus.querySelector("a").focus();
-              }
+  // Hide the results whenever anyone clicks outside the search results.
+  window.addEventListener("click", function (event) {
+    if (!searchForm?.contains(event.target)) {
+      searchTypeAhead.classList.add("hidden");
+    }
+  });
+
+  if (searchBox != null) {
+    function searchKeyDown(event) {
+      switch (event.key) {
+        case "ArrowDown": {
+          event.preventDefault();
+
+          const focused = document.querySelector(
+            "#search-type-ahead > li:not([class*='hidden']) > a:focus",
+          );
+
+          // Find the next element to focus.
+          let nextToFocus = focused?.parentElement?.nextElementSibling;
+
+          while (
+            nextToFocus != null &&
+            nextToFocus.classList.contains("hidden")
+          ) {
+            nextToFocus = nextToFocus.nextElementSibling;
+          }
 
-              break;
-            }
-            case "ArrowUp": {
-              event.preventDefault();
-
-              const focused = document.querySelector("#search-type-ahead > li:not([class*='hidden']) > a:focus");
-
-              // Find the next element to focus.
-              let nextToFocus = focused?.parentElement?.previousElementSibling;
-              while (nextToFocus != null && nextToFocus.classList.contains("hidden")) {
-                nextToFocus = nextToFocus.previousElementSibling;
-              }
-
-              if (nextToFocus == null) {
-                // If none of the links were focused, or we're at the first one, focus the search box again.
-                searchBox?.focus();
-              } else {
-                // If one of the links was focused, focus the previous one
-                nextToFocus.querySelector("a").focus();
-              }
-
-              break;
-            }
+          if (nextToFocus == null) {
+            // If none of the links were focused, focus the first one.
+            // Also if we've reached the last one in the list, wrap around to the first.
+            document
+              .querySelector(
+                "#search-type-ahead > li:not([class*='hidden']) > a",
+              )
+              ?.focus();
+          } else {
+            nextToFocus.querySelector("a").focus();
           }
-        }
 
-        searchForm.addEventListener("keydown", searchKeyDown);
-
-        function search() {
-            topSearchResultListItem = undefined;
-            let text = searchBox.value.toLowerCase(); // Search is case-insensitive.
-
-                if (text === "") {
-                    searchTypeAhead.classList.add("hidden");
-                } else {
-                    let totalResults = 0;
-                    // Firsttype-ahead-signature", show/hide all the sub-entries within each module (top-level functions etc.)
-                    searchTypeAhead.querySelectorAll("li").forEach((entry) => {
-                        const entryModule = entry
-                            .querySelector(".type-ahead-module-name")
-                            .textContent.toLowerCase()
-                        const entryName = entry
-                            .querySelector(".type-ahead-def-name")
-                            .textContent.toLowerCase();
-                        const entrySignature = entry
-                            .querySelector(".type-ahead-signature")
-                            ?.textContent?.toLowerCase()
-                            ?.replace(/\s+/g, "");
-
-                        const qualifiedEntryName = `${entryModule}.${entryName}`
-
-                        if ((qualifiedEntryName.includes(text) || entrySignature?.includes(text.replace(/\s+/g, "")))) {
-                            totalResults++;
-                            entry.classList.remove("hidden");
-                            if (topSearchResultListItem === undefined) {
-                                topSearchResultListItem = entry;
-                            }
-                        } else {
-                            entry.classList.add("hidden");
-                        }
-                    });
-                    if (totalResults < 1) {
-                        searchTypeAhead.classList.add("hidden");
-                    } else {
-                        searchTypeAhead.classList.remove("hidden");
-                    }
-                }
+          break;
         }
+        case "ArrowUp": {
+          event.preventDefault();
+
+          const focused = document.querySelector(
+            "#search-type-ahead > li:not([class*='hidden']) > a:focus",
+          );
+
+          // Find the next element to focus.
+          let nextToFocus = focused?.parentElement?.previousElementSibling;
+          while (
+            nextToFocus != null &&
+            nextToFocus.classList.contains("hidden")
+          ) {
+            nextToFocus = nextToFocus.previousElementSibling;
+          }
 
-        searchBox.addEventListener("input", search);
-
-        search();
+          if (nextToFocus == null) {
+            // If none of the links were focused, or we're at the first one, focus the search box again.
+            searchBox?.focus();
+          } else {
+            // If one of the links was focused, focus the previous one
+            nextToFocus.querySelector("a").focus();
+          }
 
-        function searchSubmit(e) {
-            // pick the top result if the user submits search form
-            e.preventDefault();
-            if (topSearchResultListItem !== undefined) {
-                let topSearchResultListItemAnchor =
-                    topSearchResultListItem.querySelector("a");
-                if (topSearchResultListItemAnchor !== null) {
-                    topSearchResultListItemAnchor.click();
-                }
-            }
+          break;
         }
-        searchForm.addEventListener("submit", searchSubmit);
-
-        // Capture '/' keypress for quick search
-        window.addEventListener("keyup", (e) => {
-            if (e.key === "s" && document.activeElement !== searchBox) {
-                e.preventDefault();
-                searchBox.focus();
-                searchBox.value = "";
-            }
+      }
+    }
 
-            if (e.key === "Escape") {
-              if (document.activeElement === searchBox) {
-                // De-focus and clear input box
-                searchBox.value = "";
-                searchBox.blur();
-              } else {
-                // Hide the search results
-                searchTypeAhead.classList.add("hidden");
-
-                if (searchTypeAhead.contains(document.activeElement)) {
-                  searchBox.focus();
-                }
-              }
+    searchForm.addEventListener("keydown", searchKeyDown);
+
+    function search() {
+      topSearchResultListItem = undefined;
+      let text = searchBox.value.toLowerCase(); // Search is case-insensitive.
+
+      if (text === "") {
+        searchTypeAhead.classList.add("hidden");
+      } else {
+        let totalResults = 0;
+        // Firsttype-ahead-signature", show/hide all the sub-entries within each module (top-level functions etc.)
+        searchTypeAhead.querySelectorAll("li").forEach((entry) => {
+          const entryModule = entry
+            .querySelector(".type-ahead-module-name")
+            .textContent.toLowerCase();
+          const entryName = entry
+            .querySelector(".type-ahead-def-name")
+            .textContent.toLowerCase();
+          const entrySignature = entry
+            .querySelector(".type-ahead-signature")
+            ?.textContent?.toLowerCase()
+            ?.replace(/\s+/g, "");
+
+          const qualifiedEntryName = `${entryModule}.${entryName}`;
+
+          if (
+            qualifiedEntryName.includes(text) ||
+            entrySignature?.includes(text.replace(/\s+/g, ""))
+          ) {
+            totalResults++;
+            entry.classList.remove("hidden");
+            if (topSearchResultListItem === undefined) {
+              topSearchResultListItem = entry;
             }
+          } else {
+            entry.classList.add("hidden");
+          }
         });
+        if (totalResults < 1) {
+          searchTypeAhead.classList.add("hidden");
+        } else {
+          searchTypeAhead.classList.remove("hidden");
+        }
+      }
     }
 
-    const isTouchSupported = () => {
-        try {
-            document.createEvent("TouchEvent");
-            return true;
-        } catch (e) {
-            return false;
-        }
-    };
+    searchBox.addEventListener("input", search);
 
-    // Select all <samp> elements that are children of <pre> elements
-    const codeBlocks = document.querySelectorAll("pre > samp");
+    search();
 
-    // Iterate over each code block
-    codeBlocks.forEach((codeBlock) => {
-        // Create a "Copy" button
-        const copyButton = document.createElement("button");
-        copyButton.classList.add("copy-button");
+    function searchSubmit(e) {
+      // pick the top result if the user submits search form
+      e.preventDefault();
+      if (topSearchResultListItem !== undefined) {
+        let topSearchResultListItemAnchor =
+          topSearchResultListItem.querySelector("a");
+        if (topSearchResultListItemAnchor !== null) {
+          topSearchResultListItemAnchor.click();
+        }
+      }
+    }
+    searchForm.addEventListener("submit", searchSubmit);
+
+    // Capture '/' keypress for quick search
+    window.addEventListener("keyup", (e) => {
+      if (e.key === "s" && document.activeElement !== searchBox) {
+        e.preventDefault();
+        searchBox.focus();
+        searchBox.value = "";
+      }
+
+      if (e.key === "Escape") {
+        if (document.activeElement === searchBox) {
+          // De-focus and clear input box
+          searchBox.value = "";
+          searchBox.blur();
+        } else {
+          // Hide the search results
+          searchTypeAhead.classList.add("hidden");
+
+          if (searchTypeAhead.contains(document.activeElement)) {
+            searchBox.focus();
+          }
+        }
+      }
+    });
+  }
+
+  const isTouchSupported = () => {
+    try {
+      document.createEvent("TouchEvent");
+      return true;
+    } catch (e) {
+      return false;
+    }
+  };
+
+  // Select all <samp> elements that are children of <pre> elements
+  const codeBlocks = document.querySelectorAll("pre > samp");
+
+  // Iterate over each code block
+  codeBlocks.forEach((codeBlock) => {
+    // Create a "Copy" button
+    const copyButton = document.createElement("button");
+    copyButton.classList.add("copy-button");
+    copyButton.textContent = "Copy";
+
+    // Add event listener to copy button
+    copyButton.addEventListener("click", () => {
+      const codeText = codeBlock.innerText;
+      navigator.clipboard.writeText(codeText);
+      copyButton.textContent = "Copied!";
+      copyButton.classList.add("copy-button-copied");
+      copyButton.addEventListener("mouseleave", () => {
         copyButton.textContent = "Copy";
+        copyButton.classList.remove("copy-button-copied");
+      });
+    });
 
-        // Add event listener to copy button
-        copyButton.addEventListener("click", () => {
-            const codeText = codeBlock.innerText;
-            navigator.clipboard.writeText(codeText);
-            copyButton.textContent = "Copied!";
-            copyButton.classList.add("copy-button-copied");
-            copyButton.addEventListener("mouseleave", () => {
-                copyButton.textContent = "Copy";
-                copyButton.classList.remove("copy-button-copied");
-            });
-        });
+    // Create a container for the copy button and append it to the document
+    const buttonContainer = document.createElement("div");
+    buttonContainer.classList.add("button-container");
+    buttonContainer.appendChild(copyButton);
+    codeBlock.parentNode.insertBefore(buttonContainer, codeBlock);
 
-        // Create a container for the copy button and append it to the document
-        const buttonContainer = document.createElement("div");
-        buttonContainer.classList.add("button-container");
-        buttonContainer.appendChild(copyButton);
-        codeBlock.parentNode.insertBefore(buttonContainer, codeBlock);
+    // Hide the button container by default
+    buttonContainer.style.display = "none";
 
-        // Hide the button container by default
+    if (isTouchSupported()) {
+      // Show the button container on click for touch support (e.g. mobile)
+      document.addEventListener("click", (event) => {
+        if (event.target.closest("pre > samp") !== codeBlock) {
+          buttonContainer.style.display = "none";
+        } else {
+          buttonContainer.style.display = "block";
+        }
+      });
+    } else {
+      // Show the button container on hover for non-touch support (e.g. desktop)
+      codeBlock.parentNode.addEventListener("mouseenter", () => {
+        buttonContainer.style.display = "block";
+      });
+
+      codeBlock.parentNode.addEventListener("mouseleave", () => {
         buttonContainer.style.display = "none";
+      });
+    }
+  });
+})();
 
-        if (isTouchSupported()) {
-            // Show the button container on click for touch support (e.g. mobile)
-            document.addEventListener("click", (event) => {
-                if (event.target.closest("pre > samp") !== codeBlock) {
-                    buttonContainer.style.display = "none";
-                } else {
-                    buttonContainer.style.display = "block";
-                }
-            });
-        } else {
-            // Show the button container on hover for non-touch support (e.g. desktop)
-            codeBlock.parentNode.addEventListener("mouseenter", () => {
-                buttonContainer.style.display = "block";
-            });
-
-            codeBlock.parentNode.addEventListener("mouseleave", () => {
-                buttonContainer.style.display = "none";
-            });
+(() => {
+  let body = document.body;
+  const sidebarOpen = "sidebar-open";
+  const removeOpenClass = () => {
+    body.classList.remove(sidebarOpen);
+    document.body
+      .querySelector("main")
+      .removeEventListener("click", removeOpenClass);
+  };
+  Array.from(document.body.querySelectorAll(".menu-toggle")).forEach(
+    (menuToggle) => {
+      menuToggle.addEventListener("click", (e) => {
+        body.classList.toggle(sidebarOpen);
+        e.stopPropagation();
+        if (body.classList.contains(sidebarOpen)) {
+          document.body.addEventListener("click", removeOpenClass);
         }
-    });
+      });
+    },
+  );
 })();
diff --git a/crates/docs/src/static/styles.css b/crates/docs/src/static/styles.css
index 4a1343888a..1399d5cf8b 100644
--- a/crates/docs/src/static/styles.css
+++ b/crates/docs/src/static/styles.css
@@ -1,16 +1,15 @@
 :root {
-  /* WCAG AAA Compliant colors */
-  --code-bg: #f4f8f9;
-  --gray: #717171;
-  --orange: #bf5000;
-  --green: #0b8400;
-  --cyan: #067c94;
+  /* WCAG AAA Compliant colors - important that luminence (the l in hsl) is 18% for font colors against the bg's luminence of 96-97% when the font-size is at least 14pt */
+  --code-bg: hsl(262 33% 96% / 1);
+  --gray: hsl(0 0% 18% / 1);
+  --orange: hsl(25 100% 18% / 1);
+  --green: hsl(115 100% 18% / 1);
+  --cyan: hsl(190 100% 18% / 1);
   --blue: #05006d;
   --violet: #7c38f5;
-  --violet-bg: #ece2fd;
+  --violet-bg: hsl(262.22deg 87.1% 93.92%);
   --magenta: #a20031;
   --link-hover-color: #333;
-
   --link-color: var(--violet);
   --code-link-color: var(--violet);
   --text-color: #000;
@@ -18,17 +17,17 @@
   --body-bg-color: #ffffff;
   --border-color: #717171;
   --faded-color: #4c4c4c;
-  --font-sans: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial,
-      sans-serif;
-  --font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier,
-      monospace;
+  --font-sans: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
   --top-header-height: 67px;
-  --sidebar-width: 280px;
+  --sidebar-width: clamp(280px, 25dvw, 500px);
   --module-search-height: 48px;
   --module-search-padding-height: 12px;
   --module-search-form-padding-width: 20px;
+  --sidebar-bg-color: hsl(from var(--violet-bg) h calc(s * 1.05) calc(l * 0.95));
 }
 
+
 a {
   color: var(--violet);
 }
@@ -63,26 +62,30 @@ table tr td {
 .pkg-full-name {
   display: flex;
   align-items: center;
-  font-size: 32px;
+  font-size: 24px;
   margin: 0 8px;
   font-weight: normal;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  height: 100%;
 }
 
 .entry-name {
   white-space: pre-wrap;
   font-family: var(--font-mono);
-  font-size: 18px;
+  font-size: 16px;
   font-weight: normal;
-  color: var(--violet);
+  background-color: var(--violet-bg);
+  color: var(--text-color);
   width: auto;
   margin-top: 0;
   margin-bottom: 24px;
-  padding: 8px 16px;
-  border-left: 2px solid var(--violet);
+  padding: 12px 16px;
+  border: 2px solid var(--violet);
+}
+
+.entry-name strong {
+    color: var(--text-color);
 }
 
 .entry-name:target {
@@ -113,6 +116,9 @@ table tr td {
 .pkg-full-name a {
   padding-top: 12px;
   padding-bottom: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 a {
@@ -128,8 +134,12 @@ a:hover code {
   min-width: 0; /* necessary for text-overflow: ellipsis to work in descendants */
   display: flex;
   align-items: center;
-  height: 100%;
+  justify-content: flex-start;
+  gap: 8px;
   background-color: var(--violet-bg);
+  padding-block: 16px;
+  position: sticky;
+  top: 0px;
 }
 
 .pkg-and-logo a,
@@ -158,36 +168,49 @@ a:hover code {
 body {
   display: grid;
   grid-template-columns:
-      [before-sidebar] 1fr [sidebar] var(--sidebar-width)
-      [main-content] fit-content(calc(1280px - var(--sidebar-width)))
-      [end] 1fr;
-  grid-template-rows: [top-header] var(--top-header-height) [above-footer] auto [footer] auto;
+      [sidebar] var(--sidebar-width)
+      [main-content] 1fr
+      [content-end];
+  grid-template-rows: 1fr;
+  height: 100dvh;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-family: var(--font-sans);
   color: var(--text-color);
   background-color: var(--body-bg-color);
+  overflow: hidden;
 }
 
 main {
   grid-column-start: main-content;
-  grid-column-end: main-content;
-  grid-row-start: above-footer;
-  grid-row-end: above-footer;
+  grid-column-end: content-end;
   box-sizing: border-box;
   position: relative;
-  font-size: 18px;
+  font-size: 14pt; /* This keeps links AAA compliant while still making the links distinctly colored. */
   line-height: 1.85em;
   margin-top: 2px;
-  padding: 48px;
-  max-width: 740px;
+  padding: 16px;
+  padding-top: 0px;
   /* necessary for text-overflow: ellipsis to work in descendants */
   min-width: 0;
   overflow-x: auto;
   /* fixes issues with horizonatal scroll in cases where word is too long,
   like in one of the examples at https://www.roc-lang.org/builtins/Num#Dec */
   overflow-wrap: break-word;
+  overflow-y: auto;
+  display: grid;
+  grid-template-columns: [main-start] 1fr [main-content-start] 60ch [main-content-end] 1fr [main-end];
+  grid-template-rows: auto;
+  flex-direction: column;
+  scrollbar-color: var(--violet) var(--body-bg-color);
+  scrollbar-gutter: stable both-edges;
+  scroll-padding-top: calc(16px + 16px + 1lh + 16px + 16px);
+}
+
+main > * {
+    grid-column-start: main-content-start;
+    grid-column-end: main-content-end;
 }
 
 /* Module links on the package index page (/index.html) */
@@ -199,7 +222,7 @@ main {
 
 section {
   padding: 0px 0px 16px 0px;
-  margin: 72px 0px;
+  margin: 36px 0px;
 }
 
 section blockquote {
@@ -233,33 +256,30 @@ padding: 0px 16px;
 }
 
 #sidebar-nav {
-  grid-column-start: sidebar;
-  grid-column-end: sidebar;
-  grid-row-start: above-footer;
-  grid-row-end: above-footer;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  padding-left: 56px;
-  padding-top: 6px;
-  width: 100%;
+    grid-column-start: sidebar;
+    grid-column-end: main-content;
+    position: relative;
+    display: grid;
+    grid-template-rows: min-content 1fr;
+    box-sizing: border-box;
+    width: 100%;
+    background-color: var(--sidebar-bg-color);
+    transition: all 1s linear;
 }
 
-.header-start-extension {
-  grid-column-start: before-sidebar;
-  grid-column-end: sidebar;
-  grid-row-start: top-header;
-  grid-row-end: top-header;
-  background-color: var(--violet-bg);
+#sidebar-nav .module-links-container {
+    position: relative;
 }
 
-.header-end-extension {
-  grid-column-start: end;
-  grid-column-end: end;
-  grid-row-start: top-header;
-  grid-row-end: top-header;
-  background-color: var(--violet-bg);
+
+#sidebar-nav .module-links {
+    position: absolute;
+    inset: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-color: var(--violet) var(--sidebar-bg-color);
+    scrollbar-gutter: stable both-edges;
+    padding-block: 1rem;
 }
 
 .top-header {
@@ -273,7 +293,7 @@ padding: 0px 16px;
   flex-wrap: nowrap;
   box-sizing: border-box;
   font-family: var(--font-sans);
-  font-size: 24px;
+  font-size: 20px;
   height: 100%;
   background-color: var(--violet-bg);
   /* min-width must be set to something (even 0) for text-overflow: ellipsis to work in descendants, but we want this anyway. */
@@ -286,10 +306,6 @@ p {
 }
 
 footer {
-  grid-column-start: main-content;
-  grid-column-end: main-content;
-  grid-row-start: footer;
-  grid-row-end: footer;
   max-width: var(--main-content-max-width);
   font-size: 14px;
   box-sizing: border-box;
@@ -316,9 +332,9 @@ footer p {
 
 .sidebar-entry a {
   box-sizing: border-box;
-  min-height: 48px;
+  min-height: 40px;
   min-width: 48px;
-  padding: 12px 16px;
+  padding: 8px 16px;
   font-family: var(--font-mono);
 }
 
@@ -327,6 +343,10 @@ footer p {
   color: var(--text-color);
 }
 
+.sidebar-sub-entries {
+    font-size: 12pt;
+}
+
 .sidebar-sub-entries a {
   display: block;
   line-height: 24px;
@@ -334,20 +354,37 @@ footer p {
   overflow: hidden;
   text-overflow: ellipsis;
   margin-left: 14px;
-  padding-left: 26px;
-  border-left: 2px solid var(--violet);
+  padding-left: 27px;
+  border-left: 2px solid rgb(from var(--gray) r g b / .30);
+  white-space: nowrap;
+}
+
+.sidebar-sub-entries a:hover {
+    border-left-color: rgb(from var(--violet) r g b / .60);
+    color: hsl(from var(--text-color) h s calc(l * 1.5));
+    background-color: rgb(from white r g b / .10);
 }
 
 .module-name {
-  font-size: 56px;
+  font-size: 40pt;
   line-height: 1em;
   font-family: var(--font-mono);
   font-weight: bold;
-  margin-top: 18px;
-  margin-bottom: 48px;
+  margin-top: 36px;
+  margin-bottom: 16px;
   color: var(--violet);
 }
 
+main h2 {
+    font-size: 28pt;
+}
+main h3 {
+    font-size: 24pt;
+}
+main h4 {
+    font-size: 20pt;
+}
+
 .module-name a,
 .module-name a:visited {
 color: inherit;
@@ -359,7 +396,7 @@ color: inherit;
 
 .sidebar-module-link {
   box-sizing: border-box;
-  font-size: 18px;
+  font-size: 14pt;
   line-height: 24px;
   font-family: var(--font-mono);
   display: block;
@@ -418,6 +455,7 @@ a code {
   color: var(--code-link-color);
   background: none;
   padding: 0;
+  font-weight: bold; /* Important for AAA compliance while keeping color distinct */
 }
 
 code a:visited,
@@ -430,7 +468,6 @@ pre {
   padding: 8px 16px;
   box-sizing: border-box;
   background-color: var(--code-bg);
-  overflow-x: hidden;
   position: relative;
   word-wrap: normal;
 }
@@ -450,13 +487,33 @@ pre>samp {
   align-items: center;
   align-content: center;
   height: 100%;
-  background-color: var(--violet-bg);
-  position: relative;
+  position: sticky;
   flex-grow: 1;
   box-sizing: border-box;
-  padding: 0px var(--module-search-form-padding-width);
+  padding-top: 16px;
+  background-color: var(--body-bg-color);
+  top: 0;
+  z-index: 1;
+}
+
+.menu-toggle {
+    display: none;
+    margin-right: 8px;
+    appearance: none;
+    background-color: transparent;
+    outline: none;
+    border: none;
+    color: var(--violet);
+    padding: 0;
+    cursor: pointer;
 }
 
+.menu-toggle svg {
+    height: 48px;
+    width: 48px;
+}
+
+
 #module-search,
 #module-search:focus {
   opacity: 1;
@@ -471,12 +528,19 @@ pre>samp {
   box-sizing: border-box;
   width: 100%;
   box-sizing: border-box;
-  font-size: 18px;
+  font-size: 16px;
   line-height: 18px;
   border: none;
   color: var(--faded-color);
   background-color: var(--body-bg-color);
   font-family: var(--font-serif);
+  border: 2px solid var(--violet-bg);
+}
+
+@media (prefers-color-scheme: light) {
+    #module-search {
+        outline: 1px solid var(--gray);
+    }
 }
 
 #module-search::placeholder {
@@ -485,7 +549,7 @@ pre>samp {
 }
 
 #module-search:focus, #module-search:hover {
-  outline: 2px solid var(--faded-color);
+  outline: 2px solid var(--violet);
 }
 
 #search-type-ahead {
@@ -567,13 +631,9 @@ pre>samp {
   box-sizing: border-box;
   align-items: center;
   font-size: 18px;
-  line-height: 18px;
-  padding: 12px 16px;
-  height: 48px;
   pointer-events: none;
   position: absolute;
-  top: 12px;
-  left: 96px;
+  right: 72px;
 }
 
 #search-shortcut-key {
@@ -583,7 +643,6 @@ pre>samp {
   padding: 1px 3px 3px;
   font-style: normal;
   line-height: 15px;
-  opacity: 0.6;
   pointer-events: none;
 }
 
@@ -606,32 +665,31 @@ pre>samp {
 
 .module-name {
     flex-grow: 1;
-    margin-bottom: 0;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
       /* WCAG AAA Compliant colors */
-      --code-bg: #202746;
-      --gray: #b6b6b6;
-      --orange: #fd6e08;
-      --green: #8ecc88;
-      --cyan: #12c9be;
-      --blue: #b1afdf;
-      --violet: #CAADFB;
-      --violet-bg: #332944;
-      --magenta: #f39bac;
+    --code-bg: hsl(228.95deg 37.25% 15%);
+    --gray: hsl(0 0% 70% / 1);
+    --orange: hsl(25 98% 70% / 1);
+    --green: hsl(115 40% 70% / 1);
+    --cyan: hsl(176 84% 70% / 1);
+    --blue: hsl(243 43% 80% / 1);
+    --violet: #caadfb;
+    --violet-bg: #332944;
+    --magenta: hsl(348 79% 80% / 1);
       --link-hover-color: #fff;
 
       --link-color: var(--violet);
       --code-link-color: var(--violet);
       --text-color: #eaeaea;
-      --body-bg-color: #0e0e0f;
+      --body-bg-color: hsl(from var(--violet-bg) h s calc(l * .5));
       --border-color: var(--gray);
       --code-color: #eeeeee;
       --logo-solid: #8f8f8f;
       --faded-color: #bbbbbb;
-      --gray: #6e6e6e;
+      --sidebar-bg-color: hsl(from var(--violet-bg) h calc(s * 1.1) calc(l * 0.75));
   }
 
   html {
@@ -641,143 +699,163 @@ pre>samp {
 
 @media only screen and (max-device-width: 480px) and (orientation: portrait) {
     body {
-      grid-template-areas:
-        "header"
-        "main"
-        "sidebar"
-        "footer";
+        display: block;
+        overflow-y: auto;
+        overflow-x: hidden;
     }
 
     #sidebar-nav {
-      grid-area: sidebar;
+        left: calc(-1 * var(--sidebar-width));
+        top: 0;
+        bottom: 0;
+        position: fixed;
+        z-index: 2;
+        transition: all .2s linear;
+    }
+
+    body.sidebar-open #sidebar-nav {
+        left: 0;
     }
 
     main {
-      grid-area: main;
+        display: block;
+        margin: 0 16px;
     }
 
-    .top-header {
-      grid-area: header;
+    :root {
+        --top-header-height: 160px;
     }
 
-    footer {
-      grid-area: footer;
+    #search-shortcut-key, .header-start-extension, .header-end-extension, #search-label {
+        display: none;
     }
-  :root {
-      --top-header-height: 160px;
-  }
 
-  #search-shortcut-key, .header-start-extension, .header-end-extension, #search-label {
-      display: none;
-  }
+    #module-search-form {
+        padding: 16px 16px;
+        height: auto;
+        margin-bottom: 16px;
+        grid-column-start: main-content-start;
+        grid-column-end: main-content-end;
+        position: fixed;
+        left: 0;
+        right: 0;
+    }
 
-  #module-search-form {
-      padding: 0 16px;
-      width: 100%;
-      height: auto;
-      margin-bottom: 16px;
-  }
+    .menu-toggle {
+        display: inline-block;
+        margin-right: 8px;
+        appearance: none;
+        background-color: transparent;
+        outline: none;
+        border: none;
+        color: var(--text-color);
+        padding: 0;
+    }
 
-  /* Hide the Copy Link button on mobile. */
-  .entry-name a:first-of-type {
-      display: none;
-  }
+    .menu-toggle svg {
+        height: 48px;
+        width: 48px;
+    }
 
-  .search-button {
-      display: block; /* This is only visible in mobile. */
-  }
+    /* Hide the Copy Link button on mobile. */
+    .entry-name a:first-of-type {
+        display: none;
+    }
 
-  .top-header {
-      flex-direction: column;
-      height: auto;
-      justify-content: space-between;
-      /* min-width must be set to something (even 0) for text-overflow: ellipsis to work in descendants. */
-      min-width: 0;
-  }
+    .search-icon {
+        display: block; /* This is only visible in mobile. */
+        top: calc(1lh / 2 + 16px);
+    }
 
-  .pkg-full-name {
-      margin-left: 8px;
-      margin-right: 12px;
-      font-size: 24px;
-      padding-bottom: 14px;
-  }
+    .top-header {
+        flex-direction: column;
+        height: auto;
+        justify-content: space-between;
+        /* min-width must be set to something (even 0) for text-overflow: ellipsis to work in descendants. */
+        min-width: 0;
+    }
 
-  .pkg-full-name a {
-      vertical-align: middle;
-      padding: 18px 0;
-  }
+    .pkg-full-name {
+        font-size: 20px;
+        padding-bottom: 14px;
+    }
 
-  .logo {
-      padding-left: 2px;
-      width: 50px;
-      height: 54px;
-  }
+    .pkg-full-name a {
+        vertical-align: middle;
+        padding: 18px 0;
+    }
 
-  .version {
-      margin: 0;
-      font-weight: normal;
-      font-size: 18px;
-      padding-bottom: 16px;
-  }
+    .logo {
+        width: 50px;
+        height: 54px;
+    }
 
-  .module-name {
-      font-size: 36px;
-      margin-top: 8px;
-      margin-bottom: 8px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-  }
+    .version {
+        margin: 0;
+        font-weight: normal;
+        font-size: 18px;
+        padding-bottom: 16px;
+    }
 
-  main {
-      padding: 18px;
-      font-size: 16px;
-      max-width: 480px;
-  }
+    .module-name {
+        font-size: 24px;
+        margin-top: 8px;
+        margin-bottom: 8px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 
-  #sidebar-nav {
-      margin-top: 0;
-      padding-left: 0;
-      width: auto;
-  }
+    main {
+        padding: 18px;
+        font-size: 16px;
+        padding-top: calc(16px + 16px + 1lh + 16px);
+    }
 
-  #sidebar-heading {
-      font-size: 24px;
-      margin: 16px;
-  }
+    #sidebar-nav {
+        margin-top: 0;
+        padding-left: 0;
+        width: var(--sidebar-width);
+    }
 
-  h3 {
-      font-size: 18px;
-      margin: 0;
-      padding: 0;
-  }
+    #sidebar-heading {
+        font-size: 24px;
+        margin: 16px;
+    }
 
-  h4 {
-      font-size: 16px;
-  }
+    h3 {
+        font-size: 18px;
+        margin: 0;
+        padding: 0;
+    }
 
-  body {
-      grid-template-columns: auto;
-      margin: 0;
-      min-width: 320px;
-      max-width: 100%;
-  }
+    h4 {
+        font-size: 16px;
+    }
 
-  .top-header-triangle {
-      display: none;
-  }
+    body {
+        margin: 0;
+        min-width: 320px;
+        max-width: 100dvw;
+    }
 
-  .pkg-and-logo {
-      width: 100%;
-  }
+    .top-header-triangle {
+        display: none;
+    }
 
-  .pkg-full-name {
-      flex-grow: 1;
-  }
+    .pkg-and-logo {
+        width: 100%;
+        padding-block: 4px;
+        align-items: space-between;
+    }
 
-  .pkg-full-name a {
-      padding-top: 24px;
-      padding-bottom: 12px;
-  }
+    .pkg-full-name {
+        flex-grow: 1;
+    }
+
+    .pkg-full-name a {
+        padding-top: 24px;
+        padding-bottom: 12px;
+    }
 }
 
 /* Comments `#` and Documentation comments `##` */
