git.shiar.nl
/
sheet.git
/ commitdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
| commitdiff |
tree
raw
|
patch
|
inline
| side by side (parent:
373af67
)
dieren: image figures captioned by names
v1.12
author
Mischa POSLAWSKY
<perl@shiar.org>
Mon, 4 May 2020 21:01:22 +0000
(23:01 +0200)
committer
Mischa POSLAWSKY
<perl@shiar.org>
Wed, 6 May 2020 01:18:07 +0000
(
03:18
+0200)
base.css
patch
|
blob
|
history
dieren.plp
patch
|
blob
|
history
diff --git
a/base.css
b/base.css
index 3dc2fac4254818448c17d84582eb19f1d6146e77..3c00aa43f290c3f9f83e59f00ea0d716ee609cd2 100644
(file)
--- a/
base.css
+++ b/
base.css
@@
-662,6
+662,24
@@
ul.legend-set li {
padding: 0 0.2em;
}
padding: 0 0.2em;
}
+/* images */
+
+figure {
+ margin: 0;
+ position: relative;
+}
+figcaption {
+ position: absolute;
+ padding: 0 1em;
+ background: rgba(0, 0, 0, .5);
+ right: 0;
+ bottom: 0;
+}
+img {
+ vertical-align: bottom;
+ width: 100%;
+}
+
/* page-specific */
#browser td > a {
/* page-specific */
#browser td > a {
diff --git
a/dieren.plp
b/dieren.plp
index 1a6eb117645681a7cc635b045e48ad5ceb275897..bf15ec7a628ca41054933c27e20d9ec7ce244c1a 100644
(file)
--- a/
dieren.plp
+++ b/
dieren.plp
@@
-18,19
+18,19
@@
Html({
table {
width: 100%;
}
table {
width: 100%;
}
-tr:first-child th {
- word-break: break-all;
-}
-img {
+td {
vertical-align: bottom;
vertical-align: bottom;
+}
+figure {
width: 100%;
width: 100%;
+ height: 100%;
}
}
-
img
[hidden] {
+
figure
[hidden] {
transition: opacity 1s 0s;
display: inline;
opacity: 0;
}
transition: opacity 1s 0s;
display: inline;
opacity: 0;
}
-
img
[hidden]:hover {
+
figure
[hidden]:hover {
opacity: 1;
transition-delay: 2s;
}
opacity: 1;
transition-delay: 2s;
}
@@
-56,20
+56,20
@@
else {
<:
my @table = qw(
>: origineel: zee-: meer_water: aardig: anders: #:
<:
my @table = qw(
>: origineel: zee-: meer_water: aardig: anders: #:
- >hond: hond zeehond waterhond?
prairiehond vleerhond #rodehond
+ >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
>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 #
>varken: varken zeevarken waterzwijn aardvarken stekelvarken #
- >koe: koe zeekoe meerkoetje aard
koe?
koedoe #haiku?
- >paard: paard zeepaardje nijlpaard aardpaard?
luipaard #
+ >koe: koe zeekoe meerkoetje aard
ekoe??
koedoe #haiku?
+ >paard: paard zeepaardje nijlpaard aardpaard?
?
luipaard #
#>hoorn: eenhoorn zeehoorn zee-eenhoorn? aardhoorn? neushoorn #eekhoorn
#>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
#>olifant: olifant zeeolifant waterolifant? landolifant? # #
>beer: beer zeebeer waterbeertje ijsbeer wasbeer #neusbeer
- >leeuw: leeuw zeeleeuw waterleeuw?
aardleeuw?
mierenleeuw #
+ >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
>wolf: wolf zeewolf waterwolf? aardwolf korenwolf #buidelwolf
>haan: haan zeehaan waterhaan rotshaan sprinkhaan #wilde_haan??
#>pad: pad zeepad? waterpad? landpad schildpad #paddenstoel
@@
-99,28
+99,44
@@
while (my $name = shift @table) {
last if $name =~ m/^>/;
}
}
last if $name =~ m/^>/;
}
}
- $name =~ y/_/ /;
if ($name =~ s/^>//) {
# leading dash starts a new row
say '</tr>' if $name;
print "<tr>";
}
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;
}
if ($name =~ s/:$//) {
# trailing colon indicates header text
print "<th>$name</th>";
next;
}
- print
f '<td title="%s">', $name // '?
';
+ print
'<td>
';
my $hidden = $name =~ s/\?$//;
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 '<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 ' />';
}
print ' />';
}
- elsif (!$hidden) {
+ elsif ($hidden) {
+ printf '<figcaption>%s</figcaption>', "$name?";
+ }
+ else {
print $name;
}
print $name;
}
+ print '</figure>';
print '</td>';
}
say '</tr></table>';
print '</td>';
}
say '</tr></table>';