From 5bbd8d60621416409a4b5a312e79574b2e6edace Mon Sep 17 00:00:00 2001
From: Mischa POSLAWSKY <perl@shiar.org>
Date: Tue, 26 May 2020 11:16:51 +0200
Subject: [PATCH] word: grid layout to strictly align multiple rows

---
 word.plp | 31 ++++++++-----------------------
 1 file changed, 8 insertions(+), 23 deletions(-)

diff --git a/word.plp b/word.plp
index ca85070..7d62562 100644
--- a/word.plp
+++ b/word.plp
@@ -12,21 +12,16 @@ Html({
 	raw => <<'EOT',
 <style>
 ul {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: end;
-	margin: -1px;
+	display: grid;
+	grid: auto-flow dense / repeat(auto-fit, minmax(200px, 1fr));
+	grid-gap: 1px;
 }
 li, ul ul {
 	display: contents;
-	height: 100%;
 }
 figure {
-	flex: 200px;
-	flex-grow: 1;
-	max-width: 300px;
 	overflow: hidden;
-	padding: 1px;
+	box-sizing: border-box;
 }
 figcaption > small {
 	display: inline-block;
@@ -69,26 +64,16 @@ my $table = do $wordlist or die $@ // $!;
 
 sub showimg {
 	my ($name) = @_;
-	my ($img) = $name =~ /^([\w -]+)/;
+	my ($imgname) = $name =~ /^([\w -]+)/;
 	$name =~ s/\w{4} [^aoeuiyc\W] [rl]?+ \K (?= [^aoeuiy\W] [rl]? [aoeuiy] \w)/&shy;/gx;
 	$name =~ s{/(.*)}{ <small>($1)</small>}g;
 	my $hidden = $name =~ s/\?$//;
 	my $alt = $name;
 	$name = "<q>$name</q>" if $name =~ s/\?$//;
+	$name = "<figcaption>$name</figcaption>";
 
-	if ($img and -e ($img = "data/word/eng/$img.jpg")) {
-		my $alt = -l $img && readlink($img) =~ s/\.jpg$//r;
-		if ($alt) {
-			$name .= " ($alt)";
-		}
-		else {
-			$alt = $name;
-		}
-		$name = "<figcaption>$name</figcaption>";
-		$name .= sprintf '<img src="/%s" alt="%s" />', $img, $alt;
-	}
-	elsif ($hidden) {
-		$name = "<figcaption>$name?</figcaption>";
+	if ($imgname and -e ($img = "data/word/eng/$imgname.jpg")) {
+		$name .= sprintf '<img src="/%s" alt="%s" />', $img, $imgname;
 	}
 	return sprintf '<figure%s>%s</figure>', $hidden && !exists $get{v} && ' hidden', $name;
 }
-- 
2.30.0