switch floats to flexboxes, header fixes

assets/sass/pages/_home.scss

@@ -76,10 +76,10 @@ body#home {
   }
 
   footer {
-    height: 1.7em;
+    display: flex;
+    justify-content: space-between;
 
     div {
-      float: left;
       vertical-align: middle;
       height: 100%;
 
@@ -87,7 +87,7 @@ body#home {
         width: 40%;
         text-align: left;
         font-size: 0.9em;
-        line-height: 1.8;
+        line-height: 2;
 
         span {
           margin-right: 4px;
@@ -98,7 +98,7 @@ body#home {
         width: 20%;
         text-align: center;
         font-size: 1.25em;
-        line-height: 1.5;
+        line-height: 1.4;  // magic numbers don't judge
 
         a {
           display: inline-block;
@@ -114,7 +114,7 @@ body#home {
         width: 40%;
         text-align: right;
         font-size: 0.55em;
-        line-height: 3.2;
+        line-height: 3.35;  // magic numbers don't judge
         color: $color-light;
 
         a {

assets/sass/pages/_notes.scss

@@ -13,7 +13,7 @@ body#notes {
 
     nav {
       width: 100%;
-      padding: 6px 12px;
+      padding: 8px 0;
       box-sizing: border-box;
       display: flex;
       align-items: center;
@@ -23,6 +23,7 @@ body#notes {
         display: flex;
         align-items: center;
         color: $color-medium;
+        padding: 15px;
 
         img, svg {
           height: 45px;
@@ -30,7 +31,7 @@ body#notes {
         }
 
         span#name {
-          margin: 0 20px;
+          margin-left: 20px;
           font-size: 1.4em;
           font-weight: 500;
         }
@@ -63,6 +64,7 @@ body#notes {
         font-size: 1.5em;
         line-height: 1;
         padding: 0;
+        margin-right: 15px;
 
         li {
           width: 60px;
@@ -83,19 +85,18 @@ body#notes {
 
   footer {
     border-top: 1px solid $color-super-light;
-    height: 1.7em;
     line-height: 1.7;
     padding-top: 1.5em;
     margin-top: 2em;
     color: $color-light;
+    display: flex;
+    justify-content: space-between;
 
     a {
       color: inherit;
     }
 
     div {
-      float: left;
-      vertical-align: middle;
 
       &#copyright,
       &#poweredby {
@@ -273,6 +274,8 @@ body#notes {
     }
 
     &#archive section.year {
+      font-size: 1.1em;
+
       ul {
         list-style-type: none;
         padding-left: 0;
@@ -280,6 +283,14 @@ body#notes {
       }
 
       li {
+        display: flex;
+
+        div.date {
+          color: $color-light;
+          width: 5.25em;
+          flex-shrink: 0;
+        }
+      
         &::after {
           content: '';
           display: block;
@@ -299,20 +310,6 @@ body#notes {
         font-size: 1.8em;
       }
 
-      div {
-        font-size: 1.1em;
-
-        &.date {
-          float: left;
-          width: 5.25em;
-          color: $color-light;
-        }
-
-        &.title {
-          float: left;
-          width: calc(100% - 5.25em);
-        }
-      }
     }
   }
 }

assets/sass/pages/responsive/_global.scss

@@ -5,7 +5,7 @@
   body {
     // Safari iOS menu bar reappers below 44px:
     // https://www.eventbrite.com/engineering/mobile-safari-why/
-    padding-bottom: 50px !important;
+    padding-bottom: 45px !important;
     // Allows content to fill the viewport and go beyond the bottom
     height: 100%;
     // Allows you to scroll below the viewport; default value is visible

assets/sass/pages/responsive/_home.scss

@@ -16,8 +16,6 @@ body#home {
   }
 
   footer div {
-    line-height: 1.7;
-
     &#panda {
       display: none;
     }
@@ -34,7 +32,7 @@ body#home {
 
     &#info {
       font-size: 0.7em;
-      line-height: 2;
+      line-height: 2.1;  // magic numbers don't judge
 
       span#copyright::after {
         content: "\A";

assets/sass/pages/responsive/_notes.scss

@@ -2,16 +2,19 @@
 
 // Responsive Blog
 body#notes {
-  padding: 10px 20px 30px 20px;
+  padding: 0 20px;
   width: 100%;
   max-width: 100%;
 
   header {
-
     nav {
+      padding: 5px 0;
+
       a#logo {
+        padding: 10px;
+
         img, svg {
-          height: 55px;
+          height: 60px;
           width: auto;
         }
 
@@ -20,8 +23,18 @@ body#notes {
         }
       }
 
-      ul li {
+      ul {
-        width: 50px;
+        font-size: 1.75em;
+        margin-right: 10px;
+
+        li {
+          width: 55px;
+
+          // hide home emoji on mobile -- logo probably suffices?
+          // &:first-child {
+          //   display: none;
+          // }
+        }
       }
     }
   }
@@ -45,7 +58,7 @@ body#notes {
     }
   }
 
-  main#archive section.year div {
+  main#archive section.year {
     font-size: 1em;
   }
 

content/_index.md

@@ -1,6 +1,6 @@
 +++
-title = "Jake Jarvis – Web Developer in Boston, MA"
+title = "Jake Jarvis – Front-End Web Developer in Boston, MA"
 description = "Hello! I'm a frontend web developer based in Boston, Massachusetts specializing in modern JavaScript frameworks and progressive web apps."
 type = "home"
-date = "2019-10-01"
+date = "2019-10-18"
 +++