clean SCSS and add browser notify

src/index.jsx

@@ -10,3 +10,24 @@ ReactDOM.render(
   </Provider>,
   document.getElementById('explore-app')
 )
+
+// Expressions from https://exceptionshub.com/how-to-detect-safari-chrome-ie-firefox-and-opera-browser.html
+
+// Opera 8.0+
+var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
+// Firefox 1.0+
+var isFirefox = typeof InstallTrigger !== 'undefined';
+// Safari 3.0+ "[object HTMLElementConstructor]"
+var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));
+// Internet Explorer 6-11
+var isIE = /*@cc_on!@*/false || !!document.documentMode;
+// Edge 20+
+var isEdge = !isIE && !!window.StyleMedia;
+// Chrome 1+
+var isChrome = !!window.chrome && !!window.chrome.webstore;
+// Blink engine detection
+var isBlink = (isChrome || isOpera) && !!window.CSS;
+
+if (isSafari || isEdge || isIE || isOpera) {
+  alert('Please view this website in Firefox or Chrome for best viewing. It is untested in your browser.')
+}

src/scss/infopopup.scss

@@ -2,7 +2,6 @@
 
 .infopopup {
   width: 400px;
-  // height: 400px;
   box-shadow: 10px -10px 38px rgba(0, 0, 0, 0.3), 10px 15px 12px rgba(0, 0, 0, 0.22);
   color: $darkgrey;
   position: absolute;

src/scss/main.scss

@@ -17,5 +17,3 @@
 @import 'scene';
 @import 'mediaplayer';
 @import 'cover';
-
-

src/scss/map.scss

@@ -15,12 +15,6 @@
 
   .leaflet-container {
     height: 100%;
-
-    // img.leaflet-tile {
-    //   -webkit-filter: contrast(120%) brightness(115%) grayscale(95%); /* Webkit */
-    //  filter: gray; /* IE6-9 */
-    //  filter: contrast(120%) brightness(115%) grayscale(95%); /* W3C */
-    // }
   }
 
   &.hidden {

src/scss/overlay.scss

@@ -311,7 +311,7 @@ $overlay-bg: rgba(239,239,239,0.9);
   justify-content: center;
   padding: 20px;
   min-width: calc(100% - 40px);
-  z-index: 99999;
+  z-index: $final-level;
 }
 
 .media-player {

src/scss/timeline.scss

@@ -1,9 +1,11 @@
+$timeline-height: 170px;
+
 .timeline-wrapper {
   position: fixed;
   box-sizing: border-box;
   left: 110px;
   right: 0px;
-  height: 170px;
+  height: $timeline-height;
   background: rgba($black, 0.8);
   box-shadow: 0 -10px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
   color: white;
@@ -13,7 +15,7 @@
 
   &.folded {
     transition: bottom 0.2s ease;
-    bottom: -170px;
+    bottom: -$timeline-height;
 
     .timeline-header .timeline-toggle p .arrow-down {
       transform: translate(0, 5px)rotate(-135deg);
@@ -187,9 +189,9 @@
 
       .drag-grabber {
         cursor: -webkit-grab;
-        cursor: -moz-grab;     
+        cursor: -moz-grab;
         fill: $offwhite;
-        opacity: 0.05;   
+        opacity: 0.05;
       }
 
       .axisBoundaries {