From: Mischa POSLAWSKY <perl@shiar.org>
Date: Sun, 17 Oct 2021 11:35:03 +0000 (+0200)
Subject: dieren: reduced captions on mobile screens <960px
X-Git-Tag: v1.13~135
X-Git-Url: http://git.shiar.nl/sheet.git/commitdiff_plain/14310f94c0b4aef2fa040f626951c6bd3d893a11

dieren: reduced captions on mobile screens <960px

Focus on image visibility if width is insufficient for full labeling.
---

diff --git a/dieren.plp b/dieren.plp
index 4775efe..50410e2 100644
--- a/dieren.plp
+++ b/dieren.plp
@@ -47,7 +47,7 @@ th {
 }
 td {
 	width: 15%; /* 1fr */
-	vertical-align: bottom;
+	vertical-align: top;
 }
 figure[hidden] {
 	transition: opacity 1s 0s;
@@ -56,7 +56,24 @@ figure[hidden] {
 }
 figure[hidden]:hover {
 	opacity: 1;
-	transition-delay: 2s;
+	transition-delay: 1s;
+}
+
+@media (max-width: 60em) {
+	figcaption {
+		position: static;
+		padding: 0;
+		font-size: 50%;
+	}
+	figcaption small {
+		display: none;
+	}
+	th:first-child {
+		display: none;
+	}
+	th {
+		font-size: 50%;
+	}
 }
 </style>
 EOT
@@ -157,15 +174,15 @@ while (my $name = shift @table) {
 	if ($img and -e ($img = "data/dieren/$img.jpg")) {
 		my $alt = -l $img && readlink($img) =~ s/\.jpg$//r;
 		if ($alt) {
-			$name .= " ($alt)";
+			$name .= " <small>($alt)</small>";
 		}
 		else {
 			$alt = $name;
 		}
-		print "<figcaption>$name</figcaption>";
 		printf '<img src="/%s"', $img;
 		printf ' alt="%s"', $alt;
 		print ' />';
+		print "<figcaption>$name</figcaption>";
 	}
 	elsif ($hidden) {
 		printf '<figcaption>%s</figcaption>', "$name?";