CSS tweaks including fadein

src/stills/main.py

@@ -78,7 +78,7 @@ def generate_html(images, output_dir: Path, author: str | None = None):
 				parts.append(camera_model)
 			if film:
 				parts.append(film)
-			metadata_html = '<div class="metadata">{}</div>'.format(' — '.join(parts))
+			metadata_html = '<div class="metadata">{}</div>'.format(', '.join(parts))
 
 		footer_html = ''
 		if author:

src/stills/templates/style.css

@@ -29,50 +29,60 @@ body {
 	gap: 10px;
 }
 
-.gallery img {
+@keyframes fadeInScale {
+	from {
+		opacity: 0;
+		transform: scale(0.98);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+.gallery img,
+.content img {
 	width: 700px;
 	max-width: 90vw;
 	height: auto;
 	object-fit: cover;
 	box-shadow: 0 0 5px rgba(0,0,0,0.5);
 	opacity: 0;
-	transition: opacity 1s ease;
 	cursor: zoom-in;
 	background: none;
 	padding: 0;
+	animation: fadeInScale 1s ease forwards;
 }
 
-.gallery img[src] {
+.gallery img[src],
+.content img[src] {
 	opacity: 1;
+	transform: scale(1);
 }
 
-.content img {
-	max-width: 100%;
-	max-height: 80vh;
-	object-fit: contain;
+.gallery a,
+.content a {
+	font-size: 0;
 }
 
+
 .metadata {
 	margin-top: 10px;
 	font-size: 0.8rem;
-	color: #777;
+	color: #444;
 	text-align: center;
 	text-transform: uppercase;
 	letter-spacing: 1px;
 }
 
-.footer {
+.footer, .footer a {
 	margin-top: 20px;
 	margin-bottom: 10px;
 	font-size: 0.7rem;
-	color: #777;
+	color: #222;
 	text-align: center;
 	text-transform: uppercase;
 	letter-spacing: 1px;
-}
-
-.footer a {
-	color: #777;
 	text-decoration: none;
 }