murda dem safari boombaclat!

_includes/scripts.html

@@ -1,3 +1,4 @@
 <!-- Scripts -->
 {% include relBase.html %}
 <script src="{{ relBase }}/assets/js/set-20200805.js"></script>
+<script src="{{ relBase }}/assets/js/zafari.js"></script>

_includes/zafari.html

@@ -0,0 +1,22 @@
+<div id="zafari" class="modalDialog">
+  <div>
+<h2>Hey Safari User!</h2>
+<p>Amazing! You are surfing the web with one of the leading browsers to download another browser! Such luxury! <br />
+To listen to {{ site.title }}&apos;s music, these are your options:
+<ul>
+  <li><a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank" rel="noopener" class="button">Download Firefox</a></li>
+  <li><a href="{% for store in site.data.stores %}{% if store.name == 'Spotify' %}{{ store.url }}{% endif %}{% endfor %}" target="_blank" rel="noopener" class="button">Use Spotify</a></li>
+</ul>
+<br />
+If you like browsing the web this way and you really just want to see if this {{ site.title }} thing is for real:<br />
+<ul>
+  <li>
+    <a href="#" onclick="youMadBro()" class="button">Proceed anyway</a>
+  </li>
+</ul>
+
+
+</p>
+{% include streamer.html %}
+</div>
+</div>

_layouts/default.html

@@ -35,9 +35,9 @@
 
 </div>
 <!-- END Wrapper -->
-{% unless page.collection == 'traks' %}
+
 {% include navigation.html %}
-{% endunless %}
+{% include zafari.html %}
 {% include cookie-consent.html %}
 {% include scripts.html %}
 {% if page.video_path %}

_sass/zafari.scss

@@ -0,0 +1,30 @@
+.zafariClass {
+  opacity:1;
+  pointer-events: auto;
+  background-color: var(--bg);
+  text-align: center;
+  z-index: 10000;
+  overflow-y: scroll;
+  > div {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    max-width: 700px;
+    h2 {
+      font-family: _font(family);
+    }
+    ul {
+      padding: 20px;
+      width: 100%
+    }
+    li {
+      list-style-type: none;
+      margin: 20px;
+      padding: 0;
+      a {
+        display: block;
+        font-size: 14px
+      }
+    }
+  }
+}

assets/css/main-20200810.scss

@@ -10,6 +10,7 @@
 @import 'libs/animations';
 @import 'elements';
 @import 'navigation';
+@import 'zafari';
 @import 'videos';
 @import 'cookies';
 @import 'player';

assets/css/noscripts-20200810.scss

@@ -9,6 +9,7 @@
 @import 'layout';
 @import 'elements';
 @import 'navigation';
+@import 'zafari';
 @import 'videos';
 @import 'cookies';
 @import 'player';

assets/js/zafari.js

@@ -0,0 +1,8 @@
+var zafari = document.getElementById("zafari");
+if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) { 
+  zafari.classList.add("zafariClass"); 
+}
+
+function youMadBro() {
+  zafari.classList.remove("zafariClass");
+}