From 5cdc60b006e2626c5e55a73bd812db18d6d674cc Mon Sep 17 00:00:00 2001
From: Valentin Gehrke <madmaurice@zom.bi>
Date: Tue, 25 Oct 2016 19:27:17 +0000
Subject: [PATCH] Initial idea of a mobile-menu

---
 css/index.css | 38 ++++++++++++++++++++++++++++++++++++++
 index.html    | 15 ++++++++++++++-
 2 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/css/index.css b/css/index.css
index 6d1966d..83ceb71 100644
--- a/css/index.css
+++ b/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;
 }
diff --git a/index.html b/index.html
index 3812995..3d3f1a1 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
     <header class="header">
         <a class="#header"><img src="images/logo-green.png"></a>
         <h2 class="tagline show-for-medium">The friendly neighborhood tech community</h2>
-        <ul class="header-subnav">
+        <ul class="header-subnav show-for-medium">
             <li><a href="#">Zom.bi</a></li>
             <li><a href="#" class="is-active">Blog</a></li>
             <li><a href="#">Wiki</a></li>
@@ -28,6 +28,19 @@
         </ul>
     </header>
 
+    <div class="row show-for-small-only">
+        <div class="columns small-12">
+            <div class="whitebox">
+                <ul class="mobile-menu">
+                    <li><a href="#">Zom.bi</a></li>
+                    <li><a href="#" class="is-active">Blog</a></li>
+                    <li><a href="#">Wiki</a></li>
+                    <li><a href="#">Mumble</a></li>
+                </ul>
+            </div>
+        </div>
+    </div>
+
     <div class="row main">
         <div class="medium-9 columns content-box">
             <!-- Post begin -->