Added movie tile. Fixed actor header. Larger breakpoint for nav menu.

assets/components/actors/actor.vue

@@ -29,7 +29,7 @@
 			/>
 		</div>
 
-		<div class="actor-inner">
+		<div class="content-inner actor-inner">
 			<div
 				class="profile"
 				:class="{ expanded: bioExpanded, 'with-avatar': !!actor.avatar }"
@@ -714,8 +714,13 @@ export default {
         margin: 1rem 0 0 0;
     }
 
+	.actor-header {
+		padding: .5rem 1rem;
+	}
+
     .header-name {
         flex-grow: 1;
+		font-size: 1.3rem;
     }
 }
 </style>

assets/components/header/header.vue

@@ -356,7 +356,7 @@ export default {
     }
 }
 
-@media(max-width: $breakpoint-micro) {
+@media(max-width: $breakpoint) {
 	.nav {
         display: none;
     }

assets/components/movies/movies.vue

@@ -1,11 +1,48 @@
 <template>
 	<div class="movies">
-		<h1 class="heading">Movies</h1>
+		<div class="tiles">
+			<Movie
+				v-for="movie in movies"
+				:key="`movie-${movie.id}`"
+				:movie="movie"
+			/>
+		</div>
 	</div>
 </template>
 
+<script>
+import Movie from './tile.vue';
+
+async function mounted() {
+	const { movies, totalCount } = await this.$store.dispatch('fetchMovies', {
+		limit: 30,
+	});
+
+	this.movies = movies;
+	this.totalCount = totalCount;
+}
+
+export default {
+	components: {
+		Movie,
+	},
+	data() {
+		return {
+			movies: [],
+			totalCount: 0,
+		};
+	},
+	mounted,
+};
+</script>
+
 <style lang="scss">
 .movies {
     padding: 1rem;
 }
+
+.tiles {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, 12rem);
+}
 </style>

assets/components/movies/tile.vue

@@ -0,0 +1,38 @@
+<template>
+	<div class="tile">
+		<div class="details">{{ movie.entity.name }}</div>
+		<h3 class="title">{{ movie.title }}</h3>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		movie: {
+			type: Object,
+			default: null,
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.tile {
+	background: var(--background);
+	box-shadow: 0 0 3px var(--darken);
+}
+
+.details {
+	color: var(--text-light);
+	background: var(--profile);
+	padding: .5rem 1rem;
+    font-size: .8rem;
+	font-weight: bold;
+}
+
+.title {
+	padding: 1rem;
+	margin: 0;
+	font-size: 1rem;
+}
+</style>

assets/components/tags/tags.vue

@@ -48,13 +48,11 @@ async function mounted() {
 			'creampie',
 			'squirting',
 		],
-		ethnicity: [
+		appearance: [
 			'asian',
 			'ebony',
 			'latina',
 			'caucasian',
-		],
-		appearance: [
 			'natural-boobs',
 			'fake-boobs',
 			'blonde',

assets/components/tags/tile.vue

@@ -3,12 +3,6 @@
 		v-if="tag.poster"
 		class="tile"
 	>
-		<router-link
-			class="title"
-			:to="{ name: 'tag', params: { tagSlug: tag.slug, range: 'latest' } }"
-			:title="tag.name"
-		>{{ tag.name }}</router-link>
-
 		<router-link
 			:to="{ name: 'tag', params: { tagSlug: tag.slug, range: 'latest' } }"
 			:title="tag.name"
@@ -48,6 +42,13 @@
 				class="poster"
 			>
 		</router-link>
+
+		<router-link
+			class="title"
+			:to="{ name: 'tag', params: { tagSlug: tag.slug, range: 'latest' } }"
+			:title="tag.name"
+		>{{ tag.name }}</router-link>
+
 	</div>
 
 	<span
@@ -85,15 +86,10 @@ export default {
     box-sizing: border-box;
     position: relative;
 	text-decoration: none;
+	font-size: 0;
 
-	&:hover {
-		.title {
-			color: var(--primary);
-		}
-
-		.poster {
-			box-shadow: 0 0 3px var(--darken);
-		}
+	&:hover .poster {
+		box-shadow: 0 0 3px var(--darken);
 	}
 }
 
@@ -103,13 +99,15 @@ export default {
 }
 
 .title {
-	display: inline-block;
+	display: block;
     box-sizing: border-box;
-    padding: .25rem 1rem .25rem .5rem;
+    padding: .5rem;
 	overflow: hidden;
 	white-space: nowrap;
-    color: var(--shadow-strong);
+	color: var(--text-light);
+	background: var(--profile);
 	text-decoration: none;
+	font-size: .9rem;
     font-weight: bold;
     text-transform: capitalize;
 	text-overflow: ellipsis;