Layout mobile navbar nicely with Flexbox (#1497)

Before hamburger menu was floated to the right with a fixed margin-top,
which means that it probably wasn't perfectly centered and if we would
change logo image size, we would have to edit that margin manually.

_includes/nav.html

@@ -1,14 +1,14 @@
-<div class="fixed-top bg-dark">
+<nav class="fixed-top bg-dark">
-  <nav id="navbar">
+  <div id="navbar" class="d-flex flex-wrap justify-content-between align-items-center">
-
+    <div class="w-50">
+      <a id="nav-home-mobile" class="nav-anchor" href="/index.html">
+        <img src="/assets/img/layout/logo_smaller.png" width="150px" />
+      </a>
+    </div>
     <input type="checkbox" id="nav-toggle" checked />
     <label for="nav-toggle" id="nav-toggle-label" class="fas fa-bars fa-lg"></label>
-    <a id="nav-home-mobile" class="nav-anchor" href="/index.html">
-      <img src="/assets/img/layout/logo_smaller.png" width="148px" height="22px" />
-    </a>
-
-    <div class="menu">
 
+    <div class="menu w-100">
       <div id="nav-left" class="position-relative flex-col">
         <a class="nav-anchor" href="/index.html">
           <span id="nav-home" class="fas fa-home fa-fw"></span>
@@ -142,5 +142,5 @@
 
       </div>
     </div>
-  </nav>
+  </div>
-</div>
+</nav>

assets/css/style.scss

@@ -340,8 +340,7 @@ input#nav-toggle,
   input#nav-toggle + label {
     display: block;
     cursor: pointer;
-    margin-top: 0.25rem;
+    margin-bottom: 0;
-    float: right;
   }
   .nav-dropdown {
     display: block;