Changed sort filters to tabs.

assets/components/actors/actor.vue

@@ -3,8 +3,6 @@
 		v-if="actor"
 		class="content actor"
 	>
-		<FilterBar :fetch-releases="fetchActor" />
-
 		<div class="actor-header">
 			<h2 class="header-name">
 				<span v-if="actor.network">{{ actor.name }} ({{ actor.network.name }})</span>
@@ -290,6 +288,7 @@
 					:actor="actor"
 				/>
 
+				<FilterBar :fetch-releases="fetchActor" />
 				<Releases :releases="actor.releases" />
 			</div>
 		</div>
@@ -601,6 +600,7 @@ export default {
     display: flex;
     flex-grow: 1;
     flex-direction: column;
+	background: var(--background-soft);
 }
 
 .heading {
@@ -608,8 +608,12 @@ export default {
     margin: 0 0 1rem 0;
 }
 
-.photos.compact {
+.photos {
-    display: none;
+	background: var(--background-dim);
+}
+
+.releases {
+	border-top: solid 1px var(--crease);
 }
 
 .releases {

assets/components/actors/actors.vue

@@ -64,6 +64,7 @@
 		</div>
 
 		<Pagination
+			v-if="totalCount > 0"
 			:items-total="totalCount"
 			:items-per-page="limit"
 			class="pagination-top"

assets/components/container/container.vue

@@ -1,20 +1,20 @@
 <template>
-    <div
+	<div
-        class="container"
+		class="container"
-        :class="theme"
+		:class="theme"
-    >
+	>
-        <Sidebar
+		<Sidebar
-            v-if="showSidebar"
+			v-if="showSidebar"
-            :toggle-sidebar="toggleSidebar"
+			:toggle-sidebar="toggleSidebar"
-        />
+		/>
 
-        <Header :toggle-sidebar="toggleSidebar" />
+		<Header :toggle-sidebar="toggleSidebar" />
 
-        <div class="content">
+		<div class="content">
-            <!-- key forces rerender when new and old path use same component -->
+			<!-- key forces rerender when new and old path use same component -->
-            <router-view />
+			<router-view />
-        </div>
+		</div>
-    </div>
+	</div>
 </template>
 
 <script>
@@ -26,39 +26,39 @@ import Header from '../header/header.vue';
 import Sidebar from '../sidebar/sidebar.vue';
 
 function theme(state) {
-    return state.ui.theme;
+	return state.ui.theme;
 }
 
 function toggleSidebar(state) {
-    this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar;
+	this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar;
 }
 
 function mounted() {
-    document.addEventListener('click', () => {
+	document.addEventListener('click', () => {
-        EventBus.$emit('blur');
+		EventBus.$emit('blur');
-        this.showSidebar = false;
+		this.showSidebar = false;
-    });
+	});
 }
 
 export default {
-    components: {
+	components: {
-        Header,
+		Header,
-        Sidebar,
+		Sidebar,
-    },
+	},
-    data() {
+	data() {
-        return {
+		return {
-            showSidebar: false,
+			showSidebar: false,
-        };
+		};
-    },
+	},
-    computed: {
+	computed: {
-        ...mapState({
+		...mapState({
-            theme,
+			theme,
-        }),
+		}),
-    },
+	},
-    mounted,
+	mounted,
-    methods: {
+	methods: {
-        toggleSidebar,
+		toggleSidebar,
-    },
+	},
 };
 </script>
 
@@ -71,7 +71,7 @@ export default {
     display: flex;
     flex-direction: column;
     overflow: hidden;
-    background: var(--background-dim);
+    background: var(--background-soft);
     color: var(--text);
 }
 
@@ -85,6 +85,6 @@ export default {
 .content-inner {
     flex-grow: 1;
     padding: 1rem;
-    overflow-y: auto;
+	border-top: solid 1px var(--crease);
 }
 </style>

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;
+    padding: .5rem 1rem 0 1rem;
-    border-top: solid 1px var(--shadow-hint);
     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 }">
+	<div :class="{ compact }">
-        <ul class="filters">
+		<ul class="filters">
-            <li class="filter">
+			<li class="filter">
-                <label
+				<label
-                    class="toggle"
+					class="toggle"
-                    :class="{ active: !localFilter.includes('lesbian') }"
+					:class="{ active: !localFilter.includes('lesbian') }"
-                >
+				>
-                    <input
+					<input
-                        v-model="localFilter"
+						v-model="localFilter"
-                        value="lesbian"
+						value="lesbian"
-                        type="checkbox"
+						type="checkbox"
-                        class="check"
+						class="check"
-                        @change="$emit('set-filter', localFilter)"
+						@change="$emit('set-filter', localFilter)"
-                    >lesbian
+					>lesbian
-                </label>
+				</label>
-            </li>
+			</li>
 
-            <li class="filter">
+			<li class="filter">
-                <label
+				<label
-                    class="toggle"
+					class="toggle"
-                    :class="{ active: !localFilter.includes('gay') }"
+					:class="{ active: !localFilter.includes('gay') }"
-                >
+				>
-                    <input
+					<input
-                        v-model="localFilter"
+						v-model="localFilter"
-                        value="gay"
+						value="gay"
-                        type="checkbox"
+						type="checkbox"
-                        class="check"
+						class="check"
-                        @change="$emit('set-filter', localFilter)"
+						@change="$emit('set-filter', localFilter)"
-                    >gay
+					>gay
-                </label>
+				</label>
-            </li>
+			</li>
 
-            <li class="filter">
+			<li class="filter">
-                <label
+				<label
-                    class="toggle"
+					class="toggle"
-                    :class="{ active: !localFilter.includes('transsexual') }"
+					:class="{ active: !localFilter.includes('transsexual') }"
-                >
+				>
-                    <input
+					<input
-                        v-model="localFilter"
+						v-model="localFilter"
-                        value="transsexual"
+						value="transsexual"
-                        type="checkbox"
+						type="checkbox"
-                        class="check"
+						class="check"
-                        @change="$emit('set-filter', localFilter)"
+						@change="$emit('set-filter', localFilter)"
-                    >trans
+					>trans
-                </label>
+				</label>
-            </li>
+			</li>
-        </ul>
+		</ul>
 
-        <ul class="filters">
+		<ul class="filters">
-            <li class="filter">
+			<li class="filter">
-                <label
+				<label
-                    class="toggle"
+					class="toggle"
-                    :class="{ active: !localFilter.includes('anal') }"
+					:class="{ active: !localFilter.includes('anal') }"
-                >
+				>
-                    <input
+					<input
-                        v-model="localFilter"
+						v-model="localFilter"
-                        value="anal"
+						value="anal"
-                        type="checkbox"
+						type="checkbox"
-                        class="check"
+						class="check"
-                        @change="$emit('set-filter', localFilter)"
+						@change="$emit('set-filter', localFilter)"
-                    >anal
+					>anal
-                </label>
+				</label>
-            </li>
+			</li>
-        </ul>
+		</ul>
-    </div>
+	</div>
 </template>
 
 <script>
 export default {
-    props: {
+	props: {
-        filter: {
+		filter: {
-            type: Array,
+			type: Array,
-            default: () => [],
+			default: () => [],
-        },
+		},
-        compact: {
+		compact: {
-            type: Boolean,
+			type: Boolean,
-            default: false,
+			default: false,
-        },
+		},
-    },
+	},
-    data() {
+	data() {
-        return {
+		return {
-            localFilter: this.filter,
+			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 {

assets/components/home/home.vue

@@ -11,6 +11,7 @@
 			<Releases :releases="releases" />
 
 			<Pagination
+				v-if="totalCount > 0"
 				:items-total="totalCount"
 				:items-per-page="limit"
 				class="pagination-bottom"

assets/components/icon/icon.vue

@@ -1,36 +1,36 @@
 <template>
-    <div
+	<div
-        :title="title"
+		:title="title"
-        :class="{ active }"
+		:class="{ active }"
-        class="icon"
+		class="icon"
-        v-html="svg"
+		v-html="svg"
-    />
+	/>
 </template>
 
 <script>
 export default {
-    props: {
+	props: {
-        icon: {
+		icon: {
-            type: String,
+			type: String,
-            default: null,
+			default: null,
-        },
+		},
-        title: {
+		title: {
-            type: String,
+			type: String,
-            default: null,
+			default: null,
-        },
+		},
-        active: {
+		active: {
-            type: Boolean,
+			type: Boolean,
-            default: false,
+			default: false,
-        },
+		},
-    },
+	},
-    data() {
+	data() {
-        return {
+		return {
-            svg: null,
+			svg: null,
-        };
+		};
-    },
+	},
-    beforeMount() {
+	beforeMount() {
-        this.svg = require(`../../img/icons/${this.icon}.svg`).default;
+		this.svg = require(`../../img/icons/${this.icon}.svg`).default;
-    },
+	},
 };
 </script>
 
@@ -38,7 +38,7 @@ export default {
 @import '../../css/theme';
 
 .icon {
-    fill: $text;
+    fill: var(--text);
     display: inline-block;
     flex-shrink: 0;
     width: 1rem;
@@ -50,10 +50,10 @@ export default {
     }
 
     &.active {
-        fill: $shadow;
+        fill: var(--shadow);
 
         &:hover {
-            fill: $text;
+            fill: var(--text);
             cursor: pointer;
         }
     }

assets/components/networks/network.vue

@@ -208,19 +208,19 @@ export default {
 }
 
 .sidebar {
-    background: $profile;
+    background: var(--profile);
     height: 100%;
     width: 18rem;
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
-    color: $text-contrast;
+    color: var(--text-light);
     overflow: hidden;
 
     .title {
         display: flex;
         justify-content: center;
-        border-bottom: solid 1px $highlight-hint;
+        border-bottom: solid 1px var(--highlight-hint);
     }
 
     &.expanded {
@@ -240,7 +240,7 @@ export default {
     grid-template-columns: 1fr;
     grid-template-rows: repeat(auto-fit, 6rem);
     overflow-y: auto;
-    scrollbar-color: $highlight-weak $profile;
+    scrollbar-color: var(--highlight-weak) var(--profile);
 }
 
 .logo {
@@ -251,7 +251,7 @@ export default {
     object-fit: contain;
     box-sizing: border-box;
     padding: 1rem;
-    filter: $logo-highlight;
+    filter: var(--logo-highlight);
 }
 
 .parent {
@@ -265,8 +265,8 @@ export default {
     flex-direction: column;
     align-items: center;
     flex-shrink: 0;
-    border-bottom: solid 1px $shadow-hint;
+    border-bottom: solid 1px var(--shadow-hint);
-    background: $profile;
+    background: var(--profile);
 
     &.hideable {
         display: none;
@@ -281,7 +281,7 @@ export default {
 
 .sites.compact {
     display: none;
-    background: $profile;
+    background: var(--profile);
     grid-row: 1;
 }
 

assets/components/sidebar/sidebar.vue

@@ -1,117 +1,110 @@
 <template>
-    <div
+	<div
-        class="sidebar"
+		class="sidebar"
-        @click.stop
+		@click.stop
-    >
+	>
-        <div class="sidebar-header">
+		<div class="sidebar-header">
-            <Icon
+			<Icon
-                icon="cross2"
+				icon="cross2"
-                class="sidebar-close"
+				class="sidebar-close"
-                @click.native="toggleSidebar(false)"
+				@click.native="toggleSidebar(false)"
-            />
+			/>
 
-            <router-link
+			<router-link
-                to="/home"
+				to="/home"
-                class="logo-link"
+				class="logo-link"
-                @click.native="toggleSidebar(false)"
+				@click.native="toggleSidebar(false)"
-            >
+			>
-                <h1 class="sidebar-logo">
+				<h1 class="sidebar-logo">
-                    <div
+					<div
-                        class="logo logo-primary"
+						class="logo"
-                        v-html="logoPrimary"
+						v-html="logo"
-                    />
+					/>
+				</h1>
+			</router-link>
+		</div>
 
-                    <div
+		<nav class="nav">
-                        class="logo logo-light"
+			<ul class="nolist">
-                        v-html="logoLight"
+				<li class="nav-item">
-                    />
+					<router-link
-                </h1>
+						v-slot="{ href, isActive, navigate }"
-            </router-link>
+						to="/home"
-        </div>
+						@click.native="toggleSidebar(false)"
+					>
+						<a
+							class="nav-link"
+							:href="href"
+							:class="{ active: isActive }"
+							@click="navigate"
+						>Home</a>
+					</router-link>
+				</li>
 
-        <nav class="nav">
+				<li class="nav-item">
-            <ul class="nolist">
+					<router-link
-                <li class="nav-item">
+						v-slot="{ href, isActive, navigate }"
-                    <router-link
+						to="/actors"
-                        v-slot="{ href, isActive, navigate }"
+						@click.native="toggleSidebar(false)"
-                        to="/home"
+					>
-                        @click.native="toggleSidebar(false)"
+						<a
-                    >
+							class="nav-link"
-                        <a
+							:href="href"
-                            class="nav-link"
+							:class="{ active: isActive }"
-                            :href="href"
+							@click="navigate"
-                            :class="{ active: isActive }"
+						>Actors</a>
-                            @click="navigate"
+					</router-link>
-                        >Home</a>
+				</li>
-                    </router-link>
-                </li>
 
-                <li class="nav-item">
+				<li class="nav-item">
-                    <router-link
+					<router-link
-                        v-slot="{ href, isActive, navigate }"
+						v-slot="{ href, isActive, navigate }"
-                        to="/actors"
+						to="/networks"
-                        @click.native="toggleSidebar(false)"
+						@click.native="toggleSidebar(false)"
-                    >
+					>
-                        <a
+						<a
-                            class="nav-link"
+							class="nav-link"
-                            :href="href"
+							:href="href"
-                            :class="{ active: isActive }"
+							:class="{ active: isActive }"
-                            @click="navigate"
+							@click="navigate"
-                        >Actors</a>
+						>Sites</a>
-                    </router-link>
+					</router-link>
-                </li>
+				</li>
 
-                <li class="nav-item">
+				<li class="nav-item">
-                    <router-link
+					<router-link
-                        v-slot="{ href, isActive, navigate }"
+						v-slot="{ href, isActive, navigate }"
-                        to="/networks"
+						to="/tags"
-                        @click.native="toggleSidebar(false)"
+						@click.native="toggleSidebar(false)"
-                    >
+					>
-                        <a
+						<a
-                            class="nav-link"
+							class="nav-link"
-                            :href="href"
+							:href="href"
-                            :class="{ active: isActive }"
+							:class="{ active: isActive }"
-                            @click="navigate"
+							@click="navigate"
-                        >Sites</a>
+						>Tags</a>
-                    </router-link>
+					</router-link>
-                </li>
+				</li>
-
+			</ul>
-                <li class="nav-item">
+		</nav>
-                    <router-link
+	</div>
-                        v-slot="{ href, isActive, navigate }"
-                        to="/tags"
-                        @click.native="toggleSidebar(false)"
-                    >
-                        <a
-                            class="nav-link"
-                            :href="href"
-                            :class="{ active: isActive }"
-                            @click="navigate"
-                        >Tags</a>
-                    </router-link>
-                </li>
-            </ul>
-        </nav>
-    </div>
 </template>
 
 <script>
-import logoPrimary from '../../img/logo.svg';
+import logo from '../../img/logo.svg';
-import logoLight from '../../img/logo-light.svg';
 
 export default {
-    props: {
+	props: {
-        toggleSidebar: {
+		toggleSidebar: {
-            type: Function,
+			type: Function,
-            default: null,
+			default: null,
-        },
+		},
-    },
+	},
-    data() {
+	data() {
-        return {
+		return {
-            logoPrimary,
+			logo,
-            logoLight,
+		};
-        };
+	},
-    },
 };
 </script>
 
@@ -123,8 +116,8 @@ export default {
     height: 100%;
     position: absolute;
     z-index: 10;
-    color: var(--text-light);
+    color: var(--text);
-    background: var(--primary);
+    background: var(--background);
     box-shadow: 0 0 3px var(--darken);
 }
 
@@ -140,10 +133,10 @@ export default {
     width: 1.5rem;
     height: 100%;
     padding: 0 1rem;
-    fill: var(--lighten);
+    fill: var(--darken);
 
     &:hover {
-        fill: var(--text-light);
+        fill: var(--text);
         cursor: pointer;
     }
 }
@@ -166,10 +159,7 @@ export default {
     display: flex;
     align-items: center;
     margin: 0;
-}
+	fill: var(--primary);
-
-.logo-primary {
-    display: none;
 }
 
 .nav-item {
@@ -177,18 +167,18 @@ export default {
 }
 
 .nav-link {
-    color: var(--lighten-strong);
+    color: var(--shadow-strong);
     display: block;
     padding: 1rem;
     text-decoration: none;
     font-weight: bold;
 
-    &:hover,
+	&:hover {
-    &.active {
+        color: var(--primary);
-        background: var(--shadow-hint);
     }
 
     &.active {
+		background: var(--primary);
         color: var(--text-light);
     }
 }
@@ -196,17 +186,20 @@ export default {
 .dark .sidebar {
     background: var(--profile);
 
-    .nav-link.active {
+	.nav-link {
-        color: var(--primary);
+		color: var(--shadow);
-        background: var(--shadow-hint);
-    }
 
-    .logo-primary {
+		&.active {
-        display: flex;
+			color: var(--text-light);
-    }
+		}
+	}
 
-    .logo-light {
+	.sidebar-close {
-        display: none;
+		fill: var(--lighten);
-    }
+
+		&:hover {
+			fill: var(--text-light);
+		}
+	}
 }
 </style>

assets/components/sites/site.vue

@@ -3,8 +3,6 @@
 		v-if="site"
 		class="content site"
 	>
-		<FilterBar :fetch-releases="fetchSite" />
-
 		<div class="header">
 			<a
 				v-tooltip.bottom="site.url && `Go to ${site.url}`"
@@ -43,6 +41,8 @@
 			</router-link>
 		</div>
 
+		<FilterBar :fetch-releases="fetchSite" />
+
 		<div class="content-inner">
 			<Releases :releases="releases" />
 		</div>

assets/css/_theme.scss

@@ -56,6 +56,9 @@ $female: #f0a;
     --logo-shadow: drop-shadow(1px 0 0 $shadow-weak) drop-shadow(-1px 0 0 $shadow-weak) drop-shadow(0 1px 0 $shadow-weak) drop-shadow(0 -1px 0 $shadow-weak);
     --logo-highlight: drop-shadow(0 0 1px $highlight);
 
+    --male: #0af;
+    --female: #f0a;
+
     --alert: #f00;
     --warn: #fa0;
 }
@@ -66,6 +69,7 @@ $female: #f0a;
 
     --background: #fff;
     --background-dim: #fafafa;
+    --background-soft: #fdfdfd;
 
     --profile: #222;
     --tile: #2a2a2a;
@@ -73,8 +77,7 @@ $female: #f0a;
     --link: #dd6688;
     --empty: #333;
 
-    --male: #0af;
+	--crease: #eaeaea;
-    --female: #f0a;
 
     --shadow: rgba(0, 0, 0, .5);
     --shadow-extreme: rgba(0, 0, 0, .9);
@@ -97,6 +100,7 @@ $female: #f0a;
 
     --background: #222;
     --background-dim: #181818;
+    --background-soft: #111;
 
     --profile: #222;
     --tile: #2a2a2a;
@@ -104,8 +108,7 @@ $female: #f0a;
     --link: #dd6688;
     --empty: #333;
 
-    --male: #0af;
+	--crease: #222;
-    --female: #f0a;
 
     --shadow: rgba(255, 255, 255, .5);
     --shadow-extreme: rgba(255, 255, 255, .9);

assets/img/logo-light.svg

@@ -1,60 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   id="svg8"
-   version="1.1"
-   viewBox="0 0 31.051453 7.9586663"
-   height="7.9586663mm"
-   width="31.051453mm">
-  <defs
-     id="defs2" />
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     transform="translate(-77.20239,-97.922958)"
-     id="layer1">
-    <g
-       id="text4520"
-       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff6c88;fill-opacity:1;stroke:none;stroke-width:0.26458332"
-       aria-label="traxxx">
-      <path
-         id="path828"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Bold';fill:#ffffff;fill-opacity:1;stroke-width:0.26458332"
-         d="m 77.890306,105.74404 h 1.407584 v -4.58258 h 0.846666 V 99.880875 H 79.29789 v -1.957917 h -1.407584 v 1.957917 H 77.20239 v 1.280585 h 0.687916 z" />
-      <path
-         id="path830"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Bold';fill:#ffffff;fill-opacity:1;stroke-width:0.26458332"
-         d="M 80.917117,105.74404 H 82.3247 v -3.25967 c -0.03175,-0.86783 0.41275,-1.35466 1.259417,-1.38641 v -1.354668 h -0.105834 c -0.60325,0 -0.899583,0.169333 -1.27,0.709078 v -0.571495 h -1.291166 z" />
-      <path
-         id="path832"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Bold';fill:#ffffff;fill-opacity:1;stroke-width:0.26458332"
-         d="m 90.071688,99.880875 h -1.291166 v 0.783165 c -0.486833,-0.64558 -1.068917,-0.920748 -1.915583,-0.920748 -1.735667,0 -2.9845,1.301748 -2.9845,3.090328 0,1.76742 1.23825,3.048 2.95275,3.048 0.8255,0 1.386416,-0.254 1.947333,-0.89958 v 0.762 h 1.291166 z m -3.058583,1.153585 c 1.005417,0 1.725084,0.75141 1.725084,1.82033 0,0.42333 -0.169334,0.91017 -0.423334,1.2065 -0.28575,0.34925 -0.740833,0.52917 -1.280583,0.52917 -1.026583,0 -1.735667,-0.6985 -1.735667,-1.72509 0,-1.06891 0.709084,-1.83091 1.7145,-1.83091 z" />
-      <path
-         id="path834"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Bold';fill:#ffffff;fill-opacity:1;stroke-width:0.26458332"
-         d="m 90.558521,105.74404 h 1.693333 l 1.227667,-2.01083 1.227666,2.01083 h 1.693334 l -2.084917,-3.02683 1.788583,-2.836335 h -1.5875 l -1.037166,1.767415 -1.058334,-1.767415 h -1.5875 l 1.799167,2.836335 z" />
-      <path
-         id="path836"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Bold';fill:#ffffff;fill-opacity:1;stroke-width:0.26458332"
-         d="m 96.485181,105.74404 h 1.693334 l 1.227666,-2.01083 1.227669,2.01083 h 1.69333 l -2.08492,-3.02683 1.78859,-2.836335 h -1.5875 l -1.037169,1.767415 -1.058333,-1.767415 h -1.5875 l 1.799167,2.836335 z" />
-      <path
-         id="path838"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Bold';fill:#ffffff;fill-opacity:1;stroke-width:0.26458332"
-         d="m 102.41184,105.74404 h 1.69334 l 1.22766,-2.01083 1.22767,2.01083 h 1.69333 l -2.08491,-3.02683 1.78858,-2.836335 h -1.5875 l -1.03717,1.767415 -1.05833,-1.767415 h -1.5875 l 1.79917,2.836335 z" />
-    </g>
-  </g>
-</svg>

assets/img/logo.svg

@@ -1,90 +1,12 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="31.051mm" height="7.9587mm" version="1.1" viewBox="0 0 31.051 7.9587" xmlns="http://www.w3.org/2000/svg">
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
+ <g transform="translate(-77.202 -97.923)">
-
+  <g stroke-width=".26458" aria-label="traxxx">
-<svg
+   <path d="m77.89 105.74h1.4076v-4.5826h0.84667v-1.2806h-0.84667v-1.9579h-1.4076v1.9579h-0.68792v1.2806h0.68792z"/>
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   <path d="m80.917 105.74h1.4076v-3.2597c-0.03175-0.86783 0.41275-1.3547 1.2594-1.3864v-1.3547h-0.10583c-0.60325 0-0.89958 0.16933-1.27 0.70908v-0.5715h-1.2912z"/>
-   xmlns:cc="http://creativecommons.org/ns#"
+   <path d="m90.072 99.881h-1.2912v0.78316c-0.48683-0.64558-1.0689-0.92075-1.9156-0.92075-1.7357 0-2.9845 1.3017-2.9845 3.0903 0 1.7674 1.2382 3.048 2.9528 3.048 0.8255 0 1.3864-0.254 1.9473-0.89958v0.762h1.2912zm-3.0586 1.1536c1.0054 0 1.7251 0.75141 1.7251 1.8203 0 0.42333-0.16933 0.91017-0.42333 1.2065-0.28575 0.34925-0.74083 0.52917-1.2806 0.52917-1.0266 0-1.7357-0.6985-1.7357-1.7251 0-1.0689 0.70908-1.8309 1.7145-1.8309z"/>
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   <path d="m90.559 105.74h1.6933l1.2277-2.0108 1.2277 2.0108h1.6933l-2.0849-3.0268 1.7886-2.8363h-1.5875l-1.0372 1.7674-1.0583-1.7674h-1.5875l1.7992 2.8363z"/>
-   xmlns:svg="http://www.w3.org/2000/svg"
+   <path d="m96.485 105.74h1.6933l1.2277-2.0108 1.2277 2.0108h1.6933l-2.0849-3.0268 1.7886-2.8363h-1.5875l-1.0372 1.7674-1.0583-1.7674h-1.5875l1.7992 2.8363z"/>
-   xmlns="http://www.w3.org/2000/svg"
+   <path d="m102.41 105.74h1.6933l1.2277-2.0108 1.2277 2.0108h1.6933l-2.0849-3.0268 1.7886-2.8363h-1.5875l-1.0372 1.7674-1.0583-1.7674h-1.5875l1.7992 2.8363z"/>
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="31.051453mm"
-   height="7.9586663mm"
-   viewBox="0 0 31.051453 7.9586663"
-   version="1.1"
-   id="svg8"
-   sodipodi:docname="logo.svg"
-   inkscape:version="0.92.4 5da689c313, 2019-01-14">
-  <defs
-     id="defs2" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="6.0071666"
-     inkscape:cx="20.137868"
-     inkscape:cy="18.279076"
-     inkscape:document-units="mm"
-     inkscape:current-layer="text4520"
-     showgrid="false"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:window-width="1920"
-     inkscape:window-height="1026"
-     inkscape:window-x="1047"
-     inkscape:window-y="930"
-     inkscape:window-maximized="1" />
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-77.20239,-97.922958)">
-    <g
-       aria-label="traxxx"
-       style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ff6c88;fill-opacity:1;stroke:none;stroke-width:0.26458332"
-       id="text4520">
-      <path
-         d="m 77.890306,105.74404 h 1.407584 v -4.58258 h 0.846666 V 99.880875 H 79.29789 v -1.957917 h -1.407584 v 1.957917 H 77.20239 v 1.280585 h 0.687916 z"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Bold';fill:#ff6c88;fill-opacity:1;stroke-width:0.26458332"
-         id="path828" />
-      <path
-         d="M 80.917117,105.74404 H 82.3247 v -3.25967 c -0.03175,-0.86783 0.41275,-1.35466 1.259417,-1.38641 v -1.354668 h -0.105834 c -0.60325,0 -0.899583,0.169333 -1.27,0.709078 v -0.571495 h -1.291166 z"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Bold';fill:#ff6c88;fill-opacity:1;stroke-width:0.26458332"
-         id="path830" />
-      <path
-         d="m 90.071688,99.880875 h -1.291166 v 0.783165 c -0.486833,-0.64558 -1.068917,-0.920748 -1.915583,-0.920748 -1.735667,0 -2.9845,1.301748 -2.9845,3.090328 0,1.76742 1.23825,3.048 2.95275,3.048 0.8255,0 1.386416,-0.254 1.947333,-0.89958 v 0.762 h 1.291166 z m -3.058583,1.153585 c 1.005417,0 1.725084,0.75141 1.725084,1.82033 0,0.42333 -0.169334,0.91017 -0.423334,1.2065 -0.28575,0.34925 -0.740833,0.52917 -1.280583,0.52917 -1.026583,0 -1.735667,-0.6985 -1.735667,-1.72509 0,-1.06891 0.709084,-1.83091 1.7145,-1.83091 z"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Bold';fill:#ff6c88;fill-opacity:1;stroke-width:0.26458332"
-         id="path832" />
-      <path
-         d="m 90.558521,105.74404 h 1.693333 l 1.227667,-2.01083 1.227666,2.01083 h 1.693334 l -2.084917,-3.02683 1.788583,-2.836335 h -1.5875 l -1.037166,1.767415 -1.058334,-1.767415 h -1.5875 l 1.799167,2.836335 z"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Bold';fill:#ff6c88;fill-opacity:1;stroke-width:0.26458332"
-         id="path834" />
-      <path
-         d="m 96.485181,105.74404 h 1.693334 l 1.227666,-2.01083 1.227669,2.01083 h 1.69333 l -2.08492,-3.02683 1.78859,-2.836335 h -1.5875 l -1.037169,1.767415 -1.058333,-1.767415 h -1.5875 l 1.799167,2.836335 z"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Bold';fill:#ff6c88;fill-opacity:1;stroke-width:0.26458332"
-         id="path836" />
-      <path
-         d="m 102.41184,105.74404 h 1.69334 l 1.22766,-2.01083 1.22767,2.01083 h 1.69333 l -2.08491,-3.02683 1.78858,-2.836335 h -1.5875 l -1.03717,1.767415 -1.05833,-1.767415 h -1.5875 l 1.79917,2.836335 z"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:'URW Gothic';-inkscape-font-specification:'URW Gothic Bold';fill:#ff6c88;fill-opacity:1;stroke-width:0.26458332"
-         id="path838" />
-    </g>
   </g>
+ </g>
 </svg>

assets/js/fragments.js

@@ -42,6 +42,12 @@ const actorFields = `
 			path
 			thumbnail
 			lazy
+			sfw: sfwMedia {
+				id
+				path
+				thumbnail
+				lazy
+			}
 		}
         network {
             id

package.json

@@ -21,14 +21,10 @@
         "seed-make": "knex seed:make",
         "seed": "knex seed:run",
         "flush": "cli-confirm \"This completely purges the database, are you sure?\" && knex-migrate down --to 0 && knex-migrate up && knex seed:run",
-        "thumbs-tag": "mkdir -p \"public/img/tags/$TAG/thumbs\"; mogrify -path \"public/img/tags/$TAG/thumbs\" -resize x240\\> -quality 90% \"public/img/tags/$TAG/*.jpeg\"",
+        "tag-thumbs": "cd \"public/img/tags/$TAG\"; mkdir -p thumbs lazy; mogrify -path thumbs -resize x240\\> -quality 90% *.jpeg; mogrify -path lazy -resize x90\\> -quality 90% *.jpeg",
-        "thumbs-tags": "for dir in public/img/tags/*; do mkdir -p \"$dir/thumbs\"; mogrify -path \"$dir/thumbs\" -resize x240\\> -quality 90% \"$dir/*.jpeg\"; done",
+        "tags-thumbs": "for dir in public/img/tags/*; do mkdir -p \"$dir/thumbs\" \"$dir/lazy\"; mogrify -path \"$dir/thumbs\" -resize x280\\> -quality 90% \"$dir/*.jpeg\"; mogrify -path \"$dir/lazy\" -resize x90\\> -quality 90% \"$dir/*.jpeg\"; done",
-        "thumbs-logo": "mkdir -p \"public/img/logos/$LOGO/thumbs\"; mogrify -path \"public/img/logos/$LOGO/thumbs\" -resize x80\\> \"public/img/logos/$LOGO/*.png\"",
+        "logo-thumbs": "cd \"public/img/logos/$LOGO\"; mkdir -p thumbs lazy; mogrify -path thumbs -resize x80\\> *.png; mogrify -path lazy -resize x25\\> *.png",
-        "thumbs-logos": "for dir in public/img/logos/*; do mkdir -p \"$dir/thumbs\"; mogrify -path \"$dir/thumbs\" -resize x80\\> \"$dir/*.png\"; done",
+        "logos-thumbs": "for dir in public/img/logos/*; do mkdir -p \"$dir/thumbs\" \"$dir/lazy\"; mogrify -path \"$dir/thumbs\" -resize x80\\> \"$dir/*.png\"; mogrify -path \"$dir/lazy\" -resize x25\\> \"$dir/*.png\"; done"
-        "lazy-tag": "mkdir -p \"public/img/tags/$TAG/lazy\"; mogrify -path \"public/img/tags/$TAG/lazy\" -resize x90\\> -quality 90% \"public/img/tags/$TAG/*.jpeg\"",
-        "lazy-tags": "for dir in public/img/tags/*; do mkdir -p \"$dir/lazy\"; mogrify -path \"$dir/lazy\" -resize x90\\> -quality 90% \"$dir/*.jpeg\"; done",
-        "lazy-logo": "mkdir -p \"public/img/logos/$LOGO/lazy\"; mogrify -path \"public/img/logos/$LOGO/lazy\" -resize x25\\> \"public/img/logos/$LOGO/*.png\"",
-        "lazy-logos": "for dir in public/img/logos/*; do mkdir -p \"$dir/lazy\"; mogrify -path \"$dir/lazy\" -resize x25\\> \"$dir/*.png\"; done"
     },
     "repository": {
         "type": "git",