Fixed responsive issues, added map flourish for location pages

app/scripts/components/eventHandlers.js

@@ -9,7 +9,7 @@ $(document).on('scroll', function(e) {
 
   var header = $("#page-header");
 
-  if (st > lastScrollTop) {
+  if (st >= lastScrollTop) {
     header.addClass('scrolled');
   } else {
     header.removeClass('scrolled');

app/scripts/components/handleData.js

@@ -37,6 +37,30 @@ function handleData (data, lang) {
   document.title = title + " – WikiPadia";
   $(window).scrollTop(0);
 
+  if ($('#coordinates').length) {
+    $.getScript('https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js').done(function() {
+      $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">')
+      var geo = $('#coordinates').find('.geo');
+
+      if (geo.length) {
+        var latlng = L.latLng( geo.text().split(';'))
+
+        $('body > .container').before('<div id="map" />');
+
+        var map = L.map('map', {
+          zoomControl: false,
+          scrollWheelZoom: false,
+          zoom: 12,
+          center: latlng,
+          attributionControl: false
+        });
+
+        var tileLayer = new L.TileLayer('//{s}.tile.stamen.com/{style}/{z}/{x}/{y}.png', { style: 'toner-lines' });
+        tileLayer.addTo(map);
+      }
+    });
+  }
+
   if ($('ul.redirectText').length) {
     $('ul.redirectText').find('li a').each(function (i, el) {
       var $link = $(el);

app/styles/_app.scss

@@ -1,8 +1,7 @@
 
 body {
-  padding: 2em 0 0;
-  margin: 0 auto;
-  max-width: 60em;
+  margin: 0;
+  padding: 55px 0 0;
 }
 
 .page-header {
@@ -194,6 +193,8 @@ fieldset {
 .container {
   position: relative;
   padding: 2em 4em 4em;
+  max-width: 60em;
+  margin: 0 auto;
 }
 
 #menu {

app/styles/_content.scss

@@ -7,7 +7,7 @@ html {
 }
 
 #content {
-  font-size: 1.25em;
+  font-size: 1.2em;
   line-height: 1.75em;
   counter-reset: section;
 
@@ -129,6 +129,28 @@ img {
   position: static;
 }
 
+#map {
+  // position: absolute !important;
+  height: 400px;
+  background: transparent;
+  opacity: 0.1;
+
+  + .container {
+    margin-top: -400px;
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(rgba(white, 0), white);
+    z-index: 100;
+  }
+}
+
 table {
   &.infobox {
     display: none;
@@ -143,7 +165,7 @@ table {
     &.geography,
     &.vcard,
     &.active {
-      width: 100% !important;
+      max-width: 100% !important;
       margin: 2em auto;
       display: block;
     }
@@ -159,17 +181,26 @@ table {
     border: 0 !important;
     background-color: transparent !important;
     padding: 0 !important;
+
+    th {
+      background-color: transparent !important;
+    }
   }
 
   &.navbox {
     border: 0;
     padding: 0;
+
+    th {
+      background-color: transparent !important;
+    }
   }
 
   &.wikitable {
     font-size: 90%;
     border-spacing: 0;
     border-collapse: collapse;
+    border-right: thin solid #ddd;
 
     caption {
       margin: 0 0 .5em;
@@ -186,6 +217,21 @@ table {
   }
 }
 
+table.wikitable, table.navbox {
+  overflow-y: hidden;
+  overflow-x: auto;
+  display: block;
+  max-width: 100%;
+  width: 100% !important;
+}
+
+table.mbox-small {
+  background: transparent !important;
+  border: 0 !important;
+  font-style: italic;
+}
+
+
 .tleft {
   float: left;
   margin-right: 2em;

app/styles/_default.scss

@@ -368,7 +368,7 @@ table.navbox + table.navbox {
   line-height: 1.5em;
 
   caption {
-    font-size: 125%;
+    font-size: 90%;
     font-weight: bold;
     padding: 0.2em;
   }

app/styles/_themes.scss

@@ -13,6 +13,14 @@ html.sans {
   background: #111;
   color: #eee;
 
+  #map {
+    opacity: .1;
+
+    &:before {
+      background: linear-gradient(rgba(#111, 0), #111);
+    }
+  }
+
   .radio span {
     label {
       background: #333;