Changed sort filters to tabs.

assets/components/header/filter-bar.vue

@@ -2,30 +2,22 @@
 	<div class="filter-bar noselect">
 		<span class="sort">
 			<router-link
-				:to="{ name: isHome ? 'latest' : $route.name, params: { ...$route.params, range: 'latest' } }"
+				:to="{ name: isHome ? 'latest' : $route.name, params: { ...$route.params, range: 'latest', pageNumber: 1 } }"
 				:class="{ active: $route.name === 'latest' || range === 'latest' }"
 				class="range range-button"
 			>Latest</router-link>
 
 			<router-link
-				:to="{ name: isHome ? 'upcoming' : $route.name, params: { ...$route.params, range: 'upcoming' } }"
+				:to="{ name: isHome ? 'upcoming' : $route.name, params: { ...$route.params, range: 'upcoming', pageNumber: 1 } }"
 				:class="{ active: $route.name === 'upcoming' || range === 'upcoming' }"
 				class="range-button"
 			>Upcoming</router-link>
 
 			<router-link
-				:to="{ name: isHome ? 'new' : $route.name, params: { ...$route.params, range: 'new' } }"
+				:to="{ name: isHome ? 'new' : $route.name, params: { ...$route.params, range: 'new', pageNumber: 1 } }"
 				:class="{ active: $route.name === 'new' || range === 'new' }"
 				class="range-button"
 			>New</router-link>
-
-			<!--
-            <router-link
-                :to="{ name: $route.name, params: { ...$route.params, range: 'all' } }"
-                :class="{ active: range === 'all' }"
-                class="range-button"
-            >All</router-link>
-            -->
 		</span>
 
 		<Pagination
