sidebar styling

bower.json

@@ -20,7 +20,8 @@
     "almond": "~0.3.1",
     "r.js": "~2.1.16",
     "d3": "~3.5.5",
-    "numeraljs": "~1.5.3"
+    "numeraljs": "~1.5.3",
+    "roboto-fontface": "~0.3.0"
   },
   "authors": [
     "Nils Schneider <nils@nilsschneider.net>"

html/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, user-scalable=no">
     <link rel="stylesheet" href="css/ionicons.min.css">
     <link rel="stylesheet" href="roboto-slab-fontface.css">
+    <link rel="stylesheet" href="roboto-fontface.css">
     <link rel="stylesheet" href="style.css">
     <script src="vendor/es6-shim/es6-shim.min.js"></script>
     <script src="app.js"></script>

index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, user-scalable=no">
     <link rel="stylesheet" href="bower_components/roboto-slab-fontface/roboto-slab-fontface.css">
+    <link rel="stylesheet" href="bower_components/roboto-fontface/roboto-fontface.css">
     <link rel="stylesheet" href="bower_components/leaflet/dist/leaflet.css">
     <link rel="stylesheet" href="bower_components/Leaflet.label/dist/leaflet.label.css">
     <link rel="stylesheet" href="bower_components/ionicons/css/ionicons.min.css">

lib/sidebar.js

@@ -14,6 +14,10 @@ define([], function () {
       sidebar.classList.toggle("hidden")
     }
 
+    var container = document.createElement("div")
+    container.classList.add("container")
+    sidebar.appendChild(container)
+
     self.getWidth = function () {
       if (sidebar.classList.contains("hidden"))
           return 0
@@ -23,7 +27,7 @@ define([], function () {
     }
 
     self.add = function (d) {
-      d.render(sidebar)
+      d.render(container)
     }
 
     self.container = sidebar

scss/_base.scss

@@ -0,0 +1,30 @@
+h1, h2, h3, h4, h5, h6 {
+  font-weight: bold;
+}
+
+h1 {
+  padding: 0.67em 0;
+  font-size: 2em;
+}
+
+h2 {
+  padding: 0.83em 0;
+  font-size: 1.5em;
+}
+
+h3 {
+  padding: 1em 0;
+  font-size: 1.17em;
+}
+
+h4 {
+  font-size: 1em;
+}
+
+h5 {
+  font-size: 0.83em;
+}
+
+h6 {
+  font-size: 0.67em;
+}

scss/_reset.scss

@@ -0,0 +1,47 @@
+/**
+ * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
+ * http://cssreset.com
+ */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

scss/main.scss

@@ -1,3 +1,5 @@
+@import '_reset';
+@import '_base';
 @import '_leaflet';
 @import '_leaflet.label';
 
@@ -6,6 +8,7 @@ $sidebarwidth: 420pt;
 $sidebarwidthsmall: 360pt;
 $buttondistance: 12pt;
 
+@import '_sidebar';
 @import '_map';
 @import '_forcegraph';
 
@@ -31,27 +34,31 @@ $buttondistance: 12pt;
 }
 
 .tabs {
-  padding-top: 1em !important;
+  padding: 1em 0 0 !important;
   margin: 0;
   list-style: none;
   display: flex;
+  font-family: Roboto;
+  background: rgba(0, 0, 0, 0.02);
+  box-shadow: 0px 0.5px 3px rgba(0, 0, 0, 0.16), 0px 0.5px 2px rgba(0, 0, 0, 0.24);
 }
 
 .tabs li {
   flex: 1;
+  text-transform: uppercase;
   text-align: center;
-  padding: 0.5em;
+  padding: 0.5em 0.5em 1em;
   cursor: pointer;
+  color: rgba(0, 0, 0, 0.5);
 }
 
 .tabs li:hover {
-  background: rgba(0, 0, 0, 0.03);
   color: #dc0067;
 }
 
 .tabs .visible {
-  font-weight: bold;
+  border-bottom: 2pt solid #dc0067;
-  border-bottom: 2pt solid black;
+  color: #dc0067;
 }
 
 .tab {
@@ -103,11 +110,20 @@ table.attributes th {
   vertical-align: top;
   padding-right: 1em;
   white-space: nowrap;
+  line-height: 1.41em;
 }
 
 table.attributes td {
   text-align: left !important;
   width: 100%;
+  line-height: 1.41em;
+}
+
+.sidebar {
+  .infobox, .container {
+    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23);
+    background: rgba(255, 255, 255, 0.9);
+  }
 }
 
 .infobox .clients {
@@ -118,9 +134,8 @@ table.attributes td {
 
 .infobox {
   position: relative;
-  box-shadow: 0px 0.5px 3px rgba(0, 0, 0, 0.16), 0px 0.5px 2px rgba(0, 0, 0, 0.24);
-  background: rgba(0, 0, 0, 0.02);
   padding: 0.25em 0;
+  margin-bottom: $buttondistance;
 }
 
 button {
@@ -153,21 +168,54 @@ button::-moz-focus-inner {
 }
 
 button.close {
-  position: absolute;
+  width: auto;
-  right: $buttondistance;
+  height: auto;
-  top: $buttondistance;
+  font-size: 14pt;
-}
+  float: right;
+  padding: $buttondistance/2 $buttondistance;
+  margin-right: $buttondistance;
+  margin-top: $buttondistance;
+  box-shadow: none;
+  background: transparent;
+  border-radius: 0;
+  color: rgba(0, 0, 0, 0.5);
+  font-family: Roboto;
 
-button.close:after {
+  &:hover {
-  content: "\f12a";
+    color: #dc0067;
+  }
+
+  &:active {
+    background: rgba(0, 0, 0, 0.04);
+  }
+
+  &:after {
+    content: "CLOSE";
+  }
 }
 
 .sidebar h2, .sidebar h3 {
-  padding: 0 10pt;
+  padding-left: $buttondistance;
+  padding-right: $buttondistance;
 }
 
 .sidebar p, .sidebar table, .sidebar pre, .sidebar ul {
-  padding: 0 10pt 1em;
+  padding: 0 $buttondistance 1em;
+}
+
+table {
+  border-spacing: 0 0.5em;
+  td, th {
+    line-height: 1.41em;
+  }
+}
+
+.sidebar table {
+  border-collapse: separate;
+}
+
+.sidebar table th {
+  font-weight: bold;
 }
 
 .sidebarhandle {
@@ -204,8 +252,6 @@ button.close:after {
   top: $buttondistance;
   left: $buttondistance;
   margin-bottom: $buttondistance;
-  background: white;
-  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23);
   transition: left 0.5s;
 }
 
@@ -238,26 +284,28 @@ button.close:after {
   height: 1.4em;
   background: rgba(85, 128, 32, 0.5);
   position: relative;
-}
 
-.bar span {
+  span {
-  display: inline-block;
+    display: inline-block;
-  height: 1.4em;
+    height: 1.4em;
-  background: rgba(85, 128, 32, 0.8);
+    background: rgba(85, 128, 32, 0.8);
-}
+  }
 
-.bar label {
+  label {
-  font-weight: bold;
+    font-weight: bold;
-  white-space: nowrap;
+    white-space: nowrap;
-  color: white;
+    color: white;
-  position: absolute;
+    position: absolute;
-  right: 0.5em;
+    right: 0.5em;
+    top: 0.1em;
+  }
 }
 
 .proportion th {
-  font-weight: normal;
+  font-weight: normal !important;
   text-align: right !important;
   font-size: 0.95em;
+  padding-right: 0.71em;
 }
 
 .proportion td {
@@ -271,9 +319,8 @@ button.close:after {
 
 .proportion span {
   display: inline-block;
-  height: 1.4em;
   background: black;
-  padding: 0 0.5em;
+  padding: 0.25em 0.5em;
   font-weight: bold;
   min-width: 1.5em;
   box-sizing: border-box;
@@ -287,10 +334,21 @@ button.close:after {
     margin: 0pt;
     width: $sidebarwidthsmall;
     min-height: 100vh;
+    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.19), 0px 3px 6px rgba(0, 0, 0, 0.23);
+    background: white;
 
     .sidebarhandle {
       left: $sidebarwidthsmall + $buttondistance;
     }
+
+    .container, .infobox {
+      margin: 0;
+      box-shadow: none;
+    }
+
+    .infobox {
+      background: rgba(0, 0, 0, 0.02);
+    }
   }
 }
 

tasks/build.js

@@ -18,7 +18,7 @@ module.exports = function(grunt) {
         cwd: "bower_components/",
         dest: "build/vendor/"
       },
-      roboto: {
+      robotoSlab: {
         src: [ "fonts/*",
                "roboto-slab-fontface.css"
              ],
@@ -26,6 +26,14 @@ module.exports = function(grunt) {
         dest: "build/",
         cwd: "bower_components/roboto-slab-fontface"
       },
+      roboto: {
+        src: [ "fonts/*",
+               "roboto-fontface.css"
+             ],
+        expand: true,
+        dest: "build/",
+        cwd: "bower_components/roboto-fontface"
+      },
       ionicons: {
         src: [ "fonts/*",
                "css/ionicons.min.css"