fix responsive view (#4)

_includes/navigation.html

@@ -9,4 +9,9 @@
       </li>
     {% endfor %}
   </ul>
+  <button class="hamburger-icon">
+    <span></span>
+    <span></span>
+    <span></span>
+  </button>
 </nav>

_includes/scripts.html

@@ -20,4 +20,9 @@
     document.documentElement.scrollTop = 0;
   }
 
+  // toggle active class on the navigation when hamburger icon is clicked
+  document.querySelector('.hamburger-icon').addEventListener('click', function() {
+    document.querySelector('nav').classList.toggle('active');
+  });
+
 </script>

_sass/main.scss

@@ -7,7 +7,7 @@ body {
   margin: 0 auto $margin-std auto; // top right bottom left
 }
 
-head, nav, .content, footer {
+head, .content, footer {
   margin: 0 $margin-std 0 $margin-std;
 }
 

_sass/nav.scss

 // Navigation bar
 nav {
-  
+  width: $max-width - 2 * $margin-std;
+  margin: 0 $margin-std 0 $margin-std;
   position: fixed;
-  width: 100%;
   top: 0;
   background-color: White;
   z-index: 1;
@@ -18,6 +18,8 @@ nav {
   ul {
     list-style: none;
     overflow: hidden;
+    display: flex;
+    margin: 0;
   }
 
   li {
@@ -30,6 +32,21 @@ nav {
     font-weight: bold;
   }
 
+  button.hamburger-icon {
+    display: none;
+    cursor: pointer;
+    order: 2;
+
+    span {
+      display: block;
+      width: $padding-big;
+      height: 3px;
+      background-color: $color-strong;
+      margin: 5px auto;
+      transition: background-color 0.3s ease;
+    }
+  }
+
 }
 
 html { scroll-padding-top: $margin-small; }

_sass/responsive.scss

 // Responsive layout: changes the font size to vw when screen < resp-max-width
 @media screen and (max-width: $resp-max-width) {
-  * {
-    font-size: $resp-font-size;
-  }
-  
-  h1 {
-    font-size: $resp-big-font-size;
+  nav {
+    justify-content: space-between;
+    box-sizing: border-box;
+    width: 80%;
+    
+    ul {
+      display: none;
+      position: absolute;
+      top: 100%;
+      right: 0;
+      background-color: $color-transparent;
+      box-shadow: $padding-small $padding-small $color-transparent;
+      border-radius: $padding-std;
+      align-items: flex-end;
+      flex-direction: column;
+      padding: $padding-std;
+    }
+    
+    button.hamburger-icon {
+      display: block;
+    }
+    
+    &.active ul {
+      display: flex;
+    }
   }
 
-  body {
+  head, .content, footer {
     margin: 0 $resp-margin-std 0 $resp-margin-std;
   }
 
-  head, nav, .content, footer {
-    margin: 0;
-  }
-
   .content {
-    margin-top: $resp-margin-small;
-  }
-
-  .page-box, .member-box {
-    padding: $padding-std;
-    margin: $padding-std;
-  }
-
-  .page-box {
-    width: $resp-box-size;
-  }
-  
-  .status, .status * {
-    font-size: $resp-small-font-size;
+    margin-top: $margin-small;
   }
 
 }

_sass/variables.scss

 $max-width: 1100px;
-$resp-max-width: 768px;
+$resp-max-width: 910px;
 
 $font-size: 17px;
 $small-font-size: 14px;
 $big-font-size: 20px;
-$resp-font-size: 14px;
-$resp-small-font-size: 12px;
-$resp-big-font-size: 16px;
 
 $padding-std: 8px;
 $padding-small: calc($padding-std / 2.1);
@@ -17,12 +14,9 @@ $border-std: 1px;
 $margin-std: 90px;
 $margin-small: $margin-std * 0.7;
 $margin-big: 2 * $margin-std;
-$resp-margin-std: 80px;
-$resp-margin-small: $resp-margin-std * 0.7;
-$resp-margin-big: 2 * $resp-margin-std;
+$resp-margin-std: 10%;
 
 $box-size: calc($max-width / 3) - $margin-std;
-$resp-box-size: calc($resp-max-width / 3) - $resp-margin-std;
 
 $color-strong: hsl(221, 81%, 30%); //#0f368a
 $color-fade: hsl(221, 81%, 95%); //#e8eefd
@@ -33,4 +27,4 @@ $color-red: hsl(0, 53%, 80%); //#e7b1b1
 $color-orange: hsl(31, 53%, 90%); //#f3e6d8
 $color-blue: hsl(221, 81%, 90%); //#d1defa
 $color-grey: hsl(0, 0%, 90%); //#e6e6e6
-$opacity-std: 0.5;
+$color-transparent: rgba(231, 237, 241, 0.9); //=color-fade + transparency