mason/dhandler (.image), static/tgal.css: Adaptive view scaling.

[tgal] / static / tgal.css

diff --git a/static/tgal.css b/static/tgal.css
index 251541f85acbadf14a1e33c3d8b52740b87347a9..73e393320c8156c16bcab340d93199701b08c651 100644 (file)
--- 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,23 +88,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 +119,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; }
@@ -137,6 +150,11 @@ a.view {
 }
 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%;
@@ -148,7 +166,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 -------------------------------------------------*/