added documentation section and split html into partials

src/sass/css/style.scss

@@ -51,7 +51,7 @@ article {
 }
 
 .anchor {
-    height: 40px;
+    height: 0px;
 }
 
 
@@ -105,7 +105,7 @@ h1 {
 h2 {
     font-size: 2.6rem;
     line-height: 2.6rem;
-    margin-bottom: 100px;
+
 }
 
 h3 {
@@ -157,12 +157,14 @@ h4 {
     ------------------------------------------------------------------------ */
 
 .topbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
     text-align: left;
     background: $color__ternary;
-    padding-left: 20px;
 
     a {
-        padding: 20px;
+        padding-left: 20px;
     }
 }
 
@@ -255,7 +257,6 @@ h4 {
     max-width: 100%;
 }
 
-
 /* Gaps
     ------------------------------------------------------------------------ */
 
@@ -333,6 +334,12 @@ h4 {
             }
         }
     }
+
+    &--min {
+        img {
+            max-width: 48px;
+        }
+    }
 }
 
 /* Header
@@ -518,6 +525,22 @@ svg {
     background-color: #185833;
 }
 
+/* Docnav
+    ------------------------------------------------------------------------ */
+
+.docnav {
+    background: rgb(5 100 115/var(--tw-bg-opacity, 1));
+
+    @media screen and (min-width: 1080px) and (max-resolution: 1x) {
+        min-height: 100vh;
+    }
+}
+
+.doc ul {
+    margin-top: 0;
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
 
 /* Responsive 1080px
     ------------------------------------------------------------------------ */
@@ -537,6 +560,13 @@ svg {
         align-items: normal;
     }
 
+    .col--1-4 {
+        display: grid;
+        gap: 40px;
+        grid-template-columns: 1fr 4fr;
+        align-items: normal;
+    }
+
     .col--1-1-1 {
         display: grid;
         gap: 40px;