<(common.inc.plp)><:
+my $wordlist = 'wordlist.eng.inc.pl';
+my $limit = $get{v} // (exists $get{v} ? 4 : 3);
+
Html({
title => 'words cheat sheet',
version => '1.0',
keywords => [qw'
language
'],
- data => ['wordlist.inc.pl'],
+ data => [$wordlist],
raw => <<'EOT',
<style>
ul {
- display: flex;
- flex-wrap: wrap;
- align-items: end;
+ display: grid;
+ grid: auto-flow dense / repeat(auto-fit, minmax(200px, 1fr));
+ grid-gap: 1px;
+}
+li, ul ul {
+ display: contents;
}
figure {
- flex: 200px;
- max-width: 300px;
overflow: hidden;
+ box-sizing: border-box;
+}
+figcaption > small {
+ display: inline-block;
+}
+
+li.large > figure {
+ grid-row: span 2;
+ grid-column: span 2;
+}
+@media (min-width: 600px) and (min-height: 400px) {
+ p + ul > li:first-child > figure {
+ grid-row: span 3;
+ grid-column: span 3;
+ }
+}
+
+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
});
-
:>
<h1>Words</h1>
</p>
<:
-my %table = do 'wordlist.inc.pl' or die $@ // $!;
+my $table = do $wordlist or die $@ // $!;
sub showimg {
my ($name) = @_;
- my ($img) = $name =~ /^([\w-]+)/;
- $name =~ y/_/ /;
+ my ($imgname) = $name =~ /^([\w -]+)/;
+ $name =~ s/\w{4} [^aoeuiyc\W] [rl]?+ \K (?= [^aoeuiy\W] [rl]? [aoeuiy] \w)/­/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/$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;
}
sub printimgs {
+ say '<ul>';
for my $row (@_) {
- printf '<li>';
- print showimg($row);
+ my ($level, $mark, $title) = split /([a-z]*):/, $row, 2;
+ my @type;
+ push @type, 'parent' if defined $table->{$row};
+ push @type, 'large' if $mark;
+ push @type, 'level'.($level || 0);
+ printf '<li%s>', @type ? sprintf ' class="%s"', join ' ', @type : '';
+ print showimg($title) if $level <= $limit;
+ printimgs(@{$_}) for $table->{$row} // ();
print '</li>';
- printimgs(@{$_}) for $table{$row} // ();
}
+ say '</ul>';
}
-say '<ul>';
-printimgs($table{''});
-say '</ul>';
+printimgs(@{$table->{''}});