Hiding header nav bar on small screens. Improved scene and movie tile scaling, added thumbnail placeholder. Added pagination to movies page.

components/header/header.vue

@@ -218,6 +218,7 @@ async function logout() {
 	box-shadow: inset 0 0 3px var(--shadow-weak-40);
 
 	.input {
+		width: 14rem;
 		padding: .5rem 0 .5rem 1rem;
 		border: none;
 		margin: 0;
@@ -317,4 +318,16 @@ async function logout() {
 		fill: var(--error);
 	}
 }
+
+@media(--small) {
+	.search .input {
+		width: 10rem;
+	}
+}
+
+@media(--small-10) {
+	.nav-list {
+		display: none;
+	}
+}
 </style>

components/pagination/pagination.vue

@@ -3,7 +3,7 @@
 		<div
 			v-if="currentPage === pageTotal && total > env.maxMatches"
 			class="more"
-		>Results are truncated, apply a filter to find more.</div>
+		>Can't find what you're looking for? Narrow down the results using a filter.</div>
 
 		<nav class="pagination">
 			<ul class="pages nolist">

components/scenes/scenes.vue

@@ -293,7 +293,7 @@ function updateFilter(prop, value, reload = true) {
 
 .scenes {
 	display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
 	gap: .75rem .5rem;
 	padding: .5rem 1rem 1rem 1rem;
 }
@@ -330,4 +330,16 @@ function updateFilter(prop, value, reload = true) {
 		display: flex;
 	}
 }
+
+@media(--small-10) {
+	.scenes {
+		grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+	}
+}
+
+@media(--small-20) {
+	.scenes {
+		grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+	}
+}
 </style>

components/scenes/tile.vue

@@ -18,6 +18,11 @@
 					loading="lazy"
 					class="thumbnail"
 				>
+
+				<Icon
+					v-else
+					icon="clapboard"
+				/>
 			</Link>
 
 			<Icon
@@ -166,19 +171,31 @@ async function unstash() {
 
 .poster-container {
 	position: relative;
+	overflow: hidden;
+	font-size: 0;
 }
 
 .poster {
-	display: block;
-	height: 14rem;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	aspect-ratio: 16/9;
 	border-radius: .25rem .25rem 0 0;
 	overflow: hidden;
+	background: var(--background-dark-20);
+
+	.icon {
+		width: 3rem;
+		height: 3rem;
+		fill: var(--shadow-weak-40);
+	}
 }
 
 .thumbnail {
-	height: 100%;
 	width: 100%;
+	height: 100%;
 	object-fit: cover;
+	object-position: 50% 50%;
 	background-size: cover;
 	background-position: center;
 }