X-Git-Url: http://git.shiar.nl/sheet.git/blobdiff_plain/1835a0d73447dd86ffd932c03806b9bb131359d6..478368d15928cd6cac1bebcc8ae73cd1d247cabd:/dieren.plp

diff --git a/dieren.plp b/dieren.plp
index 2626cbe..477f3ac 100644
--- a/dieren.plp
+++ b/dieren.plp
@@ -7,7 +7,8 @@ my %subpages = (
 	standaard => {
 		title => 'dieren',
 		intro => $intro,
-		altlink => 'Zie ook <a href="/dieren/uitgebreid">verdergezochte verbanden</a>.',
+		altlink => 'Zie ook <a href="/dieren/uitgebreid">verdergezochte verbanden</a>' .
+		           ' of het <a href="/dieren/beknopt">beknopte overzicht</a>.',
 	},
 	uitgebreid => {
 		title => 'uitgebreid dieren',
@@ -16,6 +17,11 @@ my %subpages = (
 		prefix => '#',
 		secrets => 1,
 	},
+	beknopt => {
+		title => 'beknopt dieren',
+		intro => "een aantal $intro",
+		altlink => 'Zie het <a href="/dieren">populaire overzicht</a> voor meer.',
+	},
 );
 
 $Request ||= 'standaard';
@@ -36,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;
@@ -50,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
@@ -69,28 +92,48 @@ say $pageinfo->{altlink};
 <:
 my @table = qw(
 	 >:        origineel: zee-:        meer_water:    land/aardig: anders:      #:
-	 >hond:    hond       zeehond      waterhond??    prairiehond  vleerhond    #rodehond
+	 >hond:    hond       zeehond      scheepshond?   prairiehond  vleerhond    #rodehond
 	 >kat:     kat        zeekat       meerkat        cat_325?    vliegende_kat #tijgerkat
 	#>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
+	 >paard:   paard      zeepaardje   nijlpaard      (turn)paard? luipaard     #tijgerpaard
+	#>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
 );
+$table[4 + 9*7] = 'grasmodderpaard?=草泥马' if $Request eq 'standaard'; # replace turnpaard
+
+@table = qw(
+	>hond    zeehond    prairiehond
+	>kat     zeekat     meerkat
+	>muis    zeemuis    vleermuis
+	>egel    zee-egel   mierenegel
+	>varken  zeevarken  stekelvarken
+	>koe     zeekoe     meerkoetje
+	>paard   zeepaardje nijlpaard
+	>olifant zeeolifant olifantsvis
+	>beer    zeebeer    wasbeer
+	>leeuw   zeeleeuw   mierenleeuw
+	>wolf    zeewolf    korenwolf
+	>haan    zeehaan    sprinkhaan
+	>mot     marmot     bergamot
+) if $Request eq 'beknopt';
 
 if (exists $get{r}) {
 	use List::MoreUtils qw( part );
@@ -111,6 +154,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
@@ -118,7 +162,7 @@ while (my $name = shift @table) {
 		print "<tr>";
 	}
 	$name =~ s/^-$//;
-	my ($img) = $name =~ /^([\w-]+)/;
+	my ($img) = $name =~ /([\w-]+)/;
 	$name =~ y/_/ /;
 	if ($name =~ s/:$//) {
 		# trailing colon indicates header text
@@ -126,23 +170,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?";