Merge pull request #211 from sophie-h/sophie-h/mobile-menu

Make mobile menu navi a bit nicer

Author: GuillaumeGomez

_includes/header.html

@@ -3,19 +3,11 @@
 
   <div class="wrapper">
     <nav class="site-nav">
-      <a href="#" class="menu-icon">
-        <svg viewBox="0 0 18 15">
-          <path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
-          <path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
-          <path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
-        </svg>
-      </a>
-
-      <div class="trigger">
-        <a class="page-link" href="/blog">Blog</a>
-        <a class="page-link" href="/faq">FAQ</a>
-        <a class="page-link" href="/contact">Contact</a>
-      </div>
+      <ul>
+        <li><a href="/blog">Blog</a></li>
+        <li><a href="/faq">FAQ</a></li>
+        <li><a href="/contact">Contact</a></li>
+      </ul>
     </nav>
 
     <a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>

_sass/_base.scss

@@ -40,7 +40,7 @@ h1, h2, h3, h4, h5, h6,
 p, blockquote, pre,
 ul, ol, dl, figure,
 %vertical-rhythm {
-    margin-bottom: $spacing-unit / 2;
+    margin-bottom: var(--spacing-unit-half);
 }
 
 
@@ -72,7 +72,7 @@ figcaption {
  * Lists
  */
 ul, ol {
-    margin-left: $spacing-unit;
+    margin-left: var(--spacing-unit);
 }
 
 li {
@@ -166,7 +166,7 @@ td.docs {
 blockquote {
     color: $grey-color;
     border-left: 4px solid $grey-color-light;
-    padding-left: $spacing-unit / 2;
+    padding-left: var(--spacing-unit-half);
     font-size: 18px;
     letter-spacing: -1px;
     font-style: italic;
@@ -212,13 +212,9 @@ code {
  * Wrapper
  */
 .wrapper {
-    padding-left: calc(50vw - 400px);
-    padding-right: calc(50vw - 400px);
-
-    @include media-query($on-laptop) {
-        padding-right: $spacing-unit / 2;
-        padding-left: $spacing-unit / 2;
-    }
+    --padding: calc(50vw - (var(--content-width) / 2) + var(--spacing-unit-half));
+    padding-left: max(var(--padding), var(--spacing-unit-half));
+    padding-right: max(var(--padding), var(--spacing-unit-half));
 }
 
 section {

_sass/_layout.scss

@@ -49,71 +49,41 @@
 .site-nav {
     float: right;
 
-    .trigger {
+    ul {
         display: flex;
         justify-content: flex-end;
-        margin-right: 1.5rem;
-    }
-
-    .menu-icon {
-        display: none;
-    }
-
-    .page-link {
-        color: $header-text-color;
-        line-height: 3em;
-        margin: 0 1rem;
-        font-weight: bold;
-        transition: 0.3s;
-        transition-property: color;
-        border-radius: 7px;
-    }
-
-    .page-link:hover {
-        color: white;
-    }
+        flex-wrap: wrap;
 
-    @include media-query($on-laptop) {
-        position: absolute;
-        top: 1.5em;
-        right: 1.5em;
-        border: 1px solid white;
-        border-radius: 5px;
-        background: $box-background;
+        margin: 0;
+        margin-right: 1.5rem;
 
-        .page-link {
-            float: none;
-            display: block;
-            padding: 0 1.5em;
-        }
+        li {
+            list-style: none;
+            display: inline-block;
 
-        .menu-icon {
-            display: block;
-            float: right;
-            width: 36px;
-            height: 26px;
-            line-height: 0;
-            padding-top: 10px;
-            text-align: center;
-
-            > svg {
-                width: 18px;
-                height: 15px;
-
-                path {
-                    fill: white;
+            a {
+                color: $header-text-color;
+                line-height: 3em;
+                margin: 0 1rem;
+                font-weight: bold;
+                transition: 0.3s;
+                transition-property: color;
+                border-radius: 7px;
+
+                &:hover {
+                    color: white;
                 }
             }
         }
+    }
 
-        .trigger {
-            clear: both;
-            display: none;
-        }
+    @include media-query($on-mobile) {
+        float: none;
+        margin-bottom: -1rem;
 
-        &:hover .trigger {
-            display: block;
-            padding-bottom: 5px;
+        ul {
+            justify-content: center;
+            margin-right: 0;
         }
     }
 }
@@ -219,7 +189,7 @@ section.special {
     list-style: none;
 
     > li {
-        margin-bottom: $spacing-unit;
+        margin-bottom: var(--spacing-unit);
     }
 }
 
@@ -271,17 +241,13 @@ section.special {
  * Posts
  */
 .post-header {
-    margin-bottom: $spacing-unit;
+    margin-bottom: var(--spacing-unit);
 }
 
 .post-title {
     font-size: 42px;
     letter-spacing: -1px;
     line-height: 1;
-
-    @include media-query($on-laptop) {
-        font-size: 36px;
-    }
 }
 
 /**

_sass/_variables.scss

@@ -7,18 +7,13 @@ $base-line-height:   1.3;
 $headings-font-family:  Cantarell, Helvetica, Arial, sans-serif;
 $headings-color:        #3d3846;
 
-$spacing-unit:       25px;
-
 $text-color:         #3d3846;
 $background-color:   #f6f5f4;
 $brand-color:        #813d9c;
 
 $grey-color:         #828282;
 $grey-color-light:   lighten($grey-color, 40%);
 
-$on-palm:            675px;
-$on-laptop:          820px;
-
 $header-borders:     6px;
 $header-line-height: 56px;
 $content-padding:    10px;
@@ -29,11 +24,19 @@ $header-text-color: #dc8add;
 
 $box-background:    linear-gradient(150deg, #241f31, #3d3846);
 
+$on-mobile: 600px;
+
+body {
+    --content-width: 800px;
+    --spacing-unit: 26px;
+    --spacing-unit-half: calc(var(--spacing-unit) / 2);
+}
+
 // Using media queries with like this:
 // @include media-query($palm) {
 //     .wrapper {
-//         padding-right: $spacing-unit / 2;
-//         padding-left: $spacing-unit / 2;
+//         padding-right: var(--spacing-unit-half);
+//         padding-left: var(--spacing-unit-half);
 //     }
 // }
 @mixin media-query($device) {