word: grid layout to strictly align multiple rows

diff --git a/word.plp b/word.plp
index ca850709f86790f6784f10907da8ee23595a80d7..7d62562215343ad5433d5c5586b2403ab30d2ed0 100644 (file)
--- 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;
 }