Added actor revision overviews to actor and user pages.

pages/actors/@actorId/+Page.vue

@@ -39,18 +39,27 @@
 				class="photos nobar"
 				:class="{ 'has-avatar': actor.avatar, 'has-photos': actor.avatar ? photos.length > 1 : photos.length > 0 }"
 			>
-				<img
+				<div
 					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="photo-container"
 					:class="{ avatar: photo.isAvatar }"
 				>
+					<img
+						: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"
+					>
+
+					<span
+						v-if="photo.credit"
+						class="photo-credit"
+					>{{ photo.credit }}</span>
+				</div>
 			</div>
 
 			<Domains
@@ -150,18 +159,37 @@ const photos = Object.values(Object.fromEntries(actor.profiles
 	}
 }
 
+.photo-container {
+	position: relative;
+	font-size: 0;
+
+	&.avatar {
+		display: none;
+	}
+}
+
 .photo {
 	height: 14rem;
 	width: auto;
 	object-fit: cover;
 	object-position: 50% 0;
+	border-radius: .25rem;
 	background-size: cover;
 	background-position: center;
 	box-shadow: 0 0px 3px var(--shadow-weak-30);
+}
 
-	&.avatar {
-		display: none;
-	}
+.photo-credit {
+	width: 100%;
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	z-index: 1;
+	box-sizing: border-box;
+	padding: .15rem .2rem;
+	color: var(--text-light);
+	font-size: .75rem;
+	text-shadow: 1px 1px 0 var(--shadow-strong-20);
 }
 
 .domains-bar {
@@ -174,7 +202,7 @@ const photos = Object.values(Object.fromEntries(actor.profiles
 		display: flex;
 	}
 
-	.photo.avatar {
+	.photo-container.avatar {
 		display: inline-block;
 	}
 }