mdw@git.distorted.org.uk Git - tgal/blob - static/tgal.css

   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
  95 figure.thumb {
  96         display: inline-block;
  97         vertical-align: top;
  98         margin: 1em;
  99 }
 100 a.thumb:link { display: inline-block; }
 101 img.thumb { object-fit: contain; }
 102
 103 figure.bigthumb { width: 228px; }
 104 img.bigthumb { width: 228px; height: 228px; }
 105
 106 figure.medthumb { width: 144px; }
 107 img.medthumb { width: 144px; height: 144px; }
 108
 109 figure.smallthumb { width: 96px; }
 110 img.smallthumb { width: 96px; height: 96px; }
 111
 112 div.comment {
 113         border: thin black solid;
 114         max-width: 40em;
 115         align-self: center;
 116         background-color: #ccc;
 117         padding-left: 1em; padding-right: 1em;
 118         margin-top: 2ex; margin-bottom: 2ex;
 119 }
 120
 121 figure.thumb figcaption { display: block; }
 122 figcaption { text-align: center; }
 123 figcaption span.name { font-family: sans-serif; }
 124 figcaption span.comment { font-style: italic; margin-inline-start: 1em; }
 125 .smallthumb figcaption { font-size: 80%; }
 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.nav { background-color: #0006; }
 140 a.nav svg { display: block; }
 141 a.nav .fg { fill: #00c; }
 142
 143 a.view {
 144         flex-grow: 1; flex-basis: 0;
 145         display: flex; flex-direction: column;
 146 }
 147 a:link:hover.view { background: inherit; }
 148
 149 a.view picture {
 150         display: flex; flex-direction: column;
 151         flex-grow: 1; flex-basis: 0;
 152 }
 153
 154 a.view img {
 155         min-width: 0; min-height: 0;
 156         max-width: 100%; max-height: 100%;
 157         flex-grow: 1; flex-basis: 0;
 158         object-fit: contain;
 159 }
 160
 161 div.thumbstrip {
 162         max-width: 100%;
 163         overflow-x: auto;
 164         text-align: center;
 165         flex-direction: row; align-self: center;
 166 }
 167
 168 div.thumbstrip.smallthumb, div.gallery.smallthumb { display: flex; }
 169 div.thumbstrip.medthumb, div.gallery.medthumb { display: none; }
 170 div.thumbstrip.bigthumb, div.gallery.bigthumb { display: none; }
 171 @media (min-height: 1200px) and (max-height: 1599px) {
 172         div.thumbstrip.smallthumb { display: none; }
 173         div.thumbstrip.medthumb { display: flex; }
 174         div.thumbstrip.bigthumb { display: none; }
 175 }
 176 @media (min-height: 1600px) {
 177         div.thumbstrip.smallthumb { display: none; }
 178         div.thumbstrip.medthumb { display: none; }
 179         div.thumbstrip.bigthumb { display: flex; }
 180 }
 181 @media (min-width: 760px) and (max-width: 1079px) {
 182         div.gallery.smallthumb { display: none; }
 183         div.gallery.medthumb { display: flex; }
 184         div.gallery.bigthumb { display: none; }
 185 }
 186 @media (min-width: 1080px) {
 187         div.gallery.smallthumb { display: none; }
 188         div.gallery.medthumb { display: none; }
 189         div.gallery.bigthumb { display: flex; }
 190 }
 191
 192 /*----- That's all, folks -------------------------------------------------*/