Merge branch '16-without-js-narrow-screens-top-menu-bar-does-not-work' into 'master'

Resolve "Without JS+narrow screens, top menu bar does not work"

Closes #16

See merge request hifis/hifis.net!16

_includes/header.html

@@ -46,10 +46,8 @@ See also:
             The associated CSS will then display the navigation elements as a
             menu.
         {% endcomment %}
-        <button
-            class="js-mobile_nav-toggle nav_toggle"
-            onclick="this.classList.toggle('active')">
-        </button>
+        <input type="checkbox" id="mobile_toggle" class="d-none">
+        <label for="mobile_toggle" class="nav_toggle"></label>
 
         <nav>
             {% for entry in site.data.navigation.header %}

_sass/common/_header.scss

@@ -216,43 +216,49 @@
             }
         }
 
-        .nav_toggle.active {
-            &:before {
-                content:        "\f00d";
-                color:          $color-helmholtz-green;
-            }
-
-             & + nav {
-
-                display:            flex;
-                flex-direction:     column;
-                justify-content:    flex-end;
-                align-content:      center;
-
-                position:           absolute;
-                left:               $document-side-margin;
-                right:              $document-side-margin;
-                top:                0;
+        /*
+        This SCSS part is used to mimic the behavior, previously implemented
+        via Javascript, in pure CSS using a technique called "Checkbox Hack"
+        https://css-tricks.com/the-checkbox-hack/. This works by connecting
+        a <label> with <input type="checkbox"> and hiding the <label>.
+        Clicking on the label toggles the :checked state of this ID and allows
+        for applying different style.
+        */
+        #mobile_toggle:checked ~ .nav_toggle::before {
+            content:        "\f00d";
+            color:          $color-helmholtz-green;
+        }
 
-                font-size:          1rem;
-                color:              white;
-                background-color:   $color-helmholtz-green;
-                margin-left:        auto;
-                margin-right:       auto;
-                padding-top:        1.5rem; /* Determined by eyeballing */
-                padding-left:       0.5rem;
-                padding-right:      0.5rem;
-                padding-bottom:     0.5rem;
-                border-radius:      0.5em;
-                z-index:            -1; /* Go below the header */
-
-                @include respond-to-medium(
-                    margin-top,     $header-min-height
-                );
-
-                a {
-                    width:      auto; /* Allow parent flexbox to determine */
-               }
+        #mobile_toggle:checked ~ nav {
+
+            display:            flex;
+            flex-direction:     column;
+            justify-content:    flex-end;
+            align-content:      center;
+
+            position:           absolute;
+            left:               $document-side-margin;
+            right:              $document-side-margin;
+            top:                0;
+
+            font-size:          1rem;
+            color:              white;
+            background-color:   $color-helmholtz-green;
+            margin-left:        auto;
+            margin-right:       auto;
+            padding-top:        1.5rem; /* Determined by eyeballing */
+            padding-left:       0.5rem;
+            padding-right:      0.5rem;
+            padding-bottom:     0.5rem;
+            border-radius:      0.5em;
+            z-index:            -1; /* Go below the header */
+
+            @include respond-to-medium(
+                margin-top,     $header-min-height
+            );
+
+            a {
+                width:      auto; /* Allow parent flexbox to determine */
             }
         }