Introduce multiple thumbnail strips, and select one in a sensible way.

[tgal] / static / tgal.css

/* -*-css-*-
 *
 * Style sheet for Trivial Gallery.
 *
 * (c) 2021 Mark Wooding
 */

/*----- Licensing notice --------------------------------------------------*
 *
 * This file is part of Trivial Gallery.
 *
 * Trivial Gallery is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation; either version 3 of the
 * License, or (at your option) any later version.
 *
 * Trivial Gallery is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public
 * License along with Trivial Gallery.  If not, see
 * <https://www.gnu.org/licenses/>.
 */

html { height: 100%; }
body {
	height: calc(100% - 2ex);
	display: flex; flex-direction: column;
	margin-top: 0; margin-bottom: 0;
	background-color: white;
	color: black;
	margin: 1ex 2em;
}

a { text-decoration: none; }
a:link { color: blue; }
a:link:active, a:visited { color: darkblue; }
a:link:hover, a:visited:hover { background: #ccc; }

h1 {
	padding: 0.47ex 0;
	border-bottom: thick black solid;
	margin-top: 0.5ex; margin-bottom: 1.41ex;
	font-weight: bold;
	font-size: 200%;
}
h1 + h2, div.toc + h2, h1 + div > h2 {
	border-top: none;
	padding-top: 1ex;
	margin-top: 0;
}
h2 { border-top: thin black solid; padding-top: 1ex; }
h2, h3 { margin-top: 3ex; }
h2 { font-size: x-large; }
h3 { font-size: large; }
h4, h5, h6 { display: run-in; }
h1, h2, h3, h4, h5, h6 { font-family: sans-serif; font-weight bold; }

hr { width: calc(100% - 4em); }
div.fill { flex-grow: 1; }

div.footer {
	border-top: medium black solid;  
	margin-top: 3.43ex;
	padding-top: 1ex;
	font-size: small;
	font-style: italic;
	text-align: right;
}
div.footer img.licence { float: left; margin: 1ex; }
div.footitem {
	margin-top: 1ex; margin-bottom: 1ex;
	clear: both;
}

div.gallery {
	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;
	margin: 1em;
}
a.thumb:link { display: inline-block; }
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;
	align-self: center;
	background-color: #ccc;
	padding-left: 1em; padding-right: 1em;
	margin-top: 2ex; margin-bottom: 2ex;
}

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; }

div.viewnav {
	flex-grow: 1; flex-basis: 0;
	display: flex; flex-direction: row;
	position: relative;
}
div.prev, div.next {
	position: absolute;
	height: 100%;
	display: flex; flex-direction: row; align-items: center;
}
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.view {
	flex-grow: 1; flex-basis: 0;
	display: flex; flex-direction: column;
}
a:link:hover.view { background: inherit; }

a.view img {
	min-width: 0; min-height: 0;
	max-width: 100%; max-height: 100%;
	flex-grow: 1; flex-basis: 0;
	object-fit: contain;
}

div.thumbstrip {
	max-width: 100%;
	overflow-x: auto;
	text-align: 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 -------------------------------------------------*/