Pile of Minor Fixes (#110)

Problem ======= Various small fixes for the final tweaks of the docs Closes: #87
frequency-chain · Nov 19, 2024 · df5b93b · df5b93b
1 parent 98dc74e
commit df5b93b
Show file tree

Hide file tree

Showing 9 changed files with 212 additions and 136 deletions.
diff --git a/book.toml b/book.toml
@@ -28,6 +28,7 @@ preferred-dark-theme = "coal"
 additional-css = [
   "css/tailwind.css",
   "css/side-nav.css",
+  "css/button-links.css",
   "css/header.css",
   "css/extended.css",
   "css/highlight.css",

diff --git a/css/button-links.css b/css/button-links.css
@@ -0,0 +1,74 @@
+.button-links,
+.button-links > p {
+  display: flex;
+  justify-content: space-around;
+  align-content: center;
+  align-items: stretch;
+  flex-wrap: wrap;
+}
+
+.button-links > p {
+  width: 100%;
+  margin: 0;
+}
+
+.button-links a,
+.button-links > p a,
+.button-links a:link,
+.button-links > p a:link {
+  text-decoration: none;
+  box-sizing: content-box;
+  font-weight: 700;
+  color: var(--button-nav-fg);
+  background-color: var(--button-nav-bg);
+  border: 2px solid transparent;
+  border-radius: 9999px;
+  user-select: none;
+  padding: 20px 10%;
+  margin: 10px;
+  display: flex;
+  font-size: 20px;
+  flex: 0.5;
+  transition-property: border, color;
+  transition-duration: 0.5s;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  white-space: nowrap;
+}
+
+@media screen and (max-width: 1080px) {
+  .button-links a,
+  .button-links > p a,
+  .button-links a:link,
+  .button-links > p a:link {
+    box-sizing: border-box;
+    margin: 10px 6px;
+    flex: 0 0 90%;
+    width: 100%;
+    white-space: normal;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  .button-links a,
+  .button-links > p a,
+  .button-links a:link,
+  .button-links > p a:link {
+    box-sizing: border-box;
+    margin: 10px 6px;
+    flex: 0 0 100%;
+    width: 100%;
+    white-space: normal;
+  }
+}
+
+.button-links a:hover,
+.button-links > p a:hover,
+.button-links a:visited:hover,
+.button-links > p a:visited:hover {
+  text-decoration: none;
+  border: 2px solid var(--button-nav-hover-border);
+  color: var(--button-nav-hover-fg);
+  background: var(--button-nav-hover-bg);
+}
diff --git a/css/extended.css b/css/extended.css
@@ -27,81 +27,6 @@
   padding: 10px 0;
 }
 
-.button-links,
-.button-links > p {
-  display: flex;
-  justify-content: space-around;
-  align-content: center;
-  align-items: stretch;
-  flex-wrap: wrap;
-}
-
-.button-links > p {
-  width: 100%;
-  margin: 0;
-}
-
-.button-links a,
-.button-links > p a,
-.button-links a:link,
-.button-links > p a:link {
-  text-decoration: none;
-  box-sizing: content-box;
-  font-weight: 300;
-  color: var(--button-nav-fg);
-  background-color: var(--button-nav-bg);
-  border: 2px solid transparent;
-  border-radius: 15px;
-  user-select: none;
-  padding: 20px 10%;
-  margin: 10px;
-  display: flex;
-  font-size: 20px;
-  font-weight: 400;
-  flex: 0.5;
-  transition-property: border, color;
-  transition-duration: 0.5s;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  white-space: nowrap;
-}
-
-@media screen and (max-width: 1080px) {
-  .button-links a,
-  .button-links > p a,
-  .button-links a:link,
-  .button-links > p a:link {
-    box-sizing: border-box;
-    margin: 10px 6px;
-    flex: 0 0 90%;
-    width: 100%;
-    white-space: normal;
-  }
-}
-
-@media screen and (max-width: 400px) {
-  .button-links a,
-  .button-links > p a,
-  .button-links a:link,
-  .button-links > p a:link {
-    box-sizing: border-box;
-    margin: 10px 6px;
-    flex: 0 0 100%;
-    width: 100%;
-    white-space: normal;
-  }
-}
-
-.button-links a:hover,
-.button-links > p a:hover,
-.button-links a:visited:hover,
-.button-links > p a:visited:hover {
-  text-decoration: none;
-  border: 2px solid var(--button-nav-hover);
-  color: var(--button-nav-fg);
-}
-
 .svg-embed {
   margin-top: 10px;
   margin-bottom: 10px;

diff --git a/css/side-nav.css b/css/side-nav.css
@@ -46,25 +46,25 @@
 }
 
 /* Individual icons for specific items (1 indexed) */
-#toc > .chapter li.chapter-item:nth-child(2) > a:first-of-type::before {
+#toc > .chapter > li.chapter-item:nth-child(2) > a:first-of-type::before {
   background-image: var(--icon-provider);
 }
 
-#toc > .chapter li.chapter-item:nth-child(3) > a:first-of-type::before {
+#toc > .chapter > li.chapter-item:nth-child(3) > a:first-of-type::before {
   background-image: var(--icon-gateway);
 }
 
