assets/components/album/album.vue

@@ -92,7 +92,7 @@ export default {
 	position: fixed;
 	top: 0;
 	left: 0;
-	background: var(--darken-extreme);
+	background: var(--shadow-extreme);
 	z-index: 10;
 }
 
@@ -151,7 +151,7 @@ export default {
 
 .item-link {
 	position: relative;
-	margin: 0 0 .5rem 0;
+	margin: 0 0 1rem 0;
 	overflow: hidden;
 
 	&:hover .item-comment {
@@ -182,12 +182,8 @@ export default {
 }
 
 @media(max-width: $breakpoint-giga) {
-	.album-items {
+	.album-items.portrait {
-		grid-template-columns: repeat(auto-fill, minmax(22.5rem, 1fr));
+		grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
-
-		.portrait {
-			grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
-		}
 	}
 }
 
@@ -200,24 +196,18 @@ export default {
 @media(max-width: $breakpoint-kilo) {
 	.album-items {
 		grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
-		grid-gap: 0 .5rem;
-		padding: .5rem;
-	}
-
-	.item-link {
-		margin: 0 0 .25rem 0;
 	}
 }
 
 @media(max-width: $breakpoint) {
 	.album-items {
-		grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
+		grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
 	}
 }
 
 @media(max-width: $breakpoint-micro) {
 	.album-items {
-		grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+		grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
 	}
 }
 

assets/components/releases/release.vue

@@ -51,10 +51,12 @@
 				</h2>
 			</div>
 
-			<Tags
+			<div
 				v-if="release.tags.length > 0"
-				:tags="release.tags"
+				class="row"
-			/>
+			>
+				<Tags :tags="release.tags" />
+			</div>
 
 			<div class="row associations">
 				<ul class="actors nolist">
@@ -318,8 +320,6 @@ export default {
 .title {
 	display: inline-flex;
 	margin: 0;
-	font-size: 1.5rem;
-	line-height: 1.25;
 
 	.icon {
 		fill: var(--shadow);
@@ -452,10 +452,6 @@ export default {
         display: inline-block;
     }
 
-	.title {
-		font-size: 1.25rem;
-	}
-
     .actors {
         grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
     }

assets/components/releases/tags.vue

@@ -1,60 +1,19 @@
 <template>
-	<div
+	<ul class="tags nolist">
-		class="tags-container"
+		<li
-		:class="{ overflowing }"
+			v-for="tag in tags"
-	>
+			:key="`tag-${tag.slug}`"
-		<ul
+			class="tag"
-			ref="tags"
-			class="tags nolist"
-			:class="{ expanded }"
 		>
-			<li
+			<a
-				v-for="tag in tags"
+				:href="`/tag/${tag.slug}`"
-				:key="`tag-${tag.slug}`"
+				class="link"
-				class="tag"
+			>{{ tag.name }}</a>
-			>
+		</li>
-				<a
+	</ul>
-					:href="`/tag/${tag.slug}`"
-					class="link"
-				>{{ tag.name }}</a>
-			</li>
-		</ul>
-
-		<button
-			v-if="overflowing && !expanded"
-			class="tags-more"
-			@click="expanded = true"
-		>More tags</button>
-
-		<button
-			v-if="expanded"
-			class="tags-more"
-			@click="expanded = false"
-		>Fewer tags</button>
-	</div>
 </template>
 
 <script>
-function updateOverflowing() {
-	const containerBoundaries = this.$refs.tags.getBoundingClientRect();
-	const containerBottom = containerBoundaries.top + containerBoundaries.height;
-
-	this.overflowing = Array.from(this.$refs.tags.querySelectorAll('.tag')).some((tag) => {
-		const tagBoundaries = tag.getBoundingClientRect();
-
-		return tagBoundaries.top > containerBottom;
-	});
-}
-
-function mounted() {
-	window.addEventListener('resize', this.updateOverflowing);
-	this.updateOverflowing();
-}
-
-function beforeUnmount() {
-	window.removeEventListener('resize', this.updateOverflowing);
-}
-
 export default {
 	props: {
 		tags: {
@@ -62,39 +21,10 @@ export default {
 			default: () => [],
 		},
 	},
-	data() {
-		return {
-			overflowing: false,
-			expanded: false,
-		};
-	},
-	mounted,
-	beforeUnmount,
-	methods: {
-		updateOverflowing,
-	},
 };
 </script>
 
 <style lang="scss" scoped>
-.tags-container {
-	margin: 0 0 1.5rem 0;
-
-	&.overflowing {
-		margin: 0 0 .5rem 0;
-	}
-}
-
-.tags {
-	max-height: 4.6rem;
-	padding: 2px 1rem 0 1rem;
-	overflow: hidden;
-
-	&.expanded {
-		max-height: unset;
-	}
-}
-
 .tag .link {
 	color: var(--link);
     background: var(--background);
@@ -109,21 +39,4 @@ export default {
         color: var(--primary);
     }
 }
-
-.tags-more {
-	width: 100%;
-	background: none;
-	padding: .5rem 1rem;
-	border: solid 1px var(--shadow-hint);
-	border-left: none;
-	border-right: none;
-	margin: .25rem 0 .5rem 0;
-	color: var(--shadow);
-	font-size: .9rem;
-
-	&:hover {
-		cursor: pointer;
-		color: var(--shadow-strong);
-	}
-}
 </style>

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "traxxx",
-    "version": "1.167.7",
+    "version": "1.167.6",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "traxxx",
-    "version": "1.167.7",
+    "version": "1.167.6",
     "description": "All the latest porn releases in one place",
     "main": "src/app.js",
     "scripts": {