footer, root module nav, and main page done

src/styles/docs/docs-types.css

@@ -1,10 +1,44 @@
 .root-nav {
-  margin-left: 1em;
+  position: relative;
   display: flex;
   flex-direction: column;
+  border-radius: 6px;
+  border: 1px solid hsla(var(--blue) 10 15 / 0.6);
+  margin-top: 1rem;
 
   & .root-nav-entry {
-    margin-block: 1em;
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 42px;
+    text-wrap: pretty;
+    padding: 0.5rem 1rem;
+    padding-top: 1.5rem;
+
+    &:not(:last-child) {
+      border-bottom: 1px solid hsla(var(--blue) 10 15 / 0.6);
+    }
+
+    & .root-nav-link {
+      font-size: 1.137rem;
+      max-height: 2rem;
+      position: relative;
+      text-decoration: none;
+      text-align: center;
+
+      &::before {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 1px;
+        background: linear-gradient(90deg,
+            transparent 25%,
+            hsla(var(--accent-500) / 0.88) 50%,
+            transparent 75%);
+      }
+    }
   }
 }
 
@@ -13,6 +47,8 @@
 }
 
 .typedocs-title {
+  letter-spacing: 0.012rem;
+
   & a {
     opacity: 0.6;
     transition: opacity 0.5s;
@@ -299,6 +335,43 @@
 }
 
 @media (min-width: 768px) {
+  .root-nav {
+    & .root-nav-entry {
+      display: grid;
+      grid-template-columns: 0.70fr 1.30fr;
+
+      & .root-nav-link {
+        justify-self: start;
+        height: max-content;
+
+        &::before {
+          width: 0;
+          background: linear-gradient(to right,
+              hsla(var(--accent-400) / 0.5) var(--percent),
+              hsla(var(--accent-400) / 0) 100%);
+          animation: percentToZero 250ms ease-in-out forwards;
+          transition: width 0.25s ease-in-out;
+        }
+
+        &:hover::before {
+          animation: percentToFifty 250ms ease-in-out forwards;
+          width: 100%;
+        }
+      }
+
+      & .root-nav-desc {
+        padding-left: 1rem;
+
+        &::before {
+          content: "";
+          position: absolute;
+          inset: -1rem 0 0 0;
+          border-left: 1px solid hsla(var(--blue) 10 15 / 0.6);
+        }
+      }
+    }
+  }
+
   .typedocs-content {
     margin-inline: 1.272rem;
 

src/styles/docs/docs.css

@@ -2,7 +2,7 @@
 @import "./docs-types.css";
 
 .docslayout-root {
-  margin: 0.618rem;
+  margin-inline: 0.618rem;
   margin-top: 3.5rem;
 }
 
@@ -88,6 +88,7 @@ ul {
 
   .docslayout-root {
     margin-left: calc(1.618rem + 260px);
+    padding-bottom: 3rem;
   }
 
   .docs-content {

src/styles/docs/nav/nav.css

@@ -105,6 +105,7 @@
     width: 250px;
     position: fixed;
     top: 5rem;
+    bottom: 3rem;
     left: 1.618rem;
     flex-shrink: 0;
     overflow: scroll;

src/styles/docs/nav/search.css

@@ -213,10 +213,15 @@ button[data-open-modal] {
   gap: 0.5rem;
   border: 0;
   background-color: transparent;
-  color: hsl(0 0 65);
+  color: hsl(var(--blue) 40 65);
   cursor: pointer;
   height: 2.5rem;
   font-size: 1.10rem;
+
+  & svg {
+    width: 21px;
+    height: 21px;
+  }
 }
 
 button>kbd {
@@ -224,13 +229,13 @@ button>kbd {
   font-size: 0.75rem;
   gap: 0.25em;
   padding-inline: 0.375rem;
-  background-color: hsl(0 0 15);
+  background-color: hsla(var(--blue) 5 20 / 0.5);
 }
 
 dialog {
   margin: 0;
-  background-color: hsl(var(--blue) 15 12);
-  border: 1px solid hsl(0 0 25);
+  background-color: hsl(var(--blue) 10 15);
+  border: 1px solid hsl(var(--blue) 15 25);
   width: 100%;
   max-width: 100%;
   height: 100%;
@@ -272,8 +277,8 @@ button[data-close-modal] {
   --pagefind-ui-primary: hsla(var(--accent-400));
   --pagefind-ui-text: hsla(0 0 60);
   --pagefind-ui-font: Rubik;
-  --pagefind-ui-background: hsl(0 0 10);
-  --pagefind-ui-border: hsl(0 0 15);
+  --pagefind-ui-background: hsl(var(--blue) 10 15);
+  --pagefind-ui-border: hsl(var(--blue) 30 25);
   --pagefind-ui-border-width: 1px;
   --search-cancel-space: 5rem;
 }
@@ -297,12 +302,11 @@ button[data-close-modal] {
 
   /* --- */
   button[data-open-modal] {
-    border: 1px solid hsl(0 0 25);
     border-radius: 6px;
     padding-inline-start: 0.75rem;
     padding-inline-end: 0.5rem;
-    background-color: hsla(0 0 10 / 0.5);
-    color: hsl(0 0 50);
+    background-color: hsla(var(--blue) 15 15 / 0.5);
+    color: hsl(var(--blue) 40 65);
     font-size: 0.875rem;
     width: 100%;
     max-width: 15rem;
@@ -310,7 +314,7 @@ button[data-close-modal] {
 
     &:hover {
       border-color: hsl(0 0 50);
-      color: hsl(0 0 85);
+      color: hsl(var(--blue) 60 85);
     }
 
     &> :last-child {