Improved actor bio responsiveness, showing secondary actor photos.

pages/actors/@actorId/+Page.vue

@@ -35,6 +35,21 @@
 		<div class="content">
 			<Bio :actor="actor" />
 
+			<div class="photos nobar">
+				<img
+					v-for="photo in photos"
+					:key="`photo-${photo.id}`"
+					:src="getPath(photo, 'thumbnail')"
+					:width="photo.width"
+					:height="photo.height"
+					:style="{ 'background-image': `url('${getPath(photo, 'lazy')}')` }"
+					:title="photo.credit && `© ${photo.credit}`"
+					loading="lazy"
+					class="photo"
+					:class="{ avatar: photo.isAvatar }"
+				>
+			</div>
+
 			<Scenes />
 		</div>
 	</div>
@@ -43,6 +58,8 @@
 <script setup>
 import { inject } from 'vue';
 
+import getPath from '#/src/get-path.js';
+
 import Bio from '#/components/actors/bio.vue';
 import Gender from '#/components/actors/gender.vue';
 import Scenes from '#/components/scenes/scenes.vue';
@@ -51,6 +68,14 @@ import Heart from '#/components/stashes/heart.vue';
 const pageContext = inject('pageContext');
 const { pageProps } = pageContext;
 const { actor } = pageProps;
+
+const photos = [
+	actor.avatar && {
+		...actor.avatar,
+		isAvatar: true,
+	},
+	...actor.photos,
+].filter(Boolean);
 </script>
 
 <style scoped>
@@ -81,12 +106,6 @@ const { actor } = pageProps;
     flex-shrink: 0;
 }
 
-.header-gender {
-    display: inline-block;
-    margin: 0 0 0 .5rem;
-    transform: translate(0, .125rem);
-}
-
 .header-social {
     overflow: hidden;
     white-space: nowrap;
@@ -103,4 +122,39 @@ const { actor } = pageProps;
 .bookmarks {
 	margin-right: .5rem;
 }
+
+.photos {
+	display: flex;
+	gap: 0.5rem;
+	padding: .5rem;
+	border-bottom: solid 1px var(--shadow-weak-40);
+	background: var(--background-base-10);
+	overflow-x: auto;
+}
+
+.photo {
+	height: 14rem;
+	width: auto;
+	object-fit: cover;
+	object-position: 50% 0;
+	background-size: cover;
+	background-position: center;
+	box-shadow: 0 0px 3px var(--shadow-weak-30);
+
+	&.avatar {
+		display: none;
+	}
+}
+
+@media(--compact) {
+	.photo.avatar {
+		display: inline-block;
+	}
+}
+
+@media(--small) {
+	.photo {
+		height: 10rem;
+	}
+}
 </style>