Initial idea of a mobile-menu

css/index.css

@@ -19,6 +19,13 @@ body {
     margin-bottom: 1rem;
 }
 
+/* header menu hides on mobile screen, no padding needed anymore */
+@media screen and (max-width:40em) {
+    .header {
+        padding-bottom:0.7rem;
+    }
+}
+
 .header .headline {
     text-align:left;
     color: #ffe;
@@ -68,6 +75,37 @@ body {
     transition: all 0.35s ease-in-out;
 }
 
+.mobile-menu {
+    /* background-color:#f3f3f0; */
+    list-style: none;
+    margin: -0.5em -1em;
+}
+
+.mobile-menu li {
+    padding:0;
+}
+
+.mobile-menu li a {
+    display:block;
+    width:100%;
+    height:100%;
+    margin:0;
+    padding:0.3em;
+    padding-left: 1em;
+    font-size: 1.1em;
+    font-weight:bold;
+    text-transform:uppercase;
+}
+
+.mobile-menu li a.is-active {
+    background-color:#d6d6d4;
+}
+
+.mobile-menu li a:hover {
+    background-color: #ededea;
+    transition: all 0.35s ease-in-out;
+}
+
 .columns {
     padding:0 10px;
 }