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