Many things

assets/css/components/global.css

@@ -38,6 +38,7 @@ li,
 dl,
 dd,
 pre,
+table,
 video,
 figure,
 figcaption,
@@ -58,8 +59,8 @@ img {
 
 input,
 button,
-textarea,
-select {
+select,
+textarea, {
     font: inherit;
 }
 
@@ -140,7 +141,7 @@ h1 {
 }
 
 h2 {
-    margin: 1.5em 0 0.5em 0;
+    margin: 0 0 0.5em 0;
     font-size: 4rem;
 }
 @media (max-width: 500px) {
@@ -150,7 +151,7 @@ h2 {
 }
 
 h3 {
-    margin: 1.5em 0 1em 0;
+    margin: 0 0 1em 0;
     font-size: 3.2rem;
 }
 @media (max-width: 500px) {
@@ -160,17 +161,17 @@ h3 {
 }
 
 h4 {
-    margin: 1.5em 0 1em 0;
+    margin: 0 0 1em 0;
     font-size: 2.6rem;
 }
 
 h5 {
-    margin: 1.5em 0 1em 0;
+    margin: 0 0 1em 0;
     font-size: 2.4rem;
 }
 
 h6 {
-    margin: 1.5em 0 1em 0;
+    margin: 0 0 1em 0;
     font-size: 2.2rem;
 }
 

assets/css/screen.css

@@ -120,7 +120,56 @@ production stylesheet in assets/built/screen.css using: gulp dev
     padding: 5px 0;
 }
 
-/* Footer */
+
+/* Menu
+/* ---------------------------------------------------------- */
+
+.burger {
+    position: relative;
+    display: inline-block;
+    cursor: pointer;
+}
+
+.burger-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 33px;
+    height: 33px;
+}
+
+.burger-inner {
+    width: 100%;
+    height: 100%;
+}
+
+.burger-inner::before,
+.burger-inner::after {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    margin: auto;
+    content: '';
+    width: 100%;
+    height: 1px;
+    background: #fff;
+    transition: transform 250ms cubic-bezier(.2,.6,.3,1), width 250ms cubic-bezier(.2,.6,.3,1);
+    will-change: transform, width;
+}
+
+.burger-inner::before {
+    transform: translatey(-5px);
+}
+.burger-inner::after {
+    transform: translatey(5px);
+}
+
+
+/* Footer
+/* ---------------------------------------------------------- */
 .gh-foot {
     display: flex;
     align-items: center;

default.hbs

@@ -26,6 +26,11 @@
                     {{@site.title}}
                 {{/if}}
             </a>
+            <a class="burger" role="button">
+                <div class="burger-box">
+                    <div class="burger-inner"></div>
+                </div>
+            </a>
         </div>
         <div class="gh-head-menu">
             {{navigation}}