Merge branch 'master' into gh-pages

Author: Justin Martin

.gitignore

@@ -3,3 +3,4 @@ design.svg
 tests.js
 node_modules
 npm-debug.log
+.idea

css/main.css

@@ -210,10 +210,19 @@ h2 {
   margin-left: 8px;
 }
 
+.settings-menu-content:before {
+  content: '';
+  display: block;
+  height: 40px;
+  width: 100%;
+  position: absolute;
+  top: -40px;
+}
+
 .settings-menu-content {
   display: none;
   position: absolute;
-  z-index: 4;
+  z-index: 5;
   padding: 16px;
   right: 0;
   background-color: #0f1010;

img/blit-ad1.png

@@ -50,7 +50,13 @@ <h2 class="left">Online JSON Compare</h2>
 
       </div>
       <div class="ad-container">
-        <script async type="text/javascript" src="http://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=jsondiffcom" id="_carbonads_js"></script>
+        <div id="carbonads">
+          <span>
+            <span id="ad-wrap" class="carbon-wrap">
+              <a href="https://blitapp.com?ref=json-diff-txt" class="carbon-text" target="_blank" rel="noopener">Screenshots of websites to your inbox. Try it free.</a>
+            </span>
+          </span>
+        </div>
       </div>
       <div class="made-by-text"><a href="https://blitapp.com?ref=json-diff" target="_blank" rel="noopener noreferrer">made with ♥ by <img src="img/blit_logo.svg"/></a></div>
     </div>
@@ -93,6 +99,7 @@ <h2 class="left">Online JSON Compare</h2>
 
     </script>
     <script>
+      initAd();
       var isLightTheme = localStorage.getItem('lighttheme');
       if (isLightTheme) {
         enableLightTheme();
@@ -120,6 +127,12 @@ <h2 class="left">Online JSON Compare</h2>
       $('#left-input').on('click', '.input-collapse,.input-split,.input-expand', onPaneResizeLeftClick);
       $('#right-input').on('click', '.input-collapse,.input-split,.input-expand', onPaneResizeRightClick);
 
+      function initAd() {
+        var adNum = Math.floor(Math.random() * Math.floor(3)) + 1;
+        var ad = $('<a href="https://blitapp.com?ref=json-diff-img'+adNum+'" class="carbon-img" target="_blank" rel="noopener"><img src="/img/blit-ad'+adNum+'.png" alt="Blit - Scheduled Website Screenshots" border="0" height="100" width="130" style="max-width: 130px;"></a>');
+        $('#ad-wrap').prepend(ad);
+      }
+
       function toggleLightTheme() {
         var isLightTheme = localStorage.getItem('lighttheme');
         if (isLightTheme) {