Redesigned homepage.

assets/components/home/filter-bar.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="filter-bar noselect">
+        <Icon icon="filter" />
+
+        <Filters
+            class="filters-container"
+            :filter="filter"
+            @set-filter="filter => $emit('set-filter', filter)"
+        />
+
+        <v-popover class="filters-compact">
+            <div>Filters</div>
+
+            <div slot="popover">
+                <Filters
+                    :compact="true"
+                    :filter="filter"
+                    @set-filter="filter => $emit('set-filter', filter)"
+                />
+            </div>
+        </v-popover>
+    </div>
+</template>
+
+<script>
+import Filters from './filters.vue';
+
+export default {
+    components: {
+        Filters,
+    },
+    props: {
+        filter: {
+            type: Array,
+            default: () => [],
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'theme';
+
+.filter-bar {
+    background: $background;
+    display: block;
+    padding: .5rem 1rem;
+    font-size: 0;
+    box-shadow: 0 0 3px $shadow;
+
+    .icon {
+        fill: $shadow;
+    }
+}
+
+.filters-container {
+    display: inline-block;
+}
+
+.filters-compact {
+    font-size: 1rem;
+    font-weight: bold;
+    display: none;
+    margin: 0 0 0 .5rem;
+}
+
+@media(max-width: $breakpoint) {
+    .filters-container {
+        display: none;
+    }
+
+    .filters-compact {
+        display: inline-block;
+    }
+}
+</style>

assets/components/home/filters.vue

@@ -1,7 +1,5 @@
 <template>
-    <div class="filters-bar noselect">
-        <Icon icon="filter" />
-
+    <div :class="{ compact }">
         <ul class="filters">
             <li
                 v-tooltip.bottom="'Not yet available'"
@@ -111,6 +109,10 @@ export default {
             type: Array,
             default: () => [],
         },
+        compact: {
+            type: Boolean,
+            default: false,
+        },
     },
     data() {
         return {
@@ -123,17 +125,6 @@ export default {
 <style lang="scss" scoped>
 @import 'theme';
 
-.filters-bar {
-    display: block;
-    background: $shadow-hint;
-    padding: .5rem 1rem;
-    font-size: 0;
-
-    .icon {
-        fill: $shadow;
-    }
-}
-
 .filters {
     display: inline-block;
     list-style: none;
@@ -141,7 +132,7 @@ export default {
     margin: 0;
 
     &:not(:last-child) {
-        border-right: solid 1px $shadow-weak;
+        border-right: solid 1px $shadow-hint;
     }
 }
 
@@ -149,12 +140,23 @@ export default {
     display: inline-block;
 }
 
+.compact {
+    .filters {
+        padding: 0;
+        border: none;
+    }
+
+    .filter {
+        margin: 0 0 1.5rem 0;
+    }
+}
+
 .toggle {
-    color: $shadow;
-    background: $shadow-hint;
+    color: $shadow-weak;
     box-sizing: border-box;
     padding: .5rem;
     margin: 0 .25rem;
+    border: solid 1px transparent;
     border-radius: .5rem;
     font-size: .9rem;
     font-weight: bold;
@@ -164,9 +166,13 @@ export default {
         display: none;
     }
 
+    &:hover {
+        color: $shadow;
+    }
+
     &.active {
-        color: $text-contrast;
-        background: $primary;
+        color: $primary;
+        box-shadow: 0 0 2px $shadow-weak;
     }
 }
 </style>

assets/components/home/home.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import FilterBar from './filter.vue';
+import FilterBar from './filter-bar.vue';
 import ReleaseTile from '../tile/release.vue';
 
 async function fetchReleases() {