Improve nav bar responsiveness

4 files changed, 45 insertions, 10 deletions

diff --git a/_includes/header.html b/_includes/header.html
index 092bc3f..8ab0b24 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -7,10 +7,13 @@
   </div>
   <div class="title">
     <div class="name">Noah Loomans</div>
-    <div class="menu">const menu = [
-      <a href="/">'Home'</a>,&nbsp;
-      <a href="/projects/">'Projects'</a>,&nbsp;
-      <a href="/badges/">'Badges'</a>
-    ]</div>
+    <div class="menu">
+      <ul>
+        <li>const menu = [</li>
+        <li><a href="/">'Home'</a>,</li>
+        <li><a href="/projects/">'Projects'</a>,</li>
+        <li><a href="/badges/">'Badges'</a></li>
+        <li>]</li>
+      </ul></div>
   </div>
 </header>
diff --git a/style/_header.scss b/style/_header.scss
index 28e8100..6593f2a 100644
--- a/style/_header.scss
+++ b/style/_header.scss
@@ -35,14 +35,46 @@ header {
 
   .title {
     padding-left: $logo-width + $page-padding-between;
-    height: $logo-width;
+    padding-top: ($logo-width - 45px) / 2;;
+    padding-bottom: ($logo-width - 45px) / 2;
     display: flex;
     flex-direction: column;
-    justify-content: center;
 
     .name {
       font-weight: bold;
       font-size: 1.5em;
     }
   }
+
+  .menu {
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    li {
+      display: inline;
+      padding-left: 0px;
+
+      &:first-of-type, &:last-of-type {
+        padding-left: 0;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 900px) {
+  header {
+    .menu {
+      li {
+        display: list-item;
+        padding-left: 20px;
+      }
+    }
+    .title {
+      padding-top: 16px;
+      padding-bottom: 16px;
+    }
+  }
 }
diff --git a/style/_responsive.scss b/style/_responsive.scss
index bf35644..427a0fe 100644
--- a/style/_responsive.scss
+++ b/style/_responsive.scss
@@ -9,12 +9,11 @@
 
   header {
     .logo {
-      width: 100px;
-      height: 100px;
+      width: $logo-width-small;
+      height: $logo-width-small;
     }
 
     .title {
-      height: 100px;
       padding-left: 140px;
     }
 
diff --git a/style/main.scss b/style/main.scss
index bc913c5..d808a24 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -3,6 +3,7 @@
 
 $page-width: 840px;
 $logo-width: 150px;
+$logo-width-small: 100px;
 $page-padding-between: 40px;
 
 @import 'normalize';