3 * Style sheet for Trivial Gallery.
5 * (c) 2021 Mark Wooding
8 /*----- Licensing notice --------------------------------------------------*
10 * This file is part of Trivial Gallery.
12 * Trivial Gallery is free software: you can redistribute it and/or modify
13 * it under the terms of the GNU Affero General Public License as
14 * published by the Free Software Foundation; either version 3 of the
15 * License, or (at your option) any later version.
17 * Trivial Gallery is distributed in the hope that it will be useful, but
18 * WITHOUT ANY WARRANTY; without even the implied warranty of
19 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
20 * Affero General Public License for more details.
22 * You should have received a copy of the GNU Affero General Public
23 * License along with Trivial Gallery. If not, see
24 * <https://www.gnu.org/licenses/>.
27 html { height: 100%; }
29 height: calc
(100% - 2ex);
30 display: flex
; flex-direction: column
;
31 margin-top: 0; margin-bottom: 0;
32 background-color: white
;
37 a { text-decoration: none
; }
38 a:link { color: blue
; }
39 a:link:active
, a:visited
{ color: darkblue
; }
40 a:link:hover
, a:visited:hover
{ background: #ccc; }
44 border-bottom: thick black solid
;
45 margin-top: 0.5ex; margin-bottom: 1.41ex;
49 h1 + h2, div.toc
+ h2, h1 + div > h2 {
54 h2 { border-top: thin black solid
; padding-top: 1ex; }
55 h2, h3 { margin-top: 3ex; }
56 h2 { font-size: x-large
; }
57 h3 { font-size: large
; }
58 h4, h5, h6 { display: run-in
; }
59 h1, h2, h3, h4, h5, h6 { font-family: sans-serif
; font-weight bold
; }
61 hr { width: calc
(100% - 4em); }
62 div.fill
{ flex-grow: 1; }
77 border-top: medium black solid
;
84 div.footer
img.licence
{ float: left
; margin: 1ex; }
86 margin-top: 1ex; margin-bottom: 1ex;
91 flex-direction: row
; flex-wrap: wrap
;
92 align-items: start
; justify-content: space-evenly
;
94 div.gallery
.medthumb
{ display: flex
; }
97 display: inline-block
;
101 a.thumb:link { display: inline-block
; }
102 img.thumb
{ object-fit: contain
; }
104 figure
.bigthumb
{ width: 228px; }
105 img.bigthumb
{ width: 228px; height: 228px; }
107 figure
.medthumb
{ width: 144px; }
108 img.medthumb
{ width: 144px; height: 144px; }
110 figure
.smallthumb
{ width: 96px; }
111 img.smallthumb
{ width: 96px; height: 96px; }
114 border: thin black solid
;
117 background-color: #ccc;
118 padding-left: 1em; padding-right: 1em;
119 margin-top: 2ex; margin-bottom: 2ex;
122 figure
.thumb figcaption
{ display: block
; }
123 figcaption
{ text-align: center; }
124 figcaption
span.name
{ font-family: sans-serif
; }
125 figcaption
span.comment
{ font-style: italic
; margin-inline-start: 1em; }
128 flex-grow: 1; flex-basis: 0;
129 display: flex
; flex-direction: row
;
135 display: flex
; flex-direction: row
; align-items: center;
137 div.prev
{ left: 0%; }
138 div.next
{ right: 0%; }
142 background-color: #0006;
148 flex-grow: 1; flex-basis: 0;
149 display: flex
; flex-direction: column
;
151 a:link:hover
.view
{ background: inherit
; }
154 min-width: 0; min-height: 0;
155 max-width: 100%; max-height: 100%;
156 flex-grow: 1; flex-basis: 0;
164 flex-direction: row
; align-self: center;
167 div.thumbstrip
.smallthumb
{ display: flex
; }
168 div.thumbstrip
.medthumb
{ display: none
; }
169 div.thumbstrip
.bigthumb
{ display: none
; }
170 @media
(min-height: 1200px) and
(max-height: 1599px) {
171 div.thumbstrip
.smallthumb
{ display: none
; }
172 div.thumbstrip
.medthumb
{ display: flex
; }
173 div.thumbstrip
.bigthumb
{ display: none
; }
175 @media
(min-height: 1600px) {
176 div.thumbstrip
.smallthumb
{ display: none
; }
177 div.thumbstrip
.medthumb
{ display: none
; }
178 div.thumbstrip
.bigthumb
{ display: flex
; }
181 /*----- That's all, folks -------------------------------------------------*/