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

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