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

   1 * {
   2   box-sizing: border-box;
   3   margin: 0; padding: 0;
   4   background-position: center;
   5   background-repeat: no-repeat;
   6   background-size: cover;
   7 }
   8
   9 /*  min-height: 240px */     body { font-size:  9px; }
  10 @media(min-height: 320px)  { body { font-size: 12px; } }
  11 @media(min-height: 480px)  { body { font-size: 19px; } }
  12 @media(min-height: 720px)  { body { font-size: 28px; } }
  13 @media(min-height: 768px)  { body { font-size: 30px; } }
  14 @media(min-height: 800px)  { body { font-size: 32px; } }
  15 @media(min-height: 960px)  { body { font-size: 38px; } }
  16 @media(min-height: 1024px) { body { font-size: 41px; } }
  17 @media(min-height: 1080px) { body { font-size: 43px; } }
  18 @media(min-height: 2160px) { body { font-size: 86px; } }
  19
  20 body {
  21   font-family: sans-serif;
  22   padding: 2em 1em 6em 1em;
  23   background-color: #555;
  24   text-align: center;
  25   overflow-x: hidden;
  26 }
  27 body * { text-align: left; }
  28
  29 body:after {
  30   position: fixed;
  31   bottom: 0; left: 0;
  32   width: 100%;
  33   background-color: #EEE;
  34   height: 1.25em;
  35   content: ' ';
  36 }
  37
  38 a.previous, a.next ,a.toplevel {
  39   text-decoration: none;
  40 }
  41
  42 footer {
  43   position: fixed;
  44   bottom: 0; left: 0;
  45   width: 100%;
  46   font-size: .75em;
  47   padding: .5em 4em .5em 12em;
  48   text-align: center;
  49   color: #888;
  50   z-index: 4;
  51 }
  52 footer:before {
  53   content: ' ';
  54   position: absolute;
  55   top: 0; left: 0;
  56   bottom: 1.5em;
  57   width: 100%;
  58   background-color: #EEE;
  59   z-index: -1;
  60 }
  61
  62 body a.toplevel {
  63   position: fixed;
  64   bottom: 0; left: 8em;
  65   width: 2ex; overflow: hidden;
  66   font-size: .875em;
  67   padding-bottom: .25em;
  68   color: #EEE;
  69   z-index: 5;
  70 }
  71 body a.toplevel:before {
  72   color: #888;
  73   content: '\2196';
  74 }
  75
  76 body span.count {
  77   position: fixed;
  78   bottom: 0; left: 6.25em;
  79   font-size: .875em;
  80   padding-bottom: .125em;
  81   color: #888;
  82   z-index: 5;
  83 }
  84
  85 /* ==== Overview Screen ==== */
  86
  87 div.slide, a.nextslide {
  88   font-size: .15625em;
  89 }
  90
  91 div.slide {
  92   position: relative;
  93   display: inline-block;
  94   overflow: hidden;
  95   width: 48em; height: 30em;
  96   margin-left: -48em;
  97   border: 1px solid black;
  98 }
  99
 100 div.slide + a { display: none; }
 101 a.nextslide {
 102   display: inline-block;
 103   position: relative;
 104   vertical-align: top;
 105   width: 48em; line-height: 30em;
 106   color: rgba(0, 0, 0, 0);
 107   z-index: 2;
 108 }
 109 #div.slide:nth-of-type(1) { margin-right: .5em; }
 110
 111 /* ==== Slide Appearance ==== */
 112
 113 div.slide {
 114   background: #FFF no-repeat center;
 115   text-align: center;
 116   line-height: 1.5em;
 117 }
 118
 119 div.slide:after {
 120   position: absolute;
 121   bottom: 0; left: 0;
 122   width: 100%;
 123   font-size: .875em;
 124   line-height: 1.5em;
 125   text-align: left;
 126   content: attr(count) " /";
 127   padding-left: 4em;
 128   background-color: #EEE;
 129   color: #888;
 130 }
 131
 132 div.slide > * {
 133   margin-top: 1em;
 134   max-width: 85%;
 135   margin-left: auto;
 136   margin-right: auto;
 137 }
 138
 139 div.slide > *:first-child:last-child,
 140 div.slide > h2:first-child + :last-child {
 141   margin-top: 20%;
 142   transform: translate(0, -50%);
 143 }
 144
 145 div.slide h1, div.slide h2 {
 146   display: block;
 147   background-color: #EEE;
 148   text-align: center;
 149   font-size: 1.5em;
 150   margin-top: 0;
 151   margin-bottom: 1em;
 152   width: 100%; max-width: 100%;
 153 }
 154
 155 div.slide h1,
 156 div.slide > h1:first-child:last-child {
 157   margin-top: 25%;
 158   margin-bottom: 0;
 159   padding: .5em 2em;
 160 }
 161
 162 div.slide h2 {
 163   padding: .25em 1em;
 164 }
 165
 166 div.slide ul li {
 167   list-style-type: square;
 168   margin-left: 2em;
 169 }
 170
 171 div.slide ul ul, div.slide ul ol,
 172 div.slide ol ul, div.slide ol ol {
 173   margin-left: -1em;
 174 }
 175
 176 div.slide > ul,
 177 div.slide > ol {
 178   width: fit-content;
 179   margin: .25em auto;
 180 }
 181
 182 div.slide pre {
 183   background-color: rgba(192,192,192,128);
 184   padding: 1ex;
 185   text-align: left;
 186   font-family: monospace;
 187   overflow: hidden;
 188 }
 189
 190 /* ==== Slide Display ==== */
 191
 192 div.slide:target {
 193   position: fixed;
 194   z-index: 3;
 195   top: 0; bottom: 0; left: 0; right: 0;
 196   width: auto; height: 100%;
 197   margin: 0;
 198   border: none;
 199   font-size: inherit;
 200 }
 201 div.slide:target + a,
 202 div.slide:target + a + a {
 203   position: static;
 204   display: block;
 205   font-size: inherit;
 206   line-height: 1em;
 207   color: #888;
 208 }
 209 :target + a:before, :target + a + a:before {
 210   display: block;
 211   position: fixed;
 212   bottom: 0;
 213   color: #888;
 214   padding: 0 1em .25em 1em;
 215   z-index: 4;
 216 }
 217 :target + a:before { left:  0; }
 218 :target + a:before { content: '\22d8'; }
 219 :target + a + a:before { right: 0; }
 220 :target + a + a:before { content: '\22d9'; }
 221
 222 .uncover[type="checkbox"] + * { opacity: .2; }
 223 .uncover[type="checkbox"]:checked + * { opacity: 1; }
 224
 225 .uncover[type="checkbox"] {
 226   position: fixed;
 227   top: 0; bottom: 0; left: 0; right: 0;
 228   width: 100%; height: 100%;
 229   opacity: 0;
 230   z-index: 1;
 231 }
 232
 233 .uncover[type="checkbox"] + * + .uncover[type="checkbox"] { display: none; }
 234 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"] { display: inline; }
 235 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"]:checked,
 236 .uncover[type="checkbox"]:checked { display: none; }
 237