-#toc > .chapter li.chapter-item:nth-child(4) > a:first-of-type::before {
+#toc > .chapter > li.chapter-item:nth-child(4) > a:first-of-type::before {
   background-image: var(--icon-sso);
 }
 
-#toc > .chapter li.chapter-item:nth-child(5) > a:first-of-type::before {
+#toc > .chapter > li.chapter-item:nth-child(5) > a:first-of-type::before {
   background-image: var(--icon-core);
 }
 
 /* Nav Bar */
 
-#toc .chapter li.chapter-item:nth-child(1) {
+#toc .chapter > li.chapter-item:nth-child(1) {
   /* Hide the "overview" page */
   display: none;
 }
@@ -74,7 +74,7 @@
 }
 
 /* n(1) is hidden, so we need to remove the margin from n(2) */
-#toc > .chapter li.chapter-item:nth-child(2) {
+#toc > .chapter > li.chapter-item:nth-child(2) {
   margin-block-start: 0;
 }
 
@@ -84,21 +84,25 @@
 }
 
 #toc > .chapter > li > .section {
-  padding-inline-start: calc(45px + 20px);
+  padding-inline-start: calc(45px + 10px);
 }
 
-#toc > .chapter li {
+#toc > .chapter > li {
   display: flex;
   align-items: center;
 }
 
-#toc > .chapter li.chapter-item > a:first-of-type {
+#toc > .chapter > li.chapter-item > a:first-of-type {
   padding-inline-start: 0;
   display: flex;
   align-items: center;
   flex: 1;
 }
 
+#toc > .chapter > li > .section > li.chapter-item:first-of-type {
+  margin-top: 10px;
+}
+
 .chapter li > a.toggle {
   flex: 0 0 24px;
   width: 24px;

diff --git a/theme/css/chrome.css b/theme/css/chrome.css
@@ -194,20 +194,29 @@ a > .hljs {
 .content .mobile-nav-chapters {
   display: block;
   font-size: 1em;
+  font-weight: 700;
   text-align: center;
   text-decoration: none;
   padding: 10px 20px;
-  border-radius: 5px;
+  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;
 }
 
-.mobile-nav-chapters:hover {
-  color: var(--button-nav-hover);
+a.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);
 }
 
-.mobile-nav-chapters:active {
-  color: var(--button-nav-hover);
+a.mobile-nav-chapters:active {
+  color: var(--button-nav-hover-fg);
+  background: var(--button-nav-hover-bg);
+  border: 2px solid var(--button-nav-hover-border);
 }
 
 /* Only Firefox supports flow-relative values */
@@ -376,6 +385,7 @@ mark {
   margin-block-end: -1px;
   margin-inline-start: -3px;
   margin-inline-end: -3px;
+  color: var(--fg);
   background-color: var(--search-mark-bg);
   transition: background-color 300ms linear;
   cursor: pointer;

diff --git a/theme/css/general.css b/theme/css/general.css
@@ -106,8 +106,7 @@ h5:target::before,
 h6:target::before {
   display: inline-block;
   content: "#";
-  margin-inline-start: -20px;
-  width: 20px;
+  width: 40px;
   position: relative;
   color: var(--headers);
 }

diff --git a/theme/css/print.css b/theme/css/print.css
@@ -1,3 +1,18 @@
+:root {
+  --bg: #fff !important;
+  --fg: #000 !important;
+  --headers: #000 !important;
+
+  --links: #000 !important;
+  --links-hover: var(--sidebar-active);
+
+  --table-border-color: #000 !important;
+  --table-header-bg: #fff !important;
+  --table-alternate-bg: #fff !important;
+
+  --color-scheme: light !important;
+}
+
 #body-container {
   min-height: 100vh;
   display: grid;
@@ -10,7 +25,7 @@
 #menu-bar,
 .nav-chapters,
 .mobile-nav-chapters {
-  display: none;
+  display: none !important;
 }
 
 #page-wrapper.page-wrapper {
@@ -25,6 +40,19 @@
   padding: 0;
 }
 
+.button-links,
+.title-embed {
+  display: none !important;
+}
+
+.svg-embed-light {
+  display: block !important;
+}
+
+.svg-embed-coal {
+  display: none !important;
+}
+
 .page {
   overflow-y: initial;
 }