Common styling without percentage hints, replacing table elements by grid
columns with something resembling 1fr widths.
background: rgba(0, 0, 0, .5);
}
background: rgba(0, 0, 0, .5);
}
+/* specialised galleries */
+
body#word {
margin: 8px 1px;
}
body#word {
margin: 8px 1px;
}
+table.gallery {
+ grid-auto-flow: row;
+ grid-template-columns: repeat(auto-fit, minmax(2em, max-content)); /* 1fr */
+}
+table.gallery tbody,
+table.gallery tr {
+ display: contents;
+}
+table.gallery tr > :first-child {
+ grid-column: 1;
+ -grid-row: span 6;
+ margin: auto; /* vertical-align: middle */
+}
+table.gallery tr > :nth-child(2) {
+ grid-column: 2; /* in case 1st is missing */
+}
+table.gallery td {
+ border: 0; /* does not collapse */
+ outline: 1px solid #888; /* over grid-gap */
+}
+
/* page-specific */
#browser td > a {
/* page-specific */
#browser td > a {
'],
raw => <<'EOT',
<style>
'],
raw => <<'EOT',
<style>
-table {
- width: 100%;
-}
-th {
- width: 1%; /* min-content */
-}
-td {
- width: 15%; /* 1fr */
- vertical-align: top;
-}
+ opacity: 0; /* secret */
transition: opacity 1s 0s;
transition: opacity 1s 0s;
- display: inline;
- opacity: 0;
}
figure[hidden]:hover {
opacity: 1;
transition-delay: 1s;
}
}
figure[hidden]:hover {
opacity: 1;
transition-delay: 1s;
}
+figure[hidden]:hover > figcaption {
+ transition-delay: 2s;
+}
@media (max-width: 60em) {
@media (max-width: 60em) {
- figcaption {
- position: static;
- padding: 0;
font-size: 50%;
}
figcaption small {
font-size: 50%;
}
figcaption small {
th:first-child {
display: none;
}
th:first-child {
display: none;
}
- th {
- font-size: 50%;
- }
+say '<table class="gallery">';
while (my $name = shift @table) {
if ($name =~ s/^#// and !$pageinfo->{prefix}) {
while ($name = shift @table) {
while (my $name = shift @table) {
if ($name =~ s/^#// and !$pageinfo->{prefix}) {
while ($name = shift @table) {