enhance sidebar and content styling

- 3 sidebar variations (margin, no margin, below content)
  depending on screen size
- scrolling sidebar will scroll document (more space on mobile devices)
- wrap map/graph on div.content

lib/gui.js

@@ -8,9 +8,10 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
     var dataTargets = []
     var latestData
     var content
+    var contentDiv
 
     var linkScale = chroma.scale(chroma.interpolate.bezier(["green", "yellow", "red"])).domain([1, 5])
-    var sidebar = new Sidebar(document.body)
+    var sidebar
 
     function removeContent() {
       if (!content)
@@ -18,7 +19,7 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
 
       router.removeTarget(content)
       content.destroy()
-      document.body.removeChild(content.div)
+      contentDiv.removeChild(content.div)
       content = null
     }
 
@@ -26,7 +27,7 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
       removeContent()
 
       content = new K(linkScale, sidebar, router)
-      document.body.insertBefore(content.div, document.body.firstChild)
+      contentDiv.appendChild(content.div)
 
       if (latestData)
         content.setData(latestData)
@@ -36,6 +37,12 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
       router.reload()
     }
 
+    contentDiv = document.createElement("div")
+    contentDiv.classList.add("content")
+    document.body.appendChild(contentDiv)
+
+    sidebar = new Sidebar(document.body)
+
     var buttonToggle = document.createElement("button")
     buttonToggle.classList.add("contenttoggle")
     buttonToggle.classList.add("next-graph")
@@ -50,7 +57,7 @@ function (chroma, Map, Sidebar, Tabs, Container, Meshstats, Linklist,
         addContent(Map)
       }
     }
-    document.body.appendChild(buttonToggle)
+    contentDiv.appendChild(buttonToggle)
 
     var infobox = new Infobox(config, sidebar, router)
     var tabs = new Tabs()