dieren: aliases in name definitions (instead of image symlinks)

[sheet.git] / dieren.plp

diff --git a/dieren.plp b/dieren.plp
index 2626cbe943f51a497130c4b6ca5924bb1a641422..50f9981ec32a163a428a75ff607f555502ef13cd 100644 (file)
--- 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
@@ -74,24 +97,43 @@ 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
 );
 
+@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 );
        my @trans = (part { state $col; /^#?>/ ? ($col = 0) : ++$col } @table);
@@ -111,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
@@ -126,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?";