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 | ||
64 | div.footer { | |
65 | border-top: medium black solid; | |
66 | margin-top: 3.43ex; | |
67 | padding-top: 1ex; | |
68 | font-size: small; | |
69 | font-style: italic; | |
70 | text-align: right; | |
71 | } | |
72 | div.footer img.licence { float: left; margin: 1ex; } | |
73 | div.footitem { | |
74 | margin-top: 1ex; margin-bottom: 1ex; | |
75 | clear: both; | |
76 | } | |
77 | ||
78 | div.gallery { | |
6e749fab | 79 | flex-direction: row; flex-wrap: wrap; |
8dc1dc0f | 80 | align-items: start; justify-content: space-evenly; |
6ac5dde2 | 81 | } |
1408b7a2 | 82 | div.gallery.medthumb { display: flex; } |
6ac5dde2 | 83 | |
83bfcbc7 | 84 | figure.thumb { |
6ac5dde2 MW |
85 | display: inline-block; |
86 | vertical-align: top; | |
6ac5dde2 MW |
87 | margin: 1em; |
88 | } | |
56340849 | 89 | a.thumb:link { display: inline-block; } |
dfdd1964 | 90 | img.thumb { object-fit: contain; } |
6ac5dde2 | 91 | |
dfdd1964 MW |
92 | figure.bigthumb { width: 228px; } |
93 | img.bigthumb { width: 228px; height: 228px; } | |
6ac5dde2 | 94 | |
1408b7a2 MW |
95 | figure.medthumb { width: 144px; } |
96 | img.medthumb { width: 144px; height: 144px; } | |
97 | ||
98 | figure.smallthumb { width: 96px; } | |
99 | img.smallthumb { width: 96px; height: 96px; } | |
100 | ||
6ac5dde2 MW |
101 | div.comment { |
102 | border: thin black solid; | |
103 | max-width: 40em; | |
104 | align-self: center; | |
105 | background-color: #ccc; | |
106 | padding-left: 1em; padding-right: 1em; | |
107 | margin-top: 2ex; margin-bottom: 2ex; | |
108 | } | |
109 | ||
dfdd1964 | 110 | figure.thumb figcaption { display: block; } |
152ba8ec | 111 | figcaption { text-align: center; } |
83bfcbc7 MW |
112 | figcaption span.name { font-family: sans-serif; } |
113 | figcaption span.comment { font-style: italic; margin-inline-start: 1em; } | |
6ac5dde2 MW |
114 | |
115 | div.viewnav { | |
116 | flex-grow: 1; flex-basis: 0; | |
117 | display: flex; flex-direction: row; | |
118 | position: relative; | |
119 | } | |
120 | div.prev, div.next { | |
121 | position: absolute; | |
122 | height: 100%; | |
123 | display: flex; flex-direction: row; align-items: center; | |
124 | } | |
125 | div.prev { left: 0%; } | |
126 | div.next { right: 0%; } | |
127 | a.prev, a.next { | |
128 | font-size: 400%; | |
129 | font-weight: bold; | |
130 | background-color: #0006; | |
131 | min-width: 1em; | |
132 | text-align: center; | |
fbecddf9 | 133 | min-height: 3ex; |
6ac5dde2 MW |
134 | } |
135 | a.view { | |
136 | flex-grow: 1; flex-basis: 0; | |
137 | display: flex; flex-direction: column; | |
138 | } | |
139 | a:link:hover.view { background: inherit; } | |
140 | ||
141 | a.view img { | |
142 | min-width: 0; min-height: 0; | |
143 | max-width: 100%; max-height: 100%; | |
144 | flex-grow: 1; flex-basis: 0; | |
145 | object-fit: contain; | |
146 | } | |
147 | ||
148 | div.thumbstrip { | |
9d4672d4 | 149 | max-width: 100%; |
6ac5dde2 MW |
150 | overflow-x: auto; |
151 | text-align: center; | |
6e749fab | 152 | flex-direction: row; align-self: center; |
6ac5dde2 | 153 | } |
1408b7a2 MW |
154 | |
155 | div.thumbstrip.smallthumb { display: flex; } | |
156 | div.thumbstrip.medthumb { display: none; } | |
157 | div.thumbstrip.bigthumb { display: none; } | |
158 | @media (min-height: 1200px) and (max-height: 1599px) { | |
159 | div.thumbstrip.smallthumb { display: none; } | |
160 | div.thumbstrip.medthumb { display: flex; } | |
161 | div.thumbstrip.bigthumb { display: none; } | |
162 | } | |
163 | @media (min-height: 1600px) { | |
164 | div.thumbstrip.smallthumb { display: none; } | |
165 | div.thumbstrip.medthumb { display: none; } | |
166 | div.thumbstrip.bigthumb { display: flex; } | |
167 | } | |
6ac5dde2 MW |
168 | |
169 | /*----- That's all, folks -------------------------------------------------*/ |