HTML5 Validation & Cleanup

5 files changed, 93 insertions, 89 deletions

diff --git a/sass/_imports.scss b/sass/_imports.scss
index eee4a91..01c5e52 100644
--- a/sass/_imports.scss
+++ b/sass/_imports.scss
@@ -29,11 +29,11 @@
 @import "include/scroller"; // figure
 @import "include/button"; // button, a[role=button], type=button, type=submit ...
 @import "include/form"; // input, select, textarea, label, fieldset, legend (If you import this, you should also import button)
-@import "include/grid"; // section infinite grid -- test/rework this similar to hnav and milligram in that it should collapse to a single column as the page becomes narrow
 
 @import "include/search"; // Zola Search - elasticlunr site-wide search
 @import "include/toc"; // Zola TOC - Table of Content Menu (recent posts & index), sticky (floats top right)
 
 @import "include/icons"; // svg icons
 
+//@import "include/grid"; // section infinite grid -- test/rework this similar to hnav and milligram in that it should collapse to a single column as the page becomes narrow
 //@import "include/misc"; // template, [hidden], dialog, canvas
diff --git a/sass/_variables.scss b/sass/_variables.scss
index 0f65c61..e4de650 100644
--- a/sass/_variables.scss
+++ b/sass/_variables.scss
@@ -103,3 +103,75 @@ $icon-moon: false !default;// dark moon
 $icon-sun: false !default;// light sun
 $icon-x: true !default;// x symbol
 // add an icon link to an html template like this:  <a href="#"><span class="svg home"></span></a>
+
+:root {
+  // Spacings
+  --s1: .5rem;
+  --s2: 1rem;
+  --rc: .5rem; //radius corners
+
+  // Borders
+  --br: 0.25rem; //border radius
+  --bw: 0.0625rem; //border width
+  --ow: 0.1875rem; //outline width
+
+  --fs: 1rem; //font-size
+  --lh: 1.5; //line-height
+  --lhh: 1.2; //line-height headers
+  --fw: 400; //font-weight
+  --fh: 700; //font-weight h1-h6
+
+  // Responsive typography
+  @if $enable-responsive-typography {
+    @if map-get($breakpoints, "sm") {
+      @media (min-width: map-get($breakpoints, "sm")) {
+        --fs: 1rem;
+      }
+    }
+    @if map-get($breakpoints, "md") {
+      @media (min-width: map-get($breakpoints, "md")) {
+        --fs: 1.04rem;
+      }
+    }
+    @if map-get($breakpoints, "lg") {
+      @media (min-width: map-get($breakpoints, "lg")) {
+        --fs: 1.08rem;
+      }
+    }
+    @if map-get($breakpoints, "xl") {
+      @media (min-width: map-get($breakpoints, "xl")) {
+        --fs: 1.12rem;
+      }
+    }
+  }
+
+  // Responsives spacings
+  @if $enable-responsive-spacings {
+    // Sectionning
+    body > header,
+    body > main,
+    body > footer,
+    section {
+      @if map-get($breakpoints, "sm") {
+        @media (min-width: map-get($breakpoints, "sm")) {
+          --s1: .5rem;
+        }
+      }
+      @if map-get($breakpoints, "md") {
+        @media (min-width: map-get($breakpoints, "md")) {
+          --s1: .6rem;
+        }
+      }
+      @if map-get($breakpoints, "lg") {
+        @media (min-width: map-get($breakpoints, "lg")) {
+          --s1: .7rem;
+        }
+      }
+      @if map-get($breakpoints, "xl") {
+        @media (min-width: map-get($breakpoints, "xl")) {
+          --s1: .8rem;
+        }
+      }
+    }
+  }
+}
diff --git a/sass/include/_document.scss b/sass/include/_document.scss
index 31f43ac..a5f91db 100644
--- a/sass/include/_document.scss
+++ b/sass/include/_document.scss
@@ -1,44 +1,3 @@
-:root {
-  // Spacings
-  --s1: .5rem;
-  --s2: 1rem;
-  --rc: .5rem; //radius corners
-
-  // Borders
-  --br: 0.25rem; //border radius
-  --bw: 0.0625rem; //border width
-  --ow: 0.1875rem; //outline width
-
-  // Responsives spacings
-  @if $enable-responsive-spacings {
-    // Sectionning
-    body > header,
-    body > main,
-    body > footer,
-    section {
-      @if map-get($breakpoints, "sm") {
-        @media (min-width: map-get($breakpoints, "sm")) {
-          --s1: .5rem;
-        }
-      }
-      @if map-get($breakpoints, "md") {
-        @media (min-width: map-get($breakpoints, "md")) {
-          --s1: .6rem;
-        }
-      }
-      @if map-get($breakpoints, "lg") {
-        @media (min-width: map-get($breakpoints, "lg")) {
-          --s1: .7rem;
-        }
-      }
-      @if map-get($breakpoints, "xl") {
-        @media (min-width: map-get($breakpoints, "xl")) {
-          --s1: .8rem;
-        }
-      }
-    }
-  }
-}
 // Document: Content-box & Responsive typography
 
 // Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`
