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: '\2ba4'
  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   z-index: 1;
 136 }
 137
 138 div.slide > *:first-child:last-child,
 139 div.slide > h2:first-child + :last-child {
 140   margin-top: 20%;
 141   transform: translate(0, -50%);
 142 }
 143
 144 div.slide h1, div.slide h2 {
 145   display: block;
 146   background-color: #EEE;
 147   text-align: center;
 148   font-size: 1.5em;
 149   margin-top: 0;
 150   margin-bottom: 1em;
 151   width: 100%; max-width: 100%;
 152 }
 153
 154 div.slide h1,
 155 div.slide > h1:first-child:last-child {
 156   margin-top: 25%;
 157   margin-bottom: 0;
 158   padding: .5em 2em;
 159 }
 160
 161 div.slide h2 {
 162   padding: .25em 1em;
 163 }
 164
 165 div.slide ul ul, div.slide ul ol,
 166 div.slide ol ul, div.slide ol ol {
 167   margin-left: 1em;
 168 }
 169
 170 div.slide > ul,
 171 div.slide > ol {
 172   width: fit-content;
 173   margin: .25em auto;
 174 }
 175
 176 div.slide pre {
 177   background-color: rgba(192,192,192,128);
 178   padding: 1ex;
 179   text-align: left;
 180   font-family: monospace;
 181 }
 182
 183 /* ==== Slide Display ==== */
 184
 185 div.slide:target {
 186   position: fixed;
 187   z-index: 3;
 188   top: 0; bottom: 0; left: 0; right: 0;
 189   width: auto; height: 100%;
 190   margin: 0;
 191   border: none;
 192   font-size: inherit;
 193 }
 194 div.slide:target + a,
 195 div.slide:target + a + a {
 196   position: static;
 197   display: block;
 198   font-size: inherit;
 199   line-height: 1em;
 200   color: #888;
 201 }
 202 :target + a:before, :target + a + a:before {
 203   display: block;
 204   position: fixed;
 205   bottom: 0;
 206   color: #888;
 207   padding: 0 1em .25em 1em;
 208   z-index: 4;
 209 }
 210 :target + a:before { left:  0; }
 211 :target + a:before { content: '\22d8'; }
 212 :target + a + a:before { right: 0; }
 213 :target + a + a:before { content: '\22d9'; }
 214
 215 .uncover[type="checkbox"] + * { opacity: .2; }
 216 .uncover[type="checkbox"]:checked + * { opacity: 1; }
 217
 218 .uncover[type="checkbox"] {
 219   position: fixed;
 220   top: 0; bottom: 0; left: 0; right: 0;
 221   width: 100%; height: 100%;
 222   opacity: 0;
 223   z-index: 1;
 224 }
 225
 226 .uncover[type="checkbox"] + * + .uncover[type="checkbox"] { display: none; }
 227 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"] { display: inline; }
 228 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"]:checked,
 229 .uncover[type="checkbox"]:checked { display: none; }
 230