Switch to mdbook v0.4.42

.github/workflows/common/set-up-mdbook/action.yaml

@@ -11,7 +11,7 @@ runs:
       uses: jontze/action-mdbook@0765bef0c7c5792f93bf3ed3d487a0ca32c9da33
       with:
         token: ${{ inputs.token }}
-        mdbook-version: "0.4.40" # Use a semver compatible string
+        mdbook-version: "0.4.42" # Use a semver compatible string
         # Optional Plugins have to be enabled
         use-linkcheck: true
         linkcheck-version: "~0.7.7"

README.md

@@ -15,7 +15,7 @@ and [link checker](https://github.com/Michael-F-Bryan/mdbook-linkcheck). The lin
 or external links.
 
 ```bash
-cargo install mdbook
+cargo install mdbook@v0.4.42
 cargo install mdbook-linkcheck
 npm install
 ```

book.toml

@@ -27,10 +27,9 @@ edit-url-template = "https://github.com/frequency-chain/docs/blob/main/{path}"
 preferred-dark-theme = "coal"
 additional-css = [
   "css/tailwind.css",
+  "css/overrides.css",
   "css/side-nav.css",
   "css/button-links.css",
-  "css/header.css",
-  "css/extended.css",
   "css/highlight.css",
   "css/highlight-dark.css",
 ]

css/overrides.css

@@ -0,0 +1,320 @@
+/* This overrides the default theme, so we can use it instead of editing the theme css */
+
+:root {
+  font-size: 100% !important;
+}
+
+/* :target {
+  scroll-margin-top: calc(var(--header-height) + 20px);
+} */
+/*
+html {
+  scroll-margin-top: 0;
+} */
+
+body {
+  font-size: 18px;
+}
+
+/* GRID & Layout */
+#body-container {
+  transition: 300ms;
+  min-height: 100vh;
+  display: grid;
+  grid:
+    [row1-start] "header header header header" auto [row1-end]
+    [row2-start] "sidebar sidebar-resize menu-bar content" 1fr [row2-end]
+    [row3-start] "footer footer footer footer" auto [row3-end]
+    / 0 0 auto 1fr;
+}
+
+.no-js #body-container {
+  display: grid;
+  grid:
+    [row1-start] "header header header" auto [row1-end]
+    [row2-start] "sidebar sidebar-resize menu-bar content" auto [row2-end]
+    [row3-start] "footer footer footer" auto [row3-end]
+    / 0 0 auto 1fr;
+}
+
+#header {
+  grid-area: header;
+}
+
+#sidebar {
+  grid-area: sidebar;
+}
+
+#sidebar-resize-handle {
+  grid-area: sidebar-resize;
+}
+
+#content {
+  grid-area: content;
+}
+
+#footer {
+  grid-area: footer;
+}
+
+#menu-bar-mod {
+  grid-area: menu-bar;
+}
+
+/* sidebar-visible */
+#sidebar-toggle-anchor:checked ~ #sidebar {
+  padding:;
+}
+#sidebar-toggle-anchor:checked ~ #body-container {
+  /* On Mobile, max the width of the sidebar, but always leave room for the menu button */
+  grid-template-columns: var(--sidebar-width-mobile) 0 auto minmax(300px, 1fr);
+}
+
+/* Desktop sidebar visible */
+@media only screen and (min-width: 620px) {
+  #sidebar-toggle-anchor:checked ~ #body-container {
+    grid-template-columns:
+      var(--sidebar-width) var(--sidebar-resize-indicator-width) auto
+      minmax(300px, 1fr);
+  }
+}
+
+::-webkit-scrollbar {
+  background: var(--bg);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar);
+}
+
+/* Hide extra things */
+.menu-title,
+.nav-wide-wrapper,
+.right-buttons,
+#menu-bar-hover-placeholder {
+  display: none;
+}
+
+/* Sidebar Overrides */
+
+#sidebar {
+  position: relative;
+  width: auto;
+}
+
+#sidebar::-webkit-scrollbar {
+  background: var(--sidebar-bg);
+}
+
+#sidebar::-webkit-scrollbar-thumb {
+  background: var(--scrollbar);
+}
+
+#sidebar .sidebar-scrollbox {
+  display: block;
+  position: sticky;
+  top: 80px;
+  box-sizing: padding-box;
+  padding: 0;
+  max-height: 100vh;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-y: contain;
+}
+
+#sidebar .sidebar-contents {
+  padding: 40px 20px;
+}
+
+.chapter {
+  line-height: 1;
+}
+
+.chapter li.chapter-item {
+  margin-block-start: 1em;
+}
+
+/* Switch to Chevron */
+.chapter li > a.toggle {
+  background-color: var(--sidebar-fg);
+  mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="chevron"><polyline points="9 18 15 12 9 6"></polyline></svg>');
+  mask-repeat: repeat;
+  background-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  opacity: 1;
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
+  padding: 0px;
+}
+
+.chapter li:hover > a.toggle,
+.chapter a.active + a.toggle {
+  background-color: var(--sidebar-active);
+}
+
+.chapter li > a.toggle div {
+  display: none;
+}
+
+.chapter li > a.toggle {
+  transition: transform 0.5s;
+}
+
+.chapter li.expanded > a.toggle {
+  transform: rotate(90deg);
+}
+
+/* End Switch to Chevron */
+
+/* Resize Handle */
+
+.sidebar-resize-handle {
+  cursor: col-resize;
+  display: flex;
+  align-items: center;
+  margin-left: var(--sidebar-resize-indicator-space);
+  width: var(--sidebar-resize-indicator-width);
+}
+
+.sidebar-resize-handle .sidebar-resize-indicator {
+  display: none;
+  position: fixed;
+  top: 50%;
+  width: var(--sidebar-resize-indicator-width);
+  height: 12px;
+  background-color: var(--icons);
+  margin-inline-start: 0;
+}
+
+@media only screen and (min-width: 620px) {
+  .sidebar-resize-handle .sidebar-resize-indicator {
+    display: inherit;
+  }
+}
+
+/* Menu Bar overrides */
+#menu-bar-mod {
+  position: relative;
+  background-color: var(--bg);
+}
+
+#menu-bar-mod .left-buttons {
+  position: sticky;
+  top: var(--header-height);
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  margin: 0;
+}
+
+#menu-bar-mod .icon-button {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  position: relative;
+  padding: 0 8px;
+  width: 50px;
+  height: 50px;
+  z-index: 10;
+  line-height: var(--menu-bar-height);
+  cursor: pointer;
+  transition: color 0.5s;
+}
+
+#menu-bar-mod #theme-list {
+  top: 60px;
+  left: 36px;
+  color: var(--theme-popup-fg);
+}
+
+#page-wrapper {
+  margin-inline-start: 0 !important;
+}
+
+#page-wrapper .page {
+  padding: 0;
+  margin-block-start: 0;
+}
+
+#content {
+  overflow-y: auto;
+  min-height: 100vh;
+  padding: 32px 45px 128px 6px;
+}
+
+#content .nav-wrapper {
+  padding: 24px;
+  display: block;
+}
+
+#content .mobile-nav-chapters {
+  display: block;
+  font-size: 1em;
+  font-weight: 700;
+  text-align: center;
+  text-decoration: none;
+  padding: 10px 20px;
+  border-radius: 9999px;
+  background-color: var(--button-nav-bg);
+  color: var(--button-nav-fg);
+  border: 2px solid transparent;
+  transition-property: border, color;
+  transition-duration: 0.5s;
+  margin-bottom: 24px;
+}
+
+#content .mobile-nav-chapters:hover {
+  color: var(--button-nav-hover-fg);
+  background: var(--button-nav-hover-bg);
+  text-decoration: none;
+  border: 2px solid var(--button-nav-hover-border);
+}
+
+#content .mobile-nav-chapters:active {
+  color: var(--button-nav-hover-fg);
+  background: var(--button-nav-hover-bg);
+  border: 2px solid var(--button-nav-hover-border);
+}
+
+/* General content related overrides */
+
+mark {
+  color: var(--fg);
+}
+
+h1:target::before {
+  display: none;
+}
+
+h2:target::before,
+h3:target::before {
+  display: inline-block;
+  content: "#";
+  width: 50px;
+  position: relative;
+  color: var(--headers);
+}
+
+h4:target::before,
+h5:target::before,
+h6:target::before {
+  display: inline-block;
+  content: "#";
+  width: 40px;
+  position: relative;
+  color: var(--headers);
+}
+
+/* Replace Font-Awesome */
+
+.fa.fa-github {
+  background-color: var(--sidebar-fg);
+  mask: url("data:image/svg+xml,	<svg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 98 96'><path d='M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z'/></svg>");
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center center;
+  height: 1em;
+  width: 1em;
+  display: inline-block;
+}