Commit | Line | Data |
---|---|---|
6ac5dde2 MW |
1 | /* -*-css-*- |
2 | * | |
3 | * Style sheet for Trivial Gallery. | |
4 | * | |
5 | * (c) 2021 Mark Wooding | |
6 | */ | |
7 | ||
8 | /*----- Licensing notice --------------------------------------------------* | |
9 | * | |
10 | * This file is part of Trivial Gallery. | |
11 | * | |
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. | |
16 | * | |
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. | |
21 | * | |
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/>. | |
25 | */ | |
26 | ||
27 | html { height: 100%; } | |
28 | body { | |
29 | height: calc(100% - 2ex); | |
30 | display: flex; flex-direction: column; | |
31 | margin-top: 0; margin-bottom: 0; | |
32 | background-color: white; | |
33 | color: black; | |
34 | margin: 1ex 2em; | |
35 | } | |
36 | ||
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; } | |
41 | ||
42 | h1 { | |
43 | padding: 0.47ex 0; | |
44 | border-bottom: thick black solid; | |
45 | margin-top: 0.5ex; margin-bottom: 1.41ex; | |
46 | font-weight: bold; | |
47 | font-size: 200%; | |
48 | } | |
49 | h1 + h2, div.toc + h2, h1 + div > h2 { | |
50 | border-top: none; | |
51 | padding-top: 1ex; | |
52 | margin-top: 0; | |
53 | } | |
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; } | |
60 | ||
61 | hr { width: calc(100% - 4em); } | |
62 | div.fill { flex-grow: 1; } | |
63 | ||
aa5c3a51 MW |
64 | div.menu { |
65 | font-family: sans; | |
66 | font-weight: normal; | |
67 | font-size: initial; | |
68 | float: right; | |
69 | } | |
70 | h1 div.menu:before { | |
71 | visibility: hidden; | |
72 | font-size: 200%; | |
73 | content: ""; | |
74 | } | |
75 | ||
6ac5dde2 MW |
76 | div.footer { |
77 | border-top: medium black solid; | |
78 | margin-top: 3.43ex; | |
79 | padding-top: 1ex; | |
80 | font-size: small; | |
81 | font-style: italic; | |
82 | text-align: right; | |
83 | } | |
84 | div.footer img.licence { float: left; margin: 1ex; } | |
85 | div.footitem { | |
86 | margin-top: 1ex; margin-bottom: 1ex; | |
87 | clear: both; | |
88 | } | |
89 | ||
90 | div.gallery { | |
6e749fab | 91 | flex-direction: row; flex-wrap: wrap; |
8dc1dc0f | 92 | align-items: start; justify-content: space-evenly; |
6ac5dde2 | 93 | } |
1408b7a2 | 94 | div.gallery.medthumb { display: flex; } |
6ac5dde2 | 95 | |
83bfcbc7 | 96 | figure.thumb { |
6ac5dde2 MW |
97 | display: inline-block; |
98 | vertical-align: top; | |
6ac5dde2 MW |
99 | margin: 1em; |
100 | } | |
56340849 | 101 | a.thumb:link { display: inline-block; } |
dfdd1964 | 102 | img.thumb { object-fit: contain; } |
6ac5dde2 | 103 | |
dfdd1964 MW |
104 | figure.bigthumb { width: 228px; } |
105 | img.bigthumb { width: 228px; height: 228px; } | |
6ac5dde2 | 106 | |
1408b7a2 MW |
107 | figure.medthumb { width: 144px; } |
108 | img.medthumb { width: 144px; height: 144px; } | |
109 | ||
110 | figure.smallthumb { width: 96px; } | |
111 | img.smallthumb { width: 96px; height: 96px; } | |
112 | ||
6ac5dde2 MW |
113 | div.comment { |
114 | border: thin black solid; | |
115 | max-width: 40em; | |
116 | align-self: center; | |
117 | background-color: #ccc; | |
118 | padding-left: 1em; padding-right: 1em; | |
119 | margin-top: 2ex; margin-bottom: 2ex; | |
120 | } | |
121 | ||
dfdd1964 | 122 | figure.thumb figcaption { display: block; } |
152ba8ec | 123 | figcaption { text-align: center; } |
83bfcbc7 MW |
124 | figcaption span.name { font-family: sans-serif; } |
125 | figcaption span.comment { font-style: italic; margin-inline-start: 1em; } | |
6ac5dde2 MW |
126 | |
127 | div.viewnav { | |
128 | flex-grow: 1; flex-basis: 0; | |
129 | display: flex; flex-direction: row; | |
130 | position: relative; | |
131 | } | |
132 | div.prev, div.next { | |
133 | position: absolute; | |
134 | height: 100%; | |
135 | display: flex; flex-direction: row; align-items: center; | |
136 | } | |
137 | div.prev { left: 0%; } | |
138 | div.next { right: 0%; } | |
139 | a.prev, a.next { | |
140 | font-size: 400%; | |
141 | font-weight: bold; | |
142 | background-color: #0006; | |
143 | min-width: 1em; | |
144 | text-align: center; | |
fbecddf9 | 145 | min-height: 3ex; |
6ac5dde2 MW |
146 | } |
147 | a.view { | |
148 | flex-grow: 1; flex-basis: 0; | |
149 | display: flex; flex-direction: column; | |
150 | } | |
151 | a:link:hover.view { background: inherit; } | |
152 | ||
7cd805d1 MW |
153 | a.view picture { |
154 | display: flex; flex-direction: column; | |
155 | flex-grow: 1; flex-basis: 0; | |
156 | } | |
157 | ||
6ac5dde2 MW |
158 | a.view img { |
159 | min-width: 0; min-height: 0; | |
160 | max-width: 100%; max-height: 100%; | |
161 | flex-grow: 1; flex-basis: 0; | |
162 | object-fit: contain; | |
163 | } | |
164 | ||
165 | div.thumbstrip { | |
9d4672d4 | 166 | max-width: 100%; |
6ac5dde2 MW |
167 | overflow-x: auto; |
168 | text-align: center; | |
6e749fab | 169 | flex-direction: row; align-self: center; |
6ac5dde2 | 170 | } |
1408b7a2 MW |
171 | |
172 | div.thumbstrip.smallthumb { display: flex; } | |
173 | div.thumbstrip.medthumb { display: none; } | |
174 | div.thumbstrip.bigthumb { display: none; } | |
175 | @media (min-height: 1200px) and (max-height: 1599px) { | |
176 | div.thumbstrip.smallthumb { display: none; } | |
177 | div.thumbstrip.medthumb { display: flex; } | |
178 | div.thumbstrip.bigthumb { display: none; } | |
179 | } | |
180 | @media (min-height: 1600px) { | |
181 | div.thumbstrip.smallthumb { display: none; } | |
182 | div.thumbstrip.medthumb { display: none; } | |
183 | div.thumbstrip.bigthumb { display: flex; } | |
184 | } | |
6ac5dde2 MW |
185 | |
186 | /*----- That's all, folks -------------------------------------------------*/ |