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 li pre {
 233   margin-bottom: .25em;
 234 }
 235
 236 div.slide pre, div.slide code {
 237   #background-color: rgba(224,224,224,128);
 238   font-family: monospace;
 239 }
 240 div.slide pre {
 241   padding: 1ex;
 242   text-align: left;
 243   overflow: hidden;
 244 }
 245 div.slide code {
 246   padding: 0 .5em;
 247 }
 248
 249 /* ==== Slide Display ==== */
 250
 251 div.slide:target {
 252   position: fixed;
 253   z-index: 3;
 254   top: 0; bottom: 0; left: 0; right: 0;
 255   width: auto; height: 100%;
 256   margin: 0;
 257   border: none;
 258   font-size: inherit;
 259 }
 260
 261 /* slide number, footer bar*/
 262 div.slide:target:after {
 263   position: absolute;
 264   bottom: 0; left: 0;
 265   width: 100%;
 266   font-size: .875em;
 267   line-height: 1.5em;
 268   text-align: left;
 269   content: attr(count) " /";
 270   padding-left: 4em;
 271   #color: #888;
 272   #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px);
 273 }
 274
 275 /* back and forth link buttons */
 276 div.slide:target + a,
 277 div.slide:target + a + a {
 278   position: static;
 279   display: block;
 280   font-size: inherit;
 281   line-height: 1em;
 282   #color: #888;
 283 }
 284 :target + a:before, :target + a + a:before {
 285   display: block;
 286   position: fixed;
 287   bottom: 0;
 288   #color: #888;
 289   padding: 0 1em .25em 1em;
 290   z-index: 4;
 291 }
 292 :target + a:before { left:  0; }
 293 :target + a:before { content: '\22d8'; }
 294 :target + a + a:before { right: 0; }
 295 :target + a + a:before { content: '\22d9'; }
 296
 297 .uncover[type="checkbox"] + * { opacity: .2; }
 298 .uncover[type="checkbox"]:checked + * { opacity: 1; }
 299
 300 .uncover[type="checkbox"] {
 301   position: fixed;
 302   top: 0; bottom: 0; left: 0; right: 0;
 303   width: 100%; height: 100%;
 304   opacity: 0;
 305   z-index: 1;
 306 }
 307
 308 .uncover[type="checkbox"] + * + .uncover[type="checkbox"] { display: none; }
 309 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"] { display: inline; }
 310 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"]:checked,
 311 .uncover[type="checkbox"]:checked { display: none; }
 312