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:
7d3818b
)
word: hover related parents and children
author
Mischa POSLAWSKY
<perl@shiar.org>
Sat, 23 May 2020 03:03:01 +0000
(
05:03
+0200)
committer
Mischa POSLAWSKY
<perl@shiar.org>
Sat, 6 Jun 2020 01:49:20 +0000
(
03:49
+0200)
word.plp
patch
|
blob
|
history
wordlist.inc.pl
patch
|
blob
|
history
diff --git
a/word.plp
b/word.plp
index 1fc290f43feabf6daa0f7bba29216303e7b87b99..698dbd6092f3c9ab1a492d1bdbf3cde4bdaa4fcf 100644
(file)
--- a/
word.plp
+++ b/
word.plp
@@
-14,11
+14,39
@@
ul {
display: flex;
flex-wrap: wrap;
align-items: end;
display: flex;
flex-wrap: wrap;
align-items: end;
+ margin: -1px;
+}
+li, ul ul {
+ display: contents;
+ height: 100%;
}
figure {
flex: 200px;
}
figure {
flex: 200px;
+ flex-grow: 1;
max-width: 300px;
overflow: hidden;
max-width: 300px;
overflow: hidden;
+ padding: 1px;
+}
+
+figure:hover ~ ul figure,
+figure:hover ~ ul figcaption {
+ background: #CCC;
+ color: #000;
+}
+figure:hover ~ ul figcaption {
+ background: rgba(255, 255, 255, .5);
+}
+
+figure, figcaption {
+ transition: all .5s ease-in;
+}
+li.parent:hover > figure > figcaption,
+figure:hover > figcaption {
+ font-size: 175%;
+ right: 50%;
+ bottom: 50%;
+ transform: translate(50%, 50%);
+ margin-left: -60%; /* keep width */
}
</style>
EOT
}
</style>
EOT
@@
-38,6
+66,7
@@
my %table = do 'wordlist.inc.pl' or die $@ // $!;
sub showimg {
my ($name) = @_;
my ($img) = $name =~ /^([\w-]+)/;
sub showimg {
my ($name) = @_;
my ($img) = $name =~ /^([\w-]+)/;
+ $name =~ s/\w{4} [^aoeuiyc\W] [rl]?+ \K (?= [^aoeuiy\W] [rl]? [aoeuiy] \w)/­/gx;
$name =~ y/_/ /;
my $hidden = $name =~ s/\?$//;
my $alt = $name;
$name =~ y/_/ /;
my $hidden = $name =~ s/\?$//;
my $alt = $name;
@@
-61,14
+90,14
@@
sub showimg {
}
sub printimgs {
}
sub printimgs {
+ say '<ul>';
for my $row (@_) {
for my $row (@_) {
- printf '<li
>
';
+ printf '<li
%s>', defined $table{$row} && ' class="parent"
';
print showimg($row);
print showimg($row);
- print '</li>';
printimgs(@{$_}) for $table{$row} // ();
printimgs(@{$_}) for $table{$row} // ();
+ print '</li>';
}
}
+ say '</ul>';
}
}
-say '<ul>';
printimgs($table{''});
printimgs($table{''});
-say '</ul>';
diff --git
a/wordlist.inc.pl
b/wordlist.inc.pl
index 4ad4dfb458789788a10a11aa2c3dbfef709bd14d..8ebfef3ba7ce363d64fb9b74b8e263a9fc65e837 100644
(file)
--- a/
wordlist.inc.pl
+++ b/
wordlist.inc.pl
@@
-32,6
+32,8
@@
use utf8;
mier termiet kakkerlak oorworm bidsprinkhaan sprinkhaan krekel
libel vlieg mug vlo kever vlinder mot bij wesp
)],
mier termiet kakkerlak oorworm bidsprinkhaan sprinkhaan krekel
libel vlieg mug vlo kever vlinder mot bij wesp
)],
+ vlinder => ['rups'],
+ kever => ['lieveheersbeestje'],
plant => [qw( boom cactus bloemplant zaad gras kruid )],
boom => [qw(
eik wilg populier eucalyptus beuk berk naaldboom/conifeer
plant => [qw( boom cactus bloemplant zaad gras kruid )],
boom => [qw(
eik wilg populier eucalyptus beuk berk naaldboom/conifeer