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
;
96 display: inline-block
;
100 a.thumb:link { display: inline-block
; }
101 img.thumb
{ object-fit: contain
; }
103 figure
.bigthumb
{ width: 228px; }
104 img.bigthumb
{ width: 228px; height: 228px; }
106 figure
.medthumb
{ width: 144px; }
107 img.medthumb
{ width: 144px; height: 144px; }
109 figure
.smallthumb
{ width: 96px; }
110 img.smallthumb
{ width: 96px; height: 96px; }
113 border: thin black solid
;
116 background-color: #ccc;
117 padding-left: 1em; padding-right: 1em;
118 margin-top: 2ex; margin-bottom: 2ex;
121 figure
.thumb figcaption
{ display: block
; }
122 figcaption
{ text-align: center; }
123 figcaption
span.name
{ font-family: sans-serif
; }
124 figcaption
span.comment
{ font-style: italic
; margin-inline-start: 1em; }
125 .smallthumb figcaption { font-size: 80%; }
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%; }
139 a.nav
{ background-color: #0006; }
140 a.nav svg
{ display: block
; }
141 a.nav
.fg
{ fill: #00c; }
144 flex-grow: 1; flex-basis: 0;
145 display: flex
; flex-direction: column
;
147 a:link:hover
.view
{ background: inherit
; }
150 display: flex
; flex-direction: column
;
151 flex-grow: 1; flex-basis: 0;
155 min-width: 0; min-height: 0;
156 max-width: 100%; max-height: 100%;
157 flex-grow: 1; flex-basis: 0;
165 flex-direction: row
; align-self: center;
168 div.thumbstrip
.smallthumb
, div.gallery
.smallthumb
{ display: flex
; }
169 div.thumbstrip
.medthumb
, div.gallery
.medthumb
{ display: none
; }
170 div.thumbstrip
.bigthumb
, div.gallery
.bigthumb
{ display: none
; }
171 @media
(min-height: 1200px) and
(max-height: 1599px) {
172 div.thumbstrip
.smallthumb
{ display: none
; }
173 div.thumbstrip
.medthumb
{ display: flex
; }
174 div.thumbstrip
.bigthumb
{ display: none
; }
176 @media
(min-height: 1600px) {
177 div.thumbstrip
.smallthumb
{ display: none
; }
178 div.thumbstrip
.medthumb
{ display: none
; }
179 div.thumbstrip
.bigthumb
{ display: flex
; }
181 @media
(min-width: 760px) and
(max-width: 1079px) {
182 div.gallery
.smallthumb
{ display: none
; }
183 div.gallery
.medthumb
{ display: flex
; }
184 div.gallery
.bigthumb
{ display: none
; }
186 @media
(min-width: 1080px) {
187 div.gallery
.smallthumb
{ display: none
; }
188 div.gallery
.medthumb
{ display: none
; }
189 div.gallery
.bigthumb
{ display: flex
; }
192 /*----- That's all, folks -------------------------------------------------*/