responsive: introduce a hamburger navicon to toggle the menu on smaller devices

1 files changed, 27 insertions, 0 deletions

diff --git a/layout/style-c.css b/layout/style-c.css
index 83c64bc..702cc04 100644
--- a/layout/style-c.css
+++ b/layout/style-c.css
@@ -1,3 +1,11 @@
+label[for="navicon"] {
+        display: block;
+}
+
+#header h1 {
+        padding-left: 30px;
+}
+
 #content {
         padding-left: 5px;
 }
@@ -12,5 +20,24 @@
 }
 
 .plugins {
+        position: absolute;
+        z-index: 0;
         display: none;
 }
+
+.navicon:checked ~ .plugins {
+        display: block;
+}
+
+.graphs {
+        position: relative;
+        z-index: 1;
+        background: #fff;
+        min-height: 100%;
+        min-width: 100%;
+        bottom: 100%;
+}
+
+.navicon:checked ~ .graphs {
+        left: 125px;
+}