Added filter bar to all pages. Added 'upcoming' marker. Improved date tidbit.

assets/components/tile/release.vue

@@ -18,9 +18,10 @@
 
                 <a
                     v-if="release.date"
-                    v-tooltip.bottom="`View scene on ${release.site.name}`"
-                    :title="`View scene on ${release.site.name}`"
+                    v-tooltip.bottom="release.url && `View scene on ${release.site.name}`"
+                    :title="release.url && `View scene on ${release.site.name}`"
                     :href="release.url"
+                    :class="{ upcoming: isAfter(release.date, new Date()) }"
                     target="_blank"
                     rel="noopener noreferrer"
                     class="date"
@@ -29,6 +30,7 @@
                 <a
                     v-else
                     :href="release.url"
+                    :class="{ upcoming: isAfter(release.date, new Date()) }"
                     title="Scene date N/A, showing date added"
                     target="_blank"
                     rel="noopener noreferrer"
@@ -166,17 +168,34 @@ export default {
     align-items: center;
     justify-content: space-between;
     position: absolute;
+    font-size: 0;
 }
 
 .site,
 .date {
     color: #fff;
-    background: rgba(0, 0, 0, .5);
+    background: $shadow;
+    position: relative;
     font-size: .8rem;
     padding: .25rem;
     text-decoration: none;
 }
 
+.date.upcoming:before {
+    content: '';
+    color: $text-contrast;
+    background: $primary;
+    width: .25rem;
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -.75rem;
+    padding: .25rem;
+    font-size: .8rem;
+    font-weight: bold;
+}
+
 .site {
     font-weight: bold;
 }