X-Git-Url: https://git.distorted.org.uk/~mdw/tgal/blobdiff_plain/83bfcbc738474703171bcff01f66ea8e44792d82..bda837fcd316a4f8ca90e631c620b8cc93c759a7:/static/tgal.css

diff --git a/static/tgal.css b/static/tgal.css
index de367ed..b94038e 100644
--- a/static/tgal.css
+++ b/static/tgal.css
@@ -76,23 +76,27 @@ div.footitem {
 }
 
 div.gallery {
-	display: block;
-	text-align: center;
+	flex-direction: row; flex-wrap: wrap;
+	align-items: start; justify-content: space-evenly;
 }
+div.gallery.medthumb { display: flex; }
 
 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; }
+
+figure.medthumb { width: 144px; }
+img.medthumb { width: 144px; height: 144px; }
+
+figure.smallthumb { width: 96px; }
+img.smallthumb { width: 96px; height: 96px; }
 
 div.comment {
 	border: thin black solid;
@@ -103,10 +107,8 @@ 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; }
 
@@ -147,7 +149,21 @@ div.thumbstrip {
 	max-width: 100%;
 	overflow-x: auto;
 	text-align: center;
-	display: flex; flex-direction: row; align-self: center;
+	flex-direction: row; align-self: center;
+}
+
+div.thumbstrip.smallthumb { display: flex; }
+div.thumbstrip.medthumb { display: none; }
+div.thumbstrip.bigthumb { display: none; }
+@media (min-height: 1200px) and (max-height: 1599px) {
+	div.thumbstrip.smallthumb { display: none; }
+	div.thumbstrip.medthumb { display: flex; }
+	div.thumbstrip.bigthumb { display: none; }
+}
+@media (min-height: 1600px) {
+	div.thumbstrip.smallthumb { display: none; }
+	div.thumbstrip.medthumb { display: none; }
+	div.thumbstrip.bigthumb { display: flex; }
 }
 
 /*----- That's all, folks -------------------------------------------------*/