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

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;
 }