table {
width: 100%;
}
-tr:first-child th {
- word-break: break-all;
-}
-img {
+td {
vertical-align: bottom;
+}
+figure {
width: 100%;
+ height: 100%;
}
-img[hidden] {
+figure[hidden] {
transition: opacity 1s 0s;
display: inline;
opacity: 0;
}
-img[hidden]:hover {
+figure[hidden]:hover {
opacity: 1;
transition-delay: 2s;
}
<:
my @table = qw(
>: origineel: zee-: meer_water: aardig: anders: #:
- >hond: hond zeehond waterhond? prairiehond vleerhond #rodehond
- >kat: kat zeekat meerkat cat_325? tijgerkat #
+ >hond: hond zeehond waterhond?? prairiehond vleerhond #rodehond
+ >kat: kat zeekat meerkat cat_325? vliegende_kat #tijgerkat
#>haas: haas zeehaas waterhaas aardhaas? ossenhaas? #
>muis: muis zeemuis waterspitsmuis aardmuis vleermuis #
>rat: rat zeerat waterrat woestijnrat buidelrat #beverrat
- >egel: egel zee-egel wateregel? aardegel? mierenegel #
+ >egel: egel zee-egel wateregel?? aardegel?? mierenegel #
>varken: varken zeevarken waterzwijn aardvarken stekelvarken #
- >koe: koe zeekoe meerkoetje aardkoe? koedoe #haiku?
- >paard: paard zeepaardje nijlpaard aardpaard? luipaard #
+ >koe: koe zeekoe meerkoetje aardekoe?? koedoe #haiku?
+ >paard: paard zeepaardje nijlpaard aardpaard?? luipaard #
#>hoorn: eenhoorn zeehoorn zee-eenhoorn? aardhoorn? neushoorn #eekhoorn
- #>bra: brassiere? zebra waterbra? aardbra? cobra #sabra
+ #>bra: bra(ssière)? zebra waterbra? aardbra? cobra #sabra
#>olifant: olifant zeeolifant waterolifant? landolifant? # #
>beer: beer zeebeer waterbeertje ijsbeer wasbeer #neusbeer
- >leeuw: leeuw zeeleeuw waterleeuw? aardleeuw? mierenleeuw #
- #>wolf: wolf zeewolf waterwolf? aardwolf buidelwolf #
- >haan: haan zeehaan waterhaan rotshaan sprinkhaan #
+ >leeuw: leeuw zeeleeuw waterleeuw?? aardleeuw?? mierenleeuw #
+ >wolf: wolf zeewolf waterwolf? aardwolf korenwolf #buidelwolf
+ >haan: haan zeehaan waterhaan rotshaan sprinkhaan #wilde_haan??
#>pad: pad zeepad? waterpad? landpad schildpad #paddenstoel
#>draak: draak zeedraak waterdraak aarddraak? komododraak #
#>vlo: vlo strandvlo watervlo aardvlo vlok? #
last if $name =~ m/^>/;
}
}
- $name =~ y/_/ /;
if ($name =~ s/^>//) {
# leading dash starts a new row
say '</tr>' if $name;
print "<tr>";
}
+ my ($img) = $name =~ /^([\w-]+)/;
+ $name =~ y/_/ /;
if ($name =~ s/:$//) {
# trailing colon indicates header text
print "<th>$name</th>";
next;
}
- printf '<td title="%s">', $name // '?';
+ print '<td>';
my $hidden = $name =~ s/\?$//;
- if ($name and -e (my $img = "data/dieren/$name.jpg")) {
+ my $alt = $name;
+ $name = "<q>$name</q>" if $name =~ s/\?$//;
+
+ printf '<figure%s>', $hidden && !exists $get{v} && ' 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"', -l $img ? readlink($img) =~ s/\.jpg$//r : $name;
- print ' hidden' if $hidden and not exists $get{v};
+ printf ' alt="%s"', $alt;
print ' />';
}
- elsif (!$hidden) {
+ elsif ($hidden) {
+ printf '<figcaption>%s</figcaption>', "$name?";
+ }
+ else {
print $name;
}
+ print '</figure>';
print '</td>';
}
say '</tr></table>';