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 4775efebabc4e4f8d8af5b55949148e8323ae5d5..50410e24fb746a8993f51e03bf3b2aa8f46108f7 100644 (file)
--- 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?";