diff --git a/sass/include/_nav.scss b/sass/include/_nav.scss
index 7cbc0f7..f28d92f 100644
--- a/sass/include/_nav.scss
+++ b/sass/include/_nav.scss
@@ -27,17 +27,23 @@ main nav a:visited {//pagination link styling
 main nav a:hover {//makes border of pagination links hover color
   border-color: var(--a3);
 }
-header > nav > div:first-of-type {//puts logo on left and menu/search on right
-  margin-left: auto
+header > nav > div:first-of-type {//Keep the logo from wrapping
+  display: inline;
+  min-width: fit-content;
+  padding-right: var(--s1);//add some spacing between nav divs
+}
+header > nav > div:nth-child(2) {//puts logo on left and menu/search on right
+  margin-left: auto;
+  padding-right: var(--s1);//add some spacing between nav divs
 }
 nav > div {
-  ul {
+  ul, h2 {
     line-height: 2;
-    margin-top: 0;
-    padding-bottom: var(--s1);
+    margin: 0;
+    padding: 0;
   }
+  margin: var(--s1) 0;
   display: block;
-  margin-left: var(--s1);//add some spacing between nav divs
 }
 nav {
   align-items: center;
@@ -49,11 +55,9 @@ nav {
       color: var(--a3);
     }
   }
-  header {
-    display: inline;
-  }
-  header h1, div ul {
-    margin-bottom: 0
+  h1, h2, div ul {
+    margin-bottom: 0;
+    margin-top: 0.2rem;
   }
   ul li {
     display: inline-block;
@@ -68,11 +72,8 @@ nav {
     header nav {
       display: flex;
       flex-direction: column;
-      header h1 {
-        margin-top: var(--s2);
-      }
-      header {
-        text-align: center
+      h1 {
+        margin: var(--s2) 0 var(--s1);
       }
       div {
         margin: auto // keeps top menu/search centered in mobile view
diff --git a/sass/include/_typography.scss b/sass/include/_typography.scss
index b964426..97f1e3e 100644
--- a/sass/include/_typography.scss
+++ b/sass/include/_typography.scss
@@ -1,35 +1,7 @@
-:root {
-  --fs: 1rem; //font-size
-  --lh: 1.5; //line-height
-  --lhh: 1.2; //line-height headers
-  --fw: 400; //font-weight
-  --fh: 700; //font-weight h1-h6
-  // Responsive typography
-  @if $enable-responsive-typography {
-    @if map-get($breakpoints, "sm") {
-      @media (min-width: map-get($breakpoints, "sm")) {
-        --fs: 1rem;
-      }
-    }
-    @if map-get($breakpoints, "md") {
-      @media (min-width: map-get($breakpoints, "md")) {
-        --fs: 1.04rem;
-      }
-    }
-    @if map-get($breakpoints, "lg") {
-      @media (min-width: map-get($breakpoints, "lg")) {
-        --fs: 1.08rem;
-      }
-    }
-    @if map-get($breakpoints, "xl") {
-      @media (min-width: map-get($breakpoints, "xl")) {
-        --fs: 1.12rem;
-      }
-    }
-  }
-}
-
 // Typography
+.c {
+  text-align: center;// The <center> does not pass validation, use: <div class="c"></div>
+}
 h1,
 h2,
 h3,