| 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.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 | |
| 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 { |
| 91 | flex-direction: row; flex-wrap: wrap; |
| 92 | align-items: start; justify-content: space-evenly; |
| 93 | } |
| 94 | div.gallery.medthumb { display: flex; } |
| 95 | |
| 96 | figure.thumb { |
| 97 | display: inline-block; |
| 98 | vertical-align: top; |
| 99 | margin: 1em; |
| 100 | } |
| 101 | a.thumb:link { display: inline-block; } |
| 102 | img.thumb { object-fit: contain; } |
| 103 | |
| 104 | figure.bigthumb { width: 228px; } |
| 105 | img.bigthumb { width: 228px; height: 228px; } |
| 106 | |
| 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 | |
| 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 | |
| 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; } |
| 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; |
| 145 | min-height: 3ex; |
| 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 | |
| 153 | a.view img { |
| 154 | min-width: 0; min-height: 0; |
| 155 | max-width: 100%; max-height: 100%; |
| 156 | flex-grow: 1; flex-basis: 0; |
| 157 | object-fit: contain; |
| 158 | } |
| 159 | |
| 160 | div.thumbstrip { |
| 161 | max-width: 100%; |
| 162 | overflow-x: auto; |
| 163 | text-align: center; |
| 164 | flex-direction: row; align-self: center; |
| 165 | } |
| 166 | |
| 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; } |
| 174 | } |
| 175 | @media (min-height: 1600px) { |
| 176 | div.thumbstrip.smallthumb { display: none; } |
| 177 | div.thumbstrip.medthumb { display: none; } |
| 178 | div.thumbstrip.bigthumb { display: flex; } |
| 179 | } |
| 180 | |
| 181 | /*----- That's all, folks -------------------------------------------------*/ |