a real header/navbar on non-home pages, finally

assets/sass/abstracts/_variables.scss

@@ -3,6 +3,7 @@
 // Global Colors
 $color-background:   #ffffff;
 $color-text:         #222222;
+$color-medium:       #444444;
 $color-light:        #666666;
 $color-medium-light: #757575;
 $color-super-light:  #dddddd;

assets/sass/pages/_home.scss

@@ -88,6 +88,10 @@ body#home {
         text-align: left;
         font-size: 0.9em;
         line-height: 1.8;
+
+        span {
+          margin-right: 4px;
+        }
       }
 
       &#panda {

assets/sass/pages/_notes.scss

@@ -5,43 +5,78 @@ body#notes {
   line-height: 1.5;
   font-weight: 400;
   max-width: 1010px;
-  padding: 35px 50px;
+  padding: 10px 50px 35px 50px;
 
   header {
-    margin-bottom: 1.75em;
+    border-bottom: 1px solid $color-super-light;
+    margin-bottom: 25px;
 
-    a {
+    nav {
-      &#more {
+      width: 100%;
-        font-size: 1.25em;
+      padding: 10px;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      a#logo {
+        display: flex;
+        align-items: center;
+        color: $color-medium;
+
+        img, svg {
+          height: 45px;
+          width: auto;
         }
 
-      &#logo {
+        span#name {
-        img,
+          margin: 0 20px;
-        svg {
+          font-size: 1.4em;
-          height: 150px;
+          font-weight: 500;
-          width: 100px;
-          margin: 1.5em auto;
-          display: block;
         }
         
         &:hover {
+          color: $color-links;
+
           $logo-original1: #6fbc4e;
           $logo-original2: #ffb900;
           $logo-original3: #009cdf;
 
           svg {
-            g#area1 {
+            g#color1 {
               fill: $logo-original2;
             }
-            g#area2 {
+            g#color2 {
               fill: $logo-original3;
             }
-            g#area3 {
+            g#color3 {
               fill: $logo-original1;
             }
           }
         }
       }
+
+      ul {
+        list-style: none;
+        display: flex;
+        align-items: center;
+        font-size: 1.5em;
+        line-height: 1;
+
+        li {
+          width: 60px;
+          text-align: right;
+
+          a {
+            display: inline-block;
+            transition: transform 0.15s ease-in-out;
+
+            &:hover {
+              transform: scale(1.4);
+            }
+          }
+        }
+      }
     }
   }
 
