X-Git-Url: http://git.shiar.nl/sheet.git/blobdiff_plain/dcc8a72751585d4359ea945151fbd97f1288a41e..d9ec472869a2c33c469cad90a21b221f14f29af3:/dieren.plp

diff --git a/dieren.plp b/dieren.plp
index 6ab5117..50f9981 100644
--- a/dieren.plp
+++ b/dieren.plp
@@ -42,12 +42,12 @@ Html({
 table {
 	width: 100%;
 }
-td {
-	vertical-align: bottom;
+th {
+	width: 1%; /* min-content */
 }
-figure {
-	width: 100%;
-	height: 100%;
+td {
+	width: 15%; /* 1fr */
+	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
@@ -80,20 +97,23 @@ my @table = qw(
 	#>haas:    haas       zeehaas      waterhaas      koolhaas?    ossenhaas?   #buidelhaas
 	 >muis:    muis       zeemuis      waterspitsmuis aardmuis     vleermuis    #computermuis
 	 >rat:     rat        zeerat       waterrat       woestijnrat  buidelrat    #beverrat
-	 >egel:    egel       zee-egel     wateregel?     aardegel??   mierenegel   #
-	 >varken:  varken     zeevarken    waterzwijn     aardvarken   stekelvarken #
+	 >egel:    egel       zee-egel     wateregel? aardegel??=cactus mierenegel  #kegel?
+	 >varken:  varken     zeevarken=bruinvis
+	                        waterzwijn=capibara       aardvarken   stekelvarken #feestvarken?
 	 >koe:     koe        zeekoe       meerkoetje     aardekoe??   koedoe       #haiku?
 	 >paard:   paard      zeepaardje   nijlpaard      aardpaard??  luipaard     #tijgerpaard
-	#>hoorn:   eenhoorn   zeehoorn     zee-eenhoorn?  bergahorn    neushoorn    #eekhoorn
+	#>hoorn:   eenhoorn   zeehoorn     zee-eenhoorn?=narwal
+	                                             bergahorn=esdoorn neushoorn    #eekhoorn
 	#>bra:   bra(ssière)? zebra        -              -            cobra        #sabra
 	#>olifant: olifant    zeeolifant   olifantsvis    kamerolifant? -           #olifantsoor
 	 >beer:    beer       zeebeer      waterbeertje   ijsbeer      wasbeer      #neusbeer
-	 >leeuw:   leeuw      zeeleeuw     waterleeuw??   aardleeuw??  mierenleeuw  #
-	 >wolf:    wolf       zeewolf      waterwolf??    aardwolf     korenwolf    #buidelwolf
-	 >haan:    haan       zeehaan      waterhaan      rotshaan     sprinkhaan   #wilde_haan??
+	 >leeuw:   leeuw      zeeleeuw     waterleeuw??   aardleeuw??=kameleon
+	                                                               mierenleeuw  #
+	 >wolf:    wolf       zeewolf      waterwolf??=snoek  aardwolf korenwolf    #strandwolf=bruine_hyena
+	 >haan:    haan       zeehaan      waterhaan      rotshaan     sprinkhaan   #wilde_haan??=wildrooster
 	#>pad:     pad        zebrapad?    waterpad?      landpad      schildpad    #paddenstoel
-	#>draak:   draak      zeedraak     waterdraak     -            komododraak  #
-	#>vlo:     vlo        zeevlo       watervlo       aardvlo      -            #vlok?
+	#>draak:   draak      zeedraak     waterdraak=agame          - komododraak=varaan #
+	#>vlo:     vlo        zeevlo       watervlo       aardvlo      vlok?        #
 	#>mot:     mot        marmot       watermot       bergamot     -            #
 	#>bij:     bij        -            waterbij       aardbei      moerbei      hommelbij
 );
@@ -133,6 +153,7 @@ while (my $name = shift @table) {
 		while ($name = shift @table) {
 			last if $name =~ m/^>/;
 		}
+		$name or next;
 	}
 	if ($name =~ s/^>//) {
 		# leading dash starts a new row
@@ -148,23 +169,17 @@ while (my $name = shift @table) {
 		next;
 	}
 	print '<td>';
+	my $alt = $1 if $name =~ s/=(.*)//;
 	my $hidden = $name =~ s/\?$//;
-	my $alt = $name;
 	$name = "<q>$name</q>" if $name =~ s/\?$//;
+	$name .= " <small>($alt)</small>" if $alt;
 
 	printf '<figure%s>', $hidden && !$pageinfo->{secrets} && ' hidden';
 	if ($img and -e ($img = "data/dieren/$img.jpg")) {
-		my $alt = -l $img && readlink($img) =~ s/\.jpg$//r;
-		if ($alt) {
-			$name .= " ($alt)";
-		}
-		else {
-			$alt = $name;
-		}
-		print "<figcaption>$name</figcaption>";
 		printf '<img src="/%s"', $img;
-		printf ' alt="%s"', $alt;
+		printf ' alt="%s"', $alt || $name;
 		print ' />';
+		print "<figcaption>$name</figcaption>";
 	}
 	elsif ($hidden) {
 		printf '<figcaption>%s</figcaption>', "$name?";