X-Git-Url: http://git.shiar.net/sheet.git/blobdiff_plain/7d3818b79c9675a47364e50c6cfdbe97003a31bc..87d94e5fa2a28dac9f26632cc25a29fe088cb1e2:/word.plp

diff --git a/word.plp b/word.plp
index 1fc290f..0e03f45 100644
--- 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->{''}});