git.plutz.net Git - clickslide/blob - clickslide.css

   1 /* === Colors === */
   2
   3 footer,
   4 body a.toplevel:before,
   5 body span.count,
   6 div.slide:target:after,
   7 div.slide:target + a, div.slide:target + a + a,
   8 :target + a:before, :target + a + a:before
   9 { color: #888; }
  10
  11 body
  12 { background-color: #AAA;
  13   background-image: repeating-linear-gradient( to bottom right, #AAA, #999 8px);
  14 }
  15
  16 div.slide
  17 { background-color: #FFF;
  18   background-image: repeating-linear-gradient( #FFF, #EEE 4px);
  19 }
  20
  21 div.slide:target:after,
  22 footer:before, body:after
  23 { background-color: #EEE;
  24   background-image: repeating-linear-gradient(#EEE, #DDD 8px);
  25 }
  26
  27 div.slide h1, div.slide h2
  28 { background-color: #EEE;
  29   background-image: repeating-linear-gradient(#EEE, #DDD 8px);
  30 }
  31
  32 div.slide pre, div.slide code
  33 { background-color: #DDD;
  34   background-image: repeating-linear-gradient(#CCC, #DDD 4px);
  35 }
  36
  37 div.slide:after  /* slide number on overview screen */
  38 { color: #AAA; }
  39
  40 /* === Overall Layout === */
  41
  42 * {
  43   box-sizing: border-box;
  44   margin: 0; padding: 0;
  45   background-position: center;
  46   background-repeat: no-repeat;
  47   background-size: cover;
  48 }
  49
  50 /*  min-height: 240px */     body { font-size:  9px; }
  51 @media(min-height: 320px)  { body { font-size: 12px; } }
  52 @media(min-height: 480px)  { body { font-size: 19px; } }
  53 @media(min-height: 720px)  { body { font-size: 28px; } }
  54 @media(min-height: 768px)  { body { font-size: 30px; } }
  55 @media(min-height: 800px)  { body { font-size: 32px; } }
  56 @media(min-height: 960px)  { body { font-size: 38px; } }
  57 @media(min-height: 1024px) { body { font-size: 41px; } }
  58 @media(min-height: 1080px) { body { font-size: 43px; } }
  59 @media(min-height: 2160px) { body { font-size: 86px; } }
  60
  61 body {
  62   font-family: sans-serif;
  63   padding: 2em 1em 6em 1em;
  64   #background-color: #555;
  65   text-align: center;
  66   overflow-x: hidden;
  67 }
  68 body * {
  69   text-align: left;
  70   font-size: inherit;
  71 }
  72
  73 body:after {
  74   position: fixed;
  75   bottom: 0; left: 0;
  76   width: 100%;
  77   height: 1.25em;
  78   content: ' ';
  79   #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px);
  80 }
  81
  82 a.previous, a.next ,a.toplevel {
  83   text-decoration: none;
  84 }
  85
  86 footer {
  87   position: fixed;
  88   bottom: 0; left: 0;
  89   width: 100%;
  90   font-size: .75em;
  91   padding: .5em 4em .5em 12em;
  92   text-align: center;
  93   #color: #888;
  94   z-index: 4;
  95   /* footer must not have background, so slide number is not covered */
  96 }
  97 footer:before {  /* fake background in case footer spans multiple lines */
  98   content: ' ';
  99   position: absolute;
 100   top: 0; left: 0;
 101   bottom: 1.5em;
 102   width: 100%;
 103   #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px);
 104   z-index: -1;
 105 }
 106
 107 body a.toplevel {
 108   position: fixed;
 109   bottom: 0; left: 8em;
 110   width: 2ex; overflow: hidden;
 111   font-size: .875em;
 112   padding-bottom: .25em;
 113   color: transparent;
 114   z-index: 5;
 115 }
 116 body a.toplevel:before {
 117   #color: #888;
 118   content: '\2196';
 119 }
 120
 121 body span.count {
 122   position: fixed;
 123   bottom: 0; left: 6.25em;
 124   font-size: .875em;
 125   padding-bottom: .125em;
 126   #color: #888;
 127   z-index: 5;
 128 }
 129
 130 /* ==== Overview Screen ==== */
 131
 132 div.slide, a.nextslide {
 133   font-size: .15625em;
 134 }
 135
 136 div.slide {
 137   position: relative;
 138   display: inline-block;
 139   overflow: hidden;
 140   width: 48em; height: 30em;
 141   margin-left: -48em;
 142   border: 1px solid black;
 143 }
 144
 145 div.slide:after {  /* slide number */
 146   position: absolute;
 147   bottom: 0; left: 0;
 148   font-size: 15em;
 149   line-height: 1em;
 150   text-align: left;
 151   content: attr(count);
 152   padding-left: .125em;
 153   #color: #DDD;
 154 }
 155
 156 div.slide + a { display: none; }
 157 a.nextslide {
 158   display: inline-block;
 159   position: relative;
 160   vertical-align: top;
 161   width: 48em; line-height: 30em;
 162   color: transparent;
 163   z-index: 2;
 164 }
 165 #div.slide:nth-of-type(1) { margin-right: .5em; }
 166
 167 /* ==== Slide Appearance ==== */
 168
 169 div.slide {
 170   #background: #FFF no-repeat center;
 171   text-align: center;
 172   line-height: 1.5em;
 173 }
 174
 175 div.slide > * {
 176   margin-top: 1em;
 177   max-width: 85%;
 178   margin-left: auto;
 179   margin-right: auto;
 180 }
 181
 182 div.slide > *:first-child:last-child,
 183 div.slide > h2:first-child + :last-child {
 184   margin-top: 20%;
 185   transform: translate(0, -50%);
 186 }
 187
 188 div.slide h1, div.slide h2 {
 189   display: block;
 190   text-align: center;
 191   font-size: 1.5em;
 192   margin-top: 0;
 193   margin-bottom: 1em;
 194   width: 100%; max-width: 100%;
 195   #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px);
 196 }
 197
 198 div.slide h1,
 199 div.slide > h1:first-child:last-child {
 200   margin-top: 25%;
 201   margin-bottom: 0;
 202   padding: .5em 2em;
 203 }
 204
 205 div.slide h2 {
 206   padding: .25em 1em;
 207 }
 208
 209 div.slide > table {
 210   width: 85%;
 211 }
 212 div.slide * table {
 213   width: 100%;
 214 }
 215
 216 div.slide ul li {
 217   list-style-type: square;
 218   margin-left: 2em;
 219 }
 220
 221 div.slide ul ul, div.slide ul ol,
 222 div.slide ol ul, div.slide ol ol {
 223   margin-left: -1em;
 224 }
 225
 226 div.slide > ul,
 227 div.slide > ol {
 228   width: fit-content;
 229   margin: .25em auto;
 230 }
 231
 232 div.slide pre, div.slide code {
 233   #background-color: rgba(224,224,224,128);
 234   font-family: monospace;
 235 }
 236 div.slide pre {
 237   padding: 1ex;
 238   text-align: left;
 239   overflow: hidden;
 240 }
 241 div.slide code {
 242   padding: 0 .5em;
 243 }
 244
 245 /* ==== Slide Display ==== */
 246
 247 div.slide:target {
 248   position: fixed;
 249   z-index: 3;
 250   top: 0; bottom: 0; left: 0; right: 0;
 251   width: auto; height: 100%;
 252   margin: 0;
 253   border: none;
 254   font-size: inherit;
 255 }
 256
 257 /* slide number, footer bar*/
 258 div.slide:target:after {
 259   position: absolute;
 260   bottom: 0; left: 0;
 261   width: 100%;
 262   font-size: .875em;
 263   line-height: 1.5em;
 264   text-align: left;
 265   content: attr(count) " /";
 266   padding-left: 4em;
 267   #color: #888;
 268   #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px);
 269 }
 270
 271 /* back and forth link buttons */
 272 div.slide:target + a,
 273 div.slide:target + a + a {
 274   position: static;
 275   display: block;
 276   font-size: inherit;
 277   line-height: 1em;
 278   #color: #888;
 279 }
 280 :target + a:before, :target + a + a:before {
 281   display: block;
 282   position: fixed;
 283   bottom: 0;
 284   #color: #888;
 285   padding: 0 1em .25em 1em;
 286   z-index: 4;
 287 }
 288 :target + a:before { left:  0; }
 289 :target + a:before { content: '\22d8'; }
 290 :target + a + a:before { right: 0; }
 291 :target + a + a:before { content: '\22d9'; }
 292
 293 .uncover[type="checkbox"] + * { opacity: .2; }
 294 .uncover[type="checkbox"]:checked + * { opacity: 1; }
 295
 296 .uncover[type="checkbox"] {
 297   position: fixed;
 298   top: 0; bottom: 0; left: 0; right: 0;
 299   width: 100%; height: 100%;
 300   opacity: 0;
 301   z-index: 1;
 302 }
 303
 304 .uncover[type="checkbox"] + * + .uncover[type="checkbox"] { display: none; }
 305 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"] { display: inline; }
 306 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"]:checked,
 307 .uncover[type="checkbox"]:checked { display: none; }
 308