diff options
Diffstat (limited to 'share')
| -rw-r--r-- | share/templates/default/header.tmpl | 53 |
1 files changed, 52 insertions, 1 deletions
diff --git a/share/templates/default/header.tmpl b/share/templates/default/header.tmpl index 4ba159e..50a33a7 100644 --- a/share/templates/default/header.tmpl +++ b/share/templates/default/header.tmpl @@ -186,6 +186,52 @@ cat <<END height: ${render_thumbheight_html}px; width: ${render_thumbheight_html}px; object-fit: cover; + vertical-align: top; + } + + /* A subdivided thumbnail tile: same outer footprint as one square thumb + (including the 5px image padding), but a 2x2 grid packing several + smaller thumbnails. Anchor order + the "wide" class (a full-width + strip spanning both columns) produce the quad / two-wide / squares+ + wide layouts via grid auto-placement. */ + div.tile { + display: inline-grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + gap: 4px; + width: ${render_thumbheight_html}px; + height: ${render_thumbheight_html}px; + padding: 5px; + box-sizing: content-box; + vertical-align: top; + } + + div.tile a { + display: block; + min-width: 0; + min-height: 0; + } + + div.tile a.wide { + grid-column: span 2; + } + + /* Raise the hovered sub-thumbnail above its neighbours so its + scaled/rotated "pop" effect (the shared img.thumb/img.subthumb:hover + rule below) is painted on top of the adjacent grid cells, not under + them. The sub-images fit their cells exactly, so there is no overflow + to clip until a hover scales one up. */ + div.tile a:hover { + position: relative; + z-index: 2; + } + + img.subthumb { + width: 100%; + height: 100%; + object-fit: cover; + padding: 0; + display: block; } /* Camera filter page grid: separate from the back link and let the @@ -194,7 +240,12 @@ cat <<END margin-top: 12px; } - img.thumb:hover { + /* Sub-thumbnails get the same dramatic hover as the full square thumbs + (mirror flip, scale-up, rotate, contrast/saturate boost, and a switch + to object-fit:contain) so a subdivided tile feels as lively as a + normal one. */ + img.thumb:hover, + img.subthumb:hover { outline: 4px solid #ffffff; -webkit-transform: scaleX(-1); transform: scaleX(-1) scale(1.08) rotate(2deg); |