Insert links to JSON endpoints in new area above footer

Author: t0p0lin0

_includes/_sass/base.scss

@@ -1406,6 +1406,7 @@ span.progress {
   background: rgba(255,255,255,0.7);
   margin: 0;
   border-bottom: 10px solid $green-light;
+  border-radius: 0;
   padding: 1.4rem 2rem 1rem;
 
   p {
@@ -1422,6 +1423,26 @@ span.progress {
       color: $gray-lighter;
     }
   }
+
+  &.top {
+    background: rgba(50, 123, 158, 0.8);
+    padding: .5rem 0;
+    border-bottom: 10px solid #63b0d5;
+    color: $white-dark;
+
+    a {
+      color: #fff;
+      font-weight: bold;
+
+      &:hover {
+        color: $link-on-dark;
+      }
+
+      i {
+        font-weight: normal;
+      }
+    }
+  }
 }
 
 #show-disclaimer {

_includes/footer.html

@@ -1,3 +1,6 @@
+<div role="contentinfo" class="top footer ui center aligned segment">
+  <p><i class="code icon"></i> Developer looking for raw data? <a href="/data.json" target="_blank" data-tooltip="All listings in JSON format" data-position="top center" data-inverted=""><i class="file alternate icon"></i>data.json</a> or <a href="/stats.json" target="_blank" data-tooltip="Statistics in JSON format" data-position="top center" data-inverted=""><i class="file alternate outline icon"></i>stats.json</a>.</p>
+</div>
 <div role="contentinfo" class="footer ui center aligned segment">
   <p>Spot an issue, or want to add a site? <a class="submit-new" href="/add" target="_blank" data-tooltip="Fill out a quick form" data-position="top center" data-inverted="">Let us know</a> or <a href="{{ '/blob/master/CONTRIBUTING.md' | prepend: site.repo }}" target="_blank" data-tooltip="Learn more about contributing" data-position="top center" data-inverted="">contribute</a> directly on <i class="github icon"></i><a href="{{ site.repo }}" target="_blank" data-tooltip="The source code for this site" data-position="top center" data-inverted="">GitHub</a>.</p>
   <p>Made with <i class="red heart small icon"></i> by <a href="https://github.com/acceptbitcoincash" target="_blank" data-tooltip="Our organization on Github" data-position="top center" data-inverted=""><em>the</em> <b>Accept Bitcoin Cash</b> <em>initiative</em></a>. &nbsp; <a id="show-disclaimer" data-tooltip="Some important info to know" data-position="top center" data-inverted=""><i class="warning sign orange icon"></i>Caution!</a></p>