fix responsive layout and align nav bar

_includes/navigation.html

 <nav>
-  <img src='{{ "/assets/images/leaps-logo.png" | relative_url }}' alt="LEAPS logo" style="float:left; width:5%">
+  <img src='{{ "/assets/images/leaps-logo.png" | relative_url }}' alt="LEAPS logo">
   <ul>
     {% for item in site.data.navigation %}
-      {% if item.subnav %}
-      <li class="dropdown">
+      <li>
         <a href="{{ item.link | relative_url }}" {% if page.url == item.link %} class="focus" {% endif %}>
-        {{ item.name }}
+          {{ item.name }}
         </a>
-        <div class="dropdown-content">
-          {% for subitem in item.subnav %}
-            <a href="{{ subitem.link | relative_url }}" {% if page.url == subitem.link %} class="focus" {% endif %}>
-              {{ subitem.name }}
-            </a>
-          {% endfor %}
-        </div>
       </li>
-      {% else %}
-      <li><a href="{{ item.link | relative_url }}" {% if page.url == item.link %} class="focus" {% endif %}>
-        {{ item.name }}
-      </a></li>
-      {% endif %}
     {% endfor %}
   </ul>
 </nav>

_sass/main.scss

@@ -88,7 +88,7 @@ img[style~="float:right"] {
 }
 
 a img { //DOIs
-  width: 10vw;
+  width: $margin-big;
 }
 
 // boxes

_sass/nav.scss

 // Navigation bar
 nav {
-
+  
   position: fixed;
   width: 100%;
   top: 0;
   background-color: White;
   z-index: 1;
+  display: flex;
+  align-items: center;
+  padding: $padding-std;
 
   img {
-    margin: $padding-big
+    width: $margin-std;
   }
   
   ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
+    list-style: none;
     overflow: hidden;
   }
 
   li {
     float: left;
+    margin: 0 $padding-std;
   }
 
   li a {
-    display: inline-block;
     text-decoration: none;
-    padding: $padding-big;
     font-weight: bold;
   }
 
-  .dropdown-content {
-    display:none;
-    position: absolute;
-    background-color: White;
-    box-shadow: 0 $padding-std $padding-big 0 $color-fade;
-    z-index: 1; //to bring it to the front
-    min-width: $margin-big;
-    a {
-      padding: $padding-std $padding-big;
-      display: block;
-      font-weight: normal;
-    }
-  }
-
-  .dropdown:hover .dropdown-content {
-    display: block;
-  }
-
-  .dropdown-content a:hover {
-    background-color: $color-fade;
-  }
 }
 
-html { scroll-padding-top: $margin-std; }
+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: $max-width) {
+@media screen and (max-width: $resp-max-width) {
   * {
     font-size: $resp-font-size;
   }
@@ -20,13 +20,10 @@
     margin-top: $resp-margin-small;
   }
 
-  div.box {
-    width: $resp-margin-big;
-    line-height: $resp-margin-big;
-  }
-
-  .overflow-area {
-    height: $resp-page-height;
+  .page-box, .member-box {
+    width: $resp-box-size;
+    padding: $padding-std;
+    margin: $padding-std;
   }
 
   .status, .status * {

_sass/variables.scss

 $max-width: 1100px;
+$resp-max-width: 768px;
 $page-height: 700px;
-$resp-page-height: 70vw;
 
 $font-size: 17px;
 $small-font-size: 14px;
 $big-font-size: 20px;
-$resp-font-size: 1.5vw;
-$resp-small-font-size: 1.2vw;
-$resp-big-font-size: 1.8vw;
+$resp-font-size: 14px;
+$resp-small-font-size: 12px;
+$resp-big-font-size: 16px;
 
 $padding-std: 8px;
 $padding-small: $padding-std / 2.1;
@@ -18,11 +18,12 @@ $border-std: 1px;
 $margin-std: 90px;
 $margin-small: $margin-std * 0.7;
 $margin-big: 2 * $margin-std;
-$resp-margin-std: 8vw;
+$resp-margin-std: 80px;
 $resp-margin-small: $resp-margin-std * 0.7;
 $resp-margin-big: 2 * $resp-margin-std;
 
-$box-size: $max-width / 3 - $margin-std ;
+$box-size: $max-width / 3 - $margin-std;
+$resp-box-size: $resp-max-width / 3 - $resp-margin-std;
 
 $color-strong: hsl(221, 81%, 30%);
 $color-fade: hsl(221, 81%, 95%);