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

diff --git a/word.plp b/word.plp
index 1fc290f..698dbd6 100644
--- 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>';