Various tag photos.

assets/components/tags/tags.vue

@@ -89,6 +89,7 @@ async function mounted() {
 		],
 		roleplay: [
 			'family',
+			'parody',
 			'schoolgirl',
 			'nurse',
 			'maid',

assets/components/tags/tile.vue

@@ -1,10 +1,13 @@
 <template>
-	<router-link
-		:to="{ name: 'tag', params: { tagSlug: tag.slug, range: 'latest' } }"
-		:title="tag.name"
+	<div
+		v-if="tag.poster"
 		class="tile"
 	>
-		<template v-if="tag.poster">
+		<router-link
+			:to="{ name: 'tag', params: { tagSlug: tag.slug, range: 'latest' } }"
+			:title="tag.name"
+			class="poster-link"
+		>
 			<img
 				v-if="!lazy && !sfw"
 				:src="`/img/${tag.poster.thumbnail}`"
@@ -38,10 +41,19 @@
 				:alt="tag.name"
 				class="poster"
 			>
-		</template>
+		</router-link>
 
-		<span class="title">{{ tag.name }}</span>
-	</router-link>
+		<router-link
+			class="title"
+			:to="{ name: 'tag', params: { tagSlug: tag.slug, range: 'latest' } }"
+			:title="tag.name"
+		>{{ tag.name }}</router-link>
+	</div>
+
+	<span
+		v-else
+		class="title"
+	>{{ tag.name }}</span>
 </template>
 
 <script>
@@ -70,51 +82,35 @@ export default {
 @import 'theme';
 
 .tile {
-    color: var(--text-light);
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
     box-sizing: border-box;
     position: relative;
 	text-decoration: none;
-    box-shadow: 0 0 3px var(--darken-weak);
-	overflow: hidden;
 }
 
 .poster {
     width: 100%;
-	height: 100%;
-    object-fit: cover;
-    object-position: 50% 100%;
+    box-shadow: 0 0 3px var(--darken-weak);
 }
 
 .title {
-    width: 100%;
-    display: flex;
+	display: inline-block;
     box-sizing: border-box;
-    padding: .5rem 1rem;
-    position: absolute;
-    bottom: 0;
-    background: var(--darken);
+    padding: .25rem .5rem .25rem 1rem;
 	overflow: hidden;
 	white-space: nowrap;
-    font-size: 1rem;
+    color: var(--shadow-strong);
+	text-decoration: none;
     font-weight: bold;
     text-transform: capitalize;
-    text-shadow: 0 0 3px var(--darken-strong);
 	text-overflow: ellipsis;
 }
 
-@media(max-width: $breakpoint) {
-	.tile {
-		position: initial;
-	}
+.poster-link:hover + .title,
+.title:hover {
+	color: var(--primary)
+}
 
-	.title {
-		position: initial;
-		color: var(--text);
-		background: var(--background);
-		text-shadow: none;
-	}
+.poster-link:hover .poster {
+	box-shadow: 0 0 3px var(--darken);
 }
 </style>