Switch to Grid and Footer (#97)

Problem
=======

Needed to do the footer, but had to change a good amount to make it
work.

Closes #83 

Solution
========

- Added a grid
- Moved the old menu icons to the left as a column
- Shifted around a few things for the grid.
- Kept the resize
- Kept the sidebar animation
- Kept the touch controls for mobile (swipe to get the sidebar)
- Added the footer

book.toml

@@ -18,6 +18,7 @@ preferred-dark-theme = "coal"
 additional-css = [
   "css/side-nav.css",
   "css/header.css",
+  "css/footer.css",
   "css/extended.css",
   "css/highlight.css",
   "css/highlight-dark.css",

css/footer.css

@@ -0,0 +1,92 @@
+/* Custom CSS for the Footer Component */
+
+:root {
+  --footer-color-primary: #000;
+  --footer-color-primary-inverted: #fff;
+  --footer-color-secondary: #19455e;
+  --footer-section-margin-bottom: 3rem;
+}
+
+.frqcy-footer {
+  background: var(--footer-color-primary-inverted);
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--footer-color-primary);
+  padding: var(--footer-section-margin-bottom) 1rem;
+}
+
+#frqcy-footer-logo {
+  display: block;
+  max-width: 257px;
+  width: 100%;
+  color: var(--footer-color-primary);
+  margin-bottom: var(--footer-section-margin-bottom);
+}
+
+#frqcy-footer-copyright {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  width: 100%;
+  line-height: 1;
+  margin: 0 1rem var(--footer-section-margin-bottom) 1rem;
+}
+
+#frqcy-footer-copyright div.frqcy-footer-vbar {
+  width: 10%;
+  height: 2px;
+  background: var(--footer-color-primary);
+  justify-self: stretch;
+  margin: 1rem auto;
+}
+
+#frqcy-footer-copyright a {
+  color: var(--footer-color-primary);
+  padding: 0;
+}
+
+#frqcy-footer-copyright a:hover,
+#frqcy-footer-copyright a:visited:hover {
+  color: var(--footer-color-secondary);
+}
+
+.frqcy-footer .frqcy-footer-social-links {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: var(--footer-section-margin-bottom);
+  width: 100%;
+  justify-content: center;
+}
+
+.frqcy-footer .frqcy-footer-social-links a {
+  cursor: pointer;
+  display: flex;
+  height: 100%;
+  margin: 1rem;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  flex: 0 0 32px;
+  background: var(--footer-color-primary);
+  color: var(--footer-color-primary-inverted);
+}
+
+.frqcy-footer .frqcy-footer-social-links a:hover,
+.frqcy-footer .frqcy-footer-social-links a:visited:hover {
+  background: var(--footer-color-secondary);
+}
+
+/* Desktop */
+@media only screen and (min-width: 620px) {
+  #frqcy-footer-copyright {
+    flex-direction: row;
+  }
+
+  #frqcy-footer-copyright div.frqcy-footer-vbar {
+    width: 2px;
+    height: 100%;
+    margin: 0 2rem;
+  }
+}

css/header.css

@@ -9,27 +9,30 @@
 /* Everything is scoped to .frqcy-header */
 
 .frqcy-header {
+  height: var(--header-height);
+  position: sticky;
+  top: 0;
+
+  width: 100vw;
+  padding: 0 16px;
+
   font-family: "Newake", "Arial Black", Arial, sans-serif;
   text-transform: uppercase;
   color: var(--header-color-primary);
-  height: 80px;
-  background-color: var(--header-background);
-  box-shadow: 0 4px 4px 0 #00000040;
-  width: 100vw;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1000;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 20px 0 40px;
   box-sizing: border-box;
+
+  background-color: var(--header-background);
+  box-shadow: 0 4px 4px 0 #00000040;
+  width: 100vw;
+  z-index: 1000;
 }
 
 @media (min-width: 800px) {
   .frqcy-header {
-    padding: 0 80px;
+    padding: 0 62px;
   }
 }
 
@@ -38,7 +41,6 @@
 }
 
 .frqcy-header .header-logo {
-  padding-right: 16px;
   height: auto;
   width: 236px;
   color: var(--header-color-secondary);

css/side-nav.css

@@ -73,6 +73,11 @@
   margin-block-start: 4.5rem;
 }
 
+/* n(1) is hidden, so we need to remove the margin from n(2) */
+#toc > .chapter li.chapter-item:nth-child(2) {
+  margin-block-start: 0;
+}
+
 #toc > .chapter > li > a:first-of-type {
   padding-inline-start: 1rem;
   font-weight: bold;

theme/book.js

@@ -604,66 +604,3 @@ function playground_text(playground, hidden = true) {
     document.scrollingElement.scrollTo({ top: 0, behavior: "smooth" });
   });
 })();
-
-(function controllMenu() {
-  var menu = document.getElementById("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).
-    menu.style.top = scrollTop + "px";
-    // Same as parseInt(menu.style.top.slice(0, -2), but faster
-    var 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 () {
-        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;
-        if (scrollDown) {
-          nextSticky = false;
-          if (menuPosAbsoluteY > 0) {
-            nextTop = prevScrollTop;
-          }
-        } else {
-          if (menuPosAbsoluteY > 0) {
-            nextSticky = true;
-          } else if (menuPosAbsoluteY < minMenuY) {
-            nextTop = prevScrollTop + minMenuY;
-          }
-        }
-        if (nextSticky === true && stickyCache === false) {
-          menu.classList.add("sticky");
-          stickyCache = true;
-        } else if (nextSticky === false && stickyCache === true) {
-          menu.classList.remove("sticky");
-          stickyCache = false;
-        }
-        if (nextTop !== null) {
-          menu.style.top = nextTop + "px";
-          topCache = nextTop;
-        }
-        prevScrollTop = scrollTop;
-      },
-      { passive: true },
-    );
-  })();
-  (function controllBorder() {
-    function updateBorder() {
-      if (menu.offsetTop === 0) {
-        menu.classList.remove("bordered");
-      } else {
-        menu.classList.add("bordered");
-      }
-    }
-    updateBorder();
-    document.addEventListener("scroll", updateBorder, { passive: true });
-  })();
-})();