Improve nav bar responsiveness

1 files changed, 34 insertions, 2 deletions

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;
+    }
+  }
 }