Mobile navigation using checkbox hack

5 files changed, 146 insertions, 30 deletions

diff --git a/layouts/partials/navigation.html b/layouts/partials/navigation.html
index 70a0266..a94fc91 100644
--- a/layouts/partials/navigation.html
+++ b/layouts/partials/navigation.html
@@ -1,4 +1,6 @@
 <nav class="menu" role="navigation" id="main-menu">
+    <input type="checkbox" id="menu">
+    <label for="menu" onclick>Menu</label>
     <ul class="menu__items">
         {{ if .Site.Menus.main }}
         {{ range .Site.Menus.main }}
diff --git a/static/css/style.css b/static/css/style.css
index bb965aa..3d89e5e 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -476,6 +476,57 @@ code {
     overflow: hidden;
 }
 
+body {
+    -webkit-animation: bugfix infinite 1s;
+}
+
+@-webkit-keyframes bugfix {
+    from {
+        padding: 0;
+    }
+    to {
+        padding: 0;
+    }
+}
+
+.menu input[type=checkbox] {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+}
+
+.menu label {
+    cursor: pointer;
+    user-select: none;
+    color: #C44741;
+    line-height: 1;
+    text-transform: uppercase;
+    position: absolute;
+    top: 1.5em;
+    right: 1.5em;
+}
+
+.menu label:hover {
+    color: #77201C;
+}
+
+.menu label:before {
+    color: #FFFFFF;
+    content: "\2261";
+    display: inline-block;
+    font-size: 1.5em;
+    font-weight: bold;
+    margin-right: .25em;
+}
+
+.menu .menu__items {
+    display: none;
+}
+
+.menu input:checked ~ .menu__items {
+    display: block;
+}
+
 html {
     background-color: #FFFFFF;
 }
@@ -627,7 +678,7 @@ html {
 
 .headline__title {
     color: #C44741;
-    display: block;
+    display: inline-block;
     font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
     font-size: 1.5em;
     font-weight: bold;
@@ -707,31 +758,35 @@ h2, h4, h6 {
     .header-wrapper .menu {
         text-align: right;
     }
-    .menu__items {
+    .menu label {
+        display: none;
+    }
+    .menu .menu__items {
+        display: block;
         list-style-type: none;
         margin: 0;
         padding: 0;
     }
-    .menu__items li {
+    .menu .menu__items li {
         display: inline-block;
     }
-    .menu__items li + li {
+    .menu .menu__items li + li {
         margin-left: .5em;
     }
-    .menu__items li + li::before {
+    .menu .menu__items li + li::before {
         color: #FFFFFF;
         content: "|";
         display: inline-block;
         margin-right: 0.5em;
     }
-    .menu__items a {
+    .menu .menu__items a {
         background-color: transparent;
         color: #C44741;
         display: inline;
         padding: 0;
         text-decoration: none;
     }
-    .menu__items a:hover {
+    .menu .menu__items a:hover {
         background-color: transparent;
         color: #77201C;
     }
diff --git a/static/sass/custom/breakpoints.scss b/static/sass/custom/breakpoints.scss
index fd25ab0..05f05a4 100644
--- a/static/sass/custom/breakpoints.scss
+++ b/static/sass/custom/breakpoints.scss
@@ -48,34 +48,42 @@
     }
 
     // Menu
-    .menu__items {
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
+    .menu {
 
-        li {
-            display: inline-block;
+        label {
+            display: none;
         }
 
-        li + li {
-            margin-left: .5em;
-        }
+        .menu__items {
+            display: block;
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
 
-        li + li::before {
-            @include  _separator-before($white, "|");
-        }
+            li {
+                display: inline-block;
+            }
 
-        a {
-            background-color: transparent;
-            color: $contrast;
-            display: inline;
-            padding: 0;
-            text-decoration: none;
-        }
+            li + li {
+                margin-left: .5em;
+            }
+
+            li + li::before {
+                @include  _separator-before($white, "|");
+            }
+
+            a {
+                background-color: transparent;
+                color: $contrast;
+                display: inline;
+                padding: 0;
+                text-decoration: none;
+            }
 
-        a:hover {
-            background-color: transparent;
-            color: $shadow;
+            a:hover {
+                background-color: transparent;
+                color: $shadow;
+            }
         }
     }
 }
diff --git a/static/sass/custom/global.scss b/static/sass/custom/global.scss
index c7deaac..5abb292 100644
--- a/static/sass/custom/global.scss
+++ b/static/sass/custom/global.scss
@@ -54,3 +54,54 @@ code {
     position: absolute;
     overflow: hidden;
 }
+
+// Nav
+// Fix for Android
+body {
+    -webkit-animation: bugfix infinite 1s;
+}
+
+@-webkit-keyframes bugfix {
+    from { padding: 0; }
+    to { padding: 0; }
+}
+
+.menu {
+    input[type=checkbox] {
+        position: absolute;
+        top: -9999px;
+        left: -9999px;
+    }
+
+    label {
+        cursor: pointer;
+        user-select: none;
+
+        color: $contrast;
+        line-height: 1;
+        text-transform: uppercase;
+        position: absolute;
+        top: 1.5em; right: 1.5em;
+    }
+
+    label:hover {
+        color: $shadow;
+    }
+
+    label:before {
+        color: $white;
+        content: "\2261";
+        display: inline-block;
+        font-size: $fontSize * 1.5;
+        font-weight: bold;
+        margin-right: .25em;
+    }
+
+    .menu__items {
+        display: none;
+    }
+
+    input:checked ~ .menu__items {
+        display: block;
+    }
+}
diff --git a/static/sass/custom/typography.scss b/static/sass/custom/typography.scss
index dda018a..fe3d908 100644
--- a/static/sass/custom/typography.scss
+++ b/static/sass/custom/typography.scss
@@ -15,7 +15,7 @@ html {
 
 .headline__title {
     color: $contrast;
-    display: block;
+    display: inline-block;
     font-family: $fontFamily;
     font-size: $fontSize * 1.5;
     font-weight: bold;