word edit: recover form after save error

[sheet.git] / word.plp

diff --git a/word.plp b/word.plp
index 1fc290f43feabf6daa0f7bba29216303e7b87b99..0e03f45f0301fa57a738b3f919aa0dec5bbb6c9a 100644 (file)
--- a/word.plp
+++ b/word.plp
@@ -1,5 +1,6 @@
 <(common.inc.plp)><:
 
+my $wordlist = 'wordlist.inc.pl';
 Html({
        title => 'words cheat sheet',
        version => '1.0',
@@ -7,18 +8,46 @@ Html({
        keywords => [qw'
                language
        '],
-       data => ['wordlist.inc.pl'],
+       data => [$wordlist],
        raw => <<'EOT',
 <style>
 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 +67,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 +91,14 @@ sub showimg {
 }
 
 sub printimgs {
+       say '<ul>';
        for my $row (@_) {
-               printf '<li>';
+               printf '<li%s>', defined $table->{$row} && ' class="parent"';
                print showimg($row);
+               printimgs(@{$_}) for $table->{$row} // ();
                print '</li>';
-               printimgs(@{$_}) for $table{$row} // ();
        }
+       say '</ul>';
 }
 
-say '<ul>';
-printimgs($table{''});
-say '</ul>';
+printimgs(@{$table->{''}});