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 { | |
79 | display: block; | |
80 | text-align: center; | |
81 | } | |
82 | ||
83bfcbc7 | 83 | figure.thumb { |
6ac5dde2 MW |
84 | display: inline-block; |
85 | vertical-align: top; | |
86 | width: 228px; | |
87 | margin: 1em; | |
88 | } | |
89 | ||
56340849 | 90 | a.thumb:link { display: inline-block; } |
6ac5dde2 MW |
91 | |
92 | img.thumb { | |
93 | width: 228px; height: 228px; | |
94 | object-fit: contain; | |
95 | } | |
96 | ||
97 | div.comment { | |
98 | border: thin black solid; | |
99 | max-width: 40em; | |
100 | align-self: center; | |
101 | background-color: #ccc; | |
102 | padding-left: 1em; padding-right: 1em; | |
103 | margin-top: 2ex; margin-bottom: 2ex; | |
104 | } | |
105 | ||
83bfcbc7 | 106 | figure.thumb figcaption { |
6ac5dde2 MW |
107 | display: block; |
108 | width: 228px; | |
6ac5dde2 | 109 | } |
83bfcbc7 MW |
110 | figcaption span.name { font-family: sans-serif; } |
111 | figcaption span.comment { font-style: italic; margin-inline-start: 1em; } | |
6ac5dde2 MW |
112 | |
113 | div.viewnav { | |
114 | flex-grow: 1; flex-basis: 0; | |
115 | display: flex; flex-direction: row; | |
116 | position: relative; | |
117 | } | |
118 | div.prev, div.next { | |
119 | position: absolute; | |
120 | height: 100%; | |
121 | display: flex; flex-direction: row; align-items: center; | |
122 | } | |
123 | div.prev { left: 0%; } | |
124 | div.next { right: 0%; } | |
125 | a.prev, a.next { | |
126 | font-size: 400%; | |
127 | font-weight: bold; | |
128 | background-color: #0006; | |
129 | min-width: 1em; | |
130 | text-align: center; | |
fbecddf9 | 131 | min-height: 3ex; |
6ac5dde2 MW |
132 | } |
133 | a.view { | |
134 | flex-grow: 1; flex-basis: 0; | |
135 | display: flex; flex-direction: column; | |
136 | } | |
137 | a:link:hover.view { background: inherit; } | |
138 | ||
139 | a.view img { | |
140 | min-width: 0; min-height: 0; | |
141 | max-width: 100%; max-height: 100%; | |
142 | flex-grow: 1; flex-basis: 0; | |
143 | object-fit: contain; | |
144 | } | |
145 | ||
146 | div.thumbstrip { | |
9d4672d4 | 147 | max-width: 100%; |
6ac5dde2 MW |
148 | overflow-x: auto; |
149 | text-align: center; | |
9d4672d4 | 150 | display: flex; flex-direction: row; align-self: center; |
6ac5dde2 MW |
151 | } |
152 | ||
153 | /*----- That's all, folks -------------------------------------------------*/ |