@@ -104,8 +139,7 @@ body#notes {
         text-align: center;
 
         h1 {
-          margin-top: 0;
+          margin: 0.3em 0;
-          margin-bottom: 0.3em;
           font-size: 2em;
           line-height: 1.4;
 

assets/sass/pages/responsive/_notes.scss

@@ -2,17 +2,25 @@
 
 // Responsive Blog
 body#notes {
-  padding: 20px;
+  padding: 10px 20px 30px 20px;
   width: 100%;
   max-width: 100%;
 
   header {
-    margin-bottom: 1.3em;
 
+    nav {
       a#logo {
-      img,
+        img, svg {
-      svg {
+          height: 55px;
-        height: 75px;
+          width: auto;
+        }
+
+        span#name {
+          display: none;
+        }
+      }
+
+      ul li {
         width: 50px;
       }
     }

layouts/index.html

@@ -21,7 +21,7 @@
       <p>You can find some of my work on <a href="https://github.com/jakejarvis" title="Jake Jarvis on GitHub" id="github" target="_blank" rel="me noopener noreferrer">GitHub</a> or <a href="https://www.linkedin.com/in/jakejarvis/" title="Jake Jarvis on LinkedIn" id="linkedin" target="_blank" rel="me noopener noreferrer">LinkedIn</a>, my adventures on <a href="https://twitter.com/jakejarvis" title="Jake Jarvis on Twitter" id="twitter" target="_blank" rel="me noopener noreferrer">Twitter</a>, <a href="https://www.facebook.com/jakejarvis" title="Jake Jarvis on Facebook" id="facebook" target="_blank" rel="me noopener noreferrer">Facebook</a>, <a href="https://www.instagram.com/jakejarvis/" title="Jake Jarvis on Instagram" id="instagram" target="_blank" rel="me noopener noreferrer">Instagram</a>, or <a href="https://mastodon.social/@jakejarvis" title="Jake Jarvis on Mastodon" id="mastodon" target="_blank" rel="me noopener noreferrer">Mastodon</a>, and my standard <a href="{{ "resume.pdf" | absURL }}" title="View PDF Resume" id="resume" target="_blank" rel="noopener">PDF resume here</a>.</p>
       <p>If any of this fits with what you're looking for, I'd love to hear from you via <a itemprop="email" class="u-email" href="&#x6D;&#x61;&#x69;&#x6C;&#x74;&#x6F;&#x3A;&#x6A;&#x61;&#x6B;&#x65;&#x40;&#x6A;&#x61;&#x72;&#x76;&#x2E;&#x69;&#x73;" title="Send Email" id="email">email</a><sup>&nbsp;<a class="no-underline" href="https://keybase.io/jakejarvis/pgp_keys.asc?fingerprint=87fb4b6006dd1beb3ed47fabd36cb66f4002b25b" title="Jake Jarvis&#39;s Public Key on Keybase" id="pgp" target="_blank" rel="noopener noreferrer nofollow">D36C B66F 4002 B25B</a></sup>, <a href="https://twitter.com/messages/compose?recipient_id=229769022" title="Send Direct Message on Twitter" id="dm" target="_blank" rel="noopener noreferrer nofollow">DM</a>, or <a href="sms:+1-617-917-3737" title="Send SMS: +1 (617) 917-3737" id="sms">text</a>!</p>
       <footer>
-        <div id="blog"><a href="{{ "notes/" | absURL }}" title="Jake Jarvis&#39;s Blog" rel="me">Read more at my blog...</a></div>
+        <div id="blog"><a href="{{ "notes/" | absURL }}" title="Jake Jarvis&#39;s Blog" rel="me"><span>&#x1F4DD;</span> Read more at my blog...</a></div>
         <div id="panda"><a class="no-underline" href="https://nationalzoo.si.edu/webcams/panda-cam" title="Live Panda Party!!!11" target="_blank" rel="noopener noreferrer nofollow"><span>&#x1F43C;</span></a></div>
         <div id="info"><span id="copyright"><a class="no-underline" href="https://web.archive.org/web/20010501000000*/jakejarvis.com" title="View Old Versions on Wayback Machine" id="wayback" target="_blank" rel="noopener noreferrer nofollow">&copy; 2001 &ndash;</a> {{ now.Format "2006" }} <a class="no-underline" href="{{ .Site.BaseURL }}" title="Jake Jarvis">Jake Jarvis</a>.</span> <a class="no-underline" href="https://github.com/jakejarvis/jarv.is" title="View Source on GitHub" id="source" target="_blank" rel="noopener noreferrer">View source.</a></div>
       </footer>

layouts/partials/blog-header.html

@@ -1,21 +1,28 @@
     <header>
-      {{ if eq .Kind "page" }}<a href="{{ "notes/" | absURL }}" id="more" title="More Posts">&laquo; More Posts</a>{{ else }}<a href="{{ .Site.BaseURL }}" id="more" title="Return Home">&laquo; Return Home</a>{{ end }}
+      <nav>
         <a class="no-underline" href="{{ .Site.BaseURL }}" id="logo" title="Jake Jarvis">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 144.1">
-          <title>Jake Jarvis</title>
+            <g id="color1" fill="#6fbc4e">
-          <g id="area1" fill="#6fbc4e">
               <polygon points="57.6 0 38.4 11.1 38.4 11.1 76.8 33.2 96 22.1 96 22.1 57.6 0 57.6 0"/>
               <polygon points="19.2 66.5 0 77.6 0 77.6 19.2 88.7 38.4 77.6 38.4 77.6 19.2 66.5 19.2 66.5"/>
               <polygon points="57.6 88.7 19.2 110.9 19.2 110.9 38.4 121.9 76.8 99.8 76.8 99.8 57.6 88.7 57.6 88.7"/>
             </g>
-          <g id="area2" fill="#ffb900">
+            <g id="color2" fill="#ffb900">
               <polygon points="38.4 11.1 38.4 33.3 57.6 44.3 57.6 88.7 76.8 99.8 76.8 33.2 38.4 11.1 38.4 11.1"/>
               <polygon points="19.2 110.9 19.2 110.8 19.2 88.7 0 77.6 0 121.9 38.4 144.1 38.4 121.9 19.2 110.9 19.2 110.9"/>
             </g>
-          <g id="area3" fill="#009cdf">
+            <g id="color3" fill="#009cdf">
               <polygon points="76.8 33.2 76.8 99.8 76.8 99.8 38.4 121.9 38.4 144.1 96 110.9 96 22.1 76.8 33.2 76.8 33.2"/>
               <polygon points="19.2 110.9 38.4 99.8 38.4 77.6 19.2 88.7 19.2 110.9 19.2 110.9"/>
             </g>
           </svg>
+          <span id="name">Jake Jarvis</span>
         </a>
+        <ul>
+          <li><a class="no-underline" href="{{ .Site.BaseURL }}" title="Home">&#x1F3E0;</a></li>
+          <li><a class="no-underline" href="{{ "notes/" | absURL }}" title="Notes">&#x1F4DD;</a></li>
+          <li><a class="no-underline" href="https://github.com/jakejarvis" title="GitHub" target="_blank" rel="me noopener noreferrer">&#x1F468;&#x200D;&#x1F4BB;</a></li>
+          <li><a class="no-underline" href="&#x6D;&#x61;&#x69;&#x6C;&#x74;&#x6F;&#x3A;&#x6A;&#x61;&#x6B;&#x65;&#x40;&#x6A;&#x61;&#x72;&#x76;&#x2E;&#x69;&#x73;" title="Email Me">&#x1F48C;</a></li>
+        </ul>
+      </nav>
     </header>