@@ -136,15 +128,13 @@ export default {
 @import 'theme';
 
 .filter-bar {
-    background: var(--background);
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: .5rem 1rem;
-    border-top: solid 1px var(--shadow-hint);
+    padding: .5rem 1rem 0 1rem;
     z-index: 1;
+	background: var(--background-dim);
     font-size: 0;
-    box-shadow: 0 0 3px var(--darken);
 
     .icon {
         margin: 0 .5rem 0 0;
@@ -155,6 +145,7 @@ export default {
 .sort {
     display: flex;
     align-items: center;
+	margin: 0 0 -1px 0;
 }
 
 .filters-container {
@@ -174,14 +165,14 @@ export default {
 
 .range-button {
     color: var(--shadow);
-    background: var(--background);
     display: inline-block;
-    padding: .5rem 1rem;
+    padding: .75rem 1rem;
     border: none;
-    box-shadow: 0 0 2px var(--shadow-weak);
     font-size: .8rem;
     font-weight: bold;
     text-decoration: none;
+	border: solid 1px transparent;
+	border-bottom: none;
 
     &:hover:not(.active) {
         color: var(--shadow-strong);
@@ -190,6 +181,8 @@ export default {
 
     &.active {
         color: var(--primary);
+		background: var(--background-soft);
+		border-color: var(--crease);
     }
 }
 
@@ -197,6 +190,12 @@ export default {
 	flex-shrink: 0;
 }
 
+@media(max-width: $breakpoint2) {
+	.pagination {
+		display: none;
+	}
+}
+
 @media(max-width: $breakpoint) {
     .filters-container {
         display: none;

assets/components/header/filters.vue

@@ -1,88 +1,88 @@
 <template>
-    <div :class="{ compact }">
-        <ul class="filters">
-            <li class="filter">
-                <label
-                    class="toggle"
-                    :class="{ active: !localFilter.includes('lesbian') }"
-                >
-                    <input
-                        v-model="localFilter"
-                        value="lesbian"
-                        type="checkbox"
-                        class="check"
-                        @change="$emit('set-filter', localFilter)"
-                    >lesbian
-                </label>
-            </li>
+	<div :class="{ compact }">
+		<ul class="filters">
+			<li class="filter">
+				<label
+					class="toggle"
+					:class="{ active: !localFilter.includes('lesbian') }"
+				>
+					<input
+						v-model="localFilter"
+						value="lesbian"
+						type="checkbox"
+						class="check"
+						@change="$emit('set-filter', localFilter)"
+					>lesbian
+				</label>
+			</li>
 
-            <li class="filter">
-                <label
-                    class="toggle"
-                    :class="{ active: !localFilter.includes('gay') }"
-                >
-                    <input
-                        v-model="localFilter"
-                        value="gay"
-                        type="checkbox"
-                        class="check"
-                        @change="$emit('set-filter', localFilter)"
-                    >gay
-                </label>
-            </li>
+			<li class="filter">
+				<label
+					class="toggle"
+					:class="{ active: !localFilter.includes('gay') }"
+				>
+					<input
+						v-model="localFilter"
+						value="gay"
+						type="checkbox"
+						class="check"
+						@change="$emit('set-filter', localFilter)"
+					>gay
+				</label>
+			</li>
 
-            <li class="filter">
-                <label
-                    class="toggle"
-                    :class="{ active: !localFilter.includes('transsexual') }"
-                >
-                    <input
-                        v-model="localFilter"
-                        value="transsexual"
-                        type="checkbox"
-                        class="check"
-                        @change="$emit('set-filter', localFilter)"
-                    >trans
-                </label>
-            </li>
-        </ul>
+			<li class="filter">
+				<label
+					class="toggle"
+					:class="{ active: !localFilter.includes('transsexual') }"
+				>
+					<input
+						v-model="localFilter"
+						value="transsexual"
+						type="checkbox"
+						class="check"
+						@change="$emit('set-filter', localFilter)"
+					>trans
+				</label>
+			</li>
+		</ul>
 
-        <ul class="filters">
-            <li class="filter">
-                <label
-                    class="toggle"
-                    :class="{ active: !localFilter.includes('anal') }"
-                >
-                    <input
-                        v-model="localFilter"
-                        value="anal"
-                        type="checkbox"
-                        class="check"
-                        @change="$emit('set-filter', localFilter)"
-                    >anal
-                </label>
-            </li>
-        </ul>
-    </div>
+		<ul class="filters">
+			<li class="filter">
+				<label
+					class="toggle"
+					:class="{ active: !localFilter.includes('anal') }"
+				>
+					<input
+						v-model="localFilter"
+						value="anal"
+						type="checkbox"
+						class="check"
+						@change="$emit('set-filter', localFilter)"
+					>anal
+				</label>
+			</li>
+		</ul>
+	</div>
 </template>
 
 <script>
 export default {
-    props: {
-        filter: {
-            type: Array,
-            default: () => [],
-        },
-        compact: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    data() {
-        return {
-            localFilter: this.filter,
-        };
-    },
+	props: {
+		filter: {
+			type: Array,
+			default: () => [],
+		},
+		compact: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			localFilter: this.filter,
+		};
+	},
 };
 </script>
 
@@ -116,7 +116,7 @@ export default {
 }
 
 .toggle {
-    color: var(--shadow-weak);
+    color: var(--shadow);
     box-sizing: border-box;
     padding: .5rem;
     margin: 0 .25rem;
@@ -134,6 +134,7 @@ export default {
     }
 
     &.active {
+		background: var(--background);
         color: var(--primary);
         box-shadow: 0 0 2px var(--shadow-weak);
     }

assets/components/header/header.vue

@@ -184,10 +184,11 @@ export default {
     height: 3rem;
     display: flex;
     align-items: center;
+	z-index: 2;
     justify-content: space-between;
     background: var(--background);
     color: var(--primary);
-    box-shadow: 0 1px 0 var(--darken-hint);
+    box-shadow: 0 0 3px var(--darken-weak);
     font-size: 0;
 }
 
@@ -229,6 +230,7 @@ export default {
     display: flex;
     align-items: center;
     padding: 0 0 0 1rem;
+	fill: var(--primary);
 }
 
 .logo {