| 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 | |
| 83 | div.pic { |
| 84 | display: inline-block; |
| 85 | vertical-align: top; |
| 86 | width: 228px; |
| 87 | margin: 1em; |
| 88 | } |
| 89 | |
| 90 | div.pic a:link { display: inline-block; } |
| 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 | |
| 106 | div.caption { |
| 107 | display: block; |
| 108 | width: 228px; |
| 109 | } |
| 110 | div.caption span.name { font-family: sans-serif; } |
| 111 | div.caption span.comment { font-style: italic; margin-inline-start: 1em; } |
| 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; |
| 131 | min-height: 3.5ex; |
| 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 { |
| 147 | max-width: 100%; |
| 148 | overflow-x: auto; |
| 149 | text-align: center; |
| 150 | display: flex; flex-direction: row; align-self: center; |
| 151 | } |
| 152 | |
| 153 | /*----- That's all, folks -------------------------------------------------*/ |