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

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