From 727ed753a9c540c71f00bafa6e43ad4cb42321f2 Mon Sep 17 00:00:00 2001
From: Pim van den Berg
Date: Sat, 16 May 2015 16:37:53 +0200
Subject: responsive: introduce a hamburger navicon to toggle the menu on
 smaller devices

---
 layout/style.css | 36 ++++++++++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 6 deletions(-)

(limited to 'layout/style.css')

diff --git a/layout/style.css b/layout/style.css
index 156e8c5..768c0c6 100644
--- a/layout/style.css
+++ b/layout/style.css
@@ -3,14 +3,41 @@ body {
 	margin: 0px;
 }
 
+label[for="navicon"] {
+	display: none;
+
+	position: absolute;
+	left: 5px; top: 5px;
+	z-index: 2;
+
+	height: 25px;
+	width: 25px;
+	cursor: pointer;
+	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='25px' height='25px' viewBox='0 0 25 25' enable-background='new 0 0 25 25' xml:space='preserve'><rect width='25' height='5' style='fill:white'/><rect y='20' width='25' height='5' style='fill:white'/><rect y='10' width='25' height='5' style='fill:white'/></svg>");
+	background-size: contain;
+}
+
+.navicon {
+	position: absolute;
+	clip: rect(0, 0, 0, 0);
+}
+
 #header {
 	background: #4d79b5;
 	padding-left: 10px;
+	color: #fff;
+}
+
+#header h1 {
+	position: relative;
+	display: inline-block;
+	padding: 8px;
+	margin: 0;
+	font-size: 1em;
 }
 
 #header a{
 	display: block;
-	padding: 8px;
 	color: #fff;
 	text-decoration: none;
 }
@@ -28,11 +55,7 @@ body {
 #footer {
 	clear: both;
 	padding: 0px 20px 16px;
-}
-
-h1 {
-	margin: 0;
-	font-size: 1em;
+	background: #fff;
 }
 
 h2 {
@@ -126,6 +149,7 @@ hr {
 .plugins {
 	float: left;
 	margin-right: 25px;
+	width: 100px;
 }
 
 .plugins ul > li:first-of-type {
-- 
cgit v1.1