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 ul li {
 168   list-style-type: square;
 169   margin-left: 2em;
 170 }
 171
 172 div.slide ul ul, div.slide ul ol,
 173 div.slide ol ul, div.slide ol ol {
 174   margin-left: -1em;
 175 }
 176
 177 div.slide > ul,
 178 div.slide > ol {
 179   width: fit-content;
 180   margin: .25em auto;
 181 }
 182
 183 div.slide pre {
 184   background-color: rgba(192,192,192,128);
 185   padding: 1ex;
 186   text-align: left;
 187   font-family: monospace;
 188   overflow: hidden;
 189 }
 190
 191 /* ==== Slide Display ==== */
 192
 193 div.slide:target {
 194   position: fixed;
 195   z-index: 3;
 196   top: 0; bottom: 0; left: 0; right: 0;
 197   width: auto; height: 100%;
 198   margin: 0;
 199   border: none;
 200   font-size: inherit;
 201 }
 202
 203 /* slide number, footer bar*/
 204 div.slide:target:after {
 205   position: absolute;
 206   bottom: 0; left: 0;
 207   width: 100%;
 208   font-size: .875em;
 209   line-height: 1.5em;
 210   text-align: left;
 211   content: attr(count) " /";
 212   padding-left: 4em;
 213   background-color: #EEE;
 214   color: #888;
 215 }
 216
 217 /* back and forth link buttons */
 218 div.slide:target + a,
 219 div.slide:target + a + a {
 220   position: static;
 221   display: block;
 222   font-size: inherit;
 223   line-height: 1em;
 224   color: #888;
 225 }
 226 :target + a:before, :target + a + a:before {
 227   display: block;
 228   position: fixed;
 229   bottom: 0;
 230   color: #888;
 231   padding: 0 1em .25em 1em;
 232   z-index: 4;
 233 }
 234 :target + a:before { left:  0; }
 235 :target + a:before { content: '\22d8'; }
 236 :target + a + a:before { right: 0; }
 237 :target + a + a:before { content: '\22d9'; }
 238
 239 .uncover[type="checkbox"] + * { opacity: .2; }
 240 .uncover[type="checkbox"]:checked + * { opacity: 1; }
 241
 242 .uncover[type="checkbox"] {
 243   position: fixed;
 244   top: 0; bottom: 0; left: 0; right: 0;
 245   width: 100%; height: 100%;
 246   opacity: 0;
 247   z-index: 1;
 248 }
 249
 250 .uncover[type="checkbox"] + * + .uncover[type="checkbox"] { display: none; }
 251 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"] { display: inline; }
 252 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"]:checked,
 253 .uncover[type="checkbox"]:checked { display: none; }
 254