Replace font-awesome menu icon with css

Part of #208

layouts/partials/nav-main.html

@@ -7,9 +7,13 @@
 
 <nav role="navigation" class="nav-main">
     <a href="{{.Site.BaseURL}}" class="logo"><img loading="lazy" src="/img/gdquest-logo.svg" alt="GDQuest logo" /></a>
-    <a href="javascript:void(0);" class="menu" onclick="navToggleMenu(this.parentNode)">
-        <i class="fa fa-bars"></i>
-    </a>
+    <div class="main-menu-icon menu" onclick="navToggleMenu(this.parentNode)">
+        <input type="checkbox" />
+        <div class="bun">
+            <div class="burger">
+            </div>
+        </div>
+    </div>
     <div class="links">
         {{ $currentNode := . }}
         {{ range .Site.Menus.main }}

resources/scss/components/main-menu-icon.scss

@@ -0,0 +1,81 @@
+$color: white;
+$size: 40px;
+
+@mixin pill() {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 12%;
+  background: $color;
+  transition: all 0.5s cubic-bezier(.18, .88, .42, 1.0);
+}
+
+.main-menu-icon {
+  display: block;
+  position: relative;
+  width: $size;
+  height: $size;
+
+  > .bun {
+    &:before {
+      @include pill();
+      top: 10%;
+      right: 0;
+    }
+
+    &:after {
+      @include pill();
+      bottom: 10%;
+      left: 0;
+    }
+
+    > .burger {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      height: $size;
+      width: $size;
+
+      &:before,
+      &:after {
+        @include pill();
+      }
+    }
+  }
+
+  input {
+    display: block;
+    position: absolute;
+    opacity: 0;
+    z-index: 1;
+    width: $size;
+    height: $size;
+    cursor: pointer;
+
+    &:hover ~ .bun {
+      &:before,
+      &:after,
+      :before,
+      :after {
+        background: darken($color, 5);
+      }
+    }
+
+    &:checked ~ .bun {
+      &:before,
+      &:after {
+        width: 0;
+      }
+
+      .burger {
+        &:before {
+          transform: rotate(135deg);
+        }
+        &:after {
+          transform: rotate(45deg);
+          box-shadow: 0 0 0 0 lighten($color, 35);
+        }
+      }
+    }
+  }
+}

resources/scss/gdquest.scss

@@ -15,6 +15,7 @@
 @import "components/header-home";
 @import "components/help-blocks";
 @import "components/keyboard-shortcuts";
+@import "components/main-menu-icon";
 @import "components/modal-popup";
 @import "components/nav-main";
 @import "components/nav-tutorial";