X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~mdw/git/tgal/blobdiff_plain/dfdd19641b4eba66aefedb9c1a7ce4f93d74b347..HEAD:/static/tgal.css

diff --git a/static/tgal.css b/static/tgal.css
index a708599..a2bc7fb 100644
--- a/static/tgal.css
+++ b/static/tgal.css
@@ -61,6 +61,18 @@ h1, h2, h3, h4, h5, h6 { font-family: sans-serif; font-weight bold; }
 hr { width: calc(100% - 4em); }
 div.fill { flex-grow: 1; }
 
+div.menu {
+	font-family: sans;
+	font-weight: normal;
+	font-size: initial;
+	float: right;
+}
+h1 div.menu:before {
+	visibility: hidden;
+	font-size: 200%;
+	content: "";
+}
+
 div.footer {
 	border-top: medium black solid;  
 	margin-top: 3.43ex;
@@ -76,7 +88,7 @@ div.footitem {
 }
 
 div.gallery {
-	display: flex; flex-direction: row; flex-wrap: wrap;
+	flex-direction: row; flex-wrap: wrap;
 	align-items: start; justify-content: space-evenly;
 }
 
@@ -91,6 +103,12 @@ img.thumb { 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;
 	max-width: 40em;
@@ -104,6 +122,7 @@ 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; }
+.smallthumb figcaption { font-size: 80%; }
 
 div.viewnav {
 	flex-grow: 1; flex-basis: 0;
@@ -117,20 +136,21 @@ div.prev, div.next {
 }
 div.prev { left: 0%; }
 div.next { right: 0%; }
-a.prev, a.next {
-	font-size: 400%;
-	font-weight: bold;
-	background-color: #0006;
-	min-width: 1em;
-	text-align: center;
-	min-height: 3ex;
-}
+a.nav { background-color: #0006; }
+a.nav svg { display: block; }
+a.nav .fg { fill: #00c; }
+
 a.view {
 	flex-grow: 1; flex-basis: 0;
 	display: flex; flex-direction: column;
 }
 a:link:hover.view { background: inherit; }
 
+a.view picture {
+	display: flex; flex-direction: column;
+	flex-grow: 1; flex-basis: 0;
+}
+
 a.view img {
 	min-width: 0; min-height: 0;
 	max-width: 100%; max-height: 100%;
@@ -142,7 +162,31 @@ 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, div.gallery.smallthumb { display: flex; }
+div.thumbstrip.medthumb, div.gallery.medthumb { display: none; }
+div.thumbstrip.bigthumb, div.gallery.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; }
+}
+@media (min-width: 760px) and (max-width: 1079px) {
+	div.gallery.smallthumb { display: none; }
+	div.gallery.medthumb { display: flex; }
+	div.gallery.bigthumb { display: none; }
+}
+@media (min-width: 1080px) {
+	div.gallery.smallthumb { display: none; }
+	div.gallery.medthumb { display: none; }
+	div.gallery.bigthumb { display: flex; }
 }
 
 /*----- That's all, folks -------------------------------------------------*/