Embrace the idea of multiple thumbnail sizes.

[tgal] / static / tgal.css

diff --git a/static/tgal.css b/static/tgal.css
index 251541f..a708599 100644 (file)
--- a/static/tgal.css
+++ b/static/tgal.css
@@ -76,23 +76,20 @@ div.footitem {
 }
 
 div.gallery {
-       display: block;
-       text-align: center;
+       display: flex; flex-direction: row; flex-wrap: wrap;
+       align-items: start; justify-content: space-evenly;
 }
 
 figure.thumb {
        display: inline-block;
        vertical-align: top;
-       width: 228px;
        margin: 1em;
 }
-
 a.thumb:link { display: inline-block; }
+img.thumb { object-fit: contain; }
 
-img.thumb {
-       width: 228px; height: 228px;
-       object-fit: contain;
-}
+figure.bigthumb { width: 228px; }
+img.bigthumb { width: 228px; height: 228px; }
 
 div.comment {
        border: thin black solid;
@@ -103,10 +100,7 @@ div.comment {
        margin-top: 2ex; margin-bottom: 2ex;
 }
 
-figure.thumb figcaption {
-       display: block;
-       width: 228px;
-}
+figure.thumb figcaption { display: block; }
 figcaption { text-align: center; }
 figcaption span.name { font-family: sans-serif; }
 figcaption span.comment { font-style: italic; margin-inline-start: 1em; }