word: hover related parents and children

[sheet.git] / word.plp

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;
+       margin: -1px;
+}
+li, ul ul {
+       display: contents;
+       height: 100%;
 }
 figure {
        flex: 200px;
+       flex-grow: 1;
        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
@@ -38,6 +66,7 @@ my %table = do 'wordlist.inc.pl' or die $@ // $!;
 sub showimg {
        my ($name) = @_;
        my ($img) = $name =~ /^([\w-]+)/;
+       $name =~ s/\w{4} [^aoeuiyc\W] [rl]?+ \K (?= [^aoeuiy\W] [rl]? [aoeuiy] \w)/&shy;/gx;
        $name =~ y/_/ /;
        my $hidden = $name =~ s/\?$//;
        my $alt = $name;
@@ -61,14 +90,14 @@ sub showimg {
 }
 
 sub printimgs {
+       say '<ul>';
        for my $row (@_) {
-               printf '<li>';
+               printf '<li%s>', defined $table{$row} && ' class="parent"';
                print showimg($row);
-               print '</li>';
                printimgs(@{$_}) for $table{$row} // ();
+               print '</li>';
        }
+       say '</ul>';
 }
 
-say '<ul>';
 printimgs($table{''});
-say '</ul>';