4 body a.toplevel:before,
6 div.slide:target:after,
7 div.slide:target + a, div.slide:target + a + a,
8 :target + a:before, :target + a + a:before
12 { background-color: #AAA;
13 background-image: repeating-linear-gradient( to bottom right, #AAA, #999 8px);
17 { background-color: #FFF;
18 background-image: repeating-linear-gradient( #FFF, #EEE 4px);
21 div.slide:target:after,
22 footer:before, body:after
23 { background-color: #EEE;
24 background-image: repeating-linear-gradient(#EEE, #DDD 8px);
27 div.slide h1, div.slide h2
28 { background-color: #EEE;
29 background-image: repeating-linear-gradient(#EEE, #DDD 8px);
32 div.slide pre, div.slide code
33 { background-color: #DDD;
34 background-image: repeating-linear-gradient(#CCC, #DDD 4px);
37 div.slide:after /* slide number on overview screen */
40 /* === Overall Layout === */
43 box-sizing: border-box;
44 margin: 0; padding: 0;
45 background-position: center;
46 background-repeat: no-repeat;
47 background-size: cover;
50 /* min-height: 240px */ body { font-size: 9px; }
51 @media(min-height: 320px) { body { font-size: 12px; } }
52 @media(min-height: 480px) { body { font-size: 19px; } }
53 @media(min-height: 720px) { body { font-size: 28px; } }
54 @media(min-height: 768px) { body { font-size: 30px; } }
55 @media(min-height: 800px) { body { font-size: 32px; } }
56 @media(min-height: 960px) { body { font-size: 38px; } }
57 @media(min-height: 1024px) { body { font-size: 41px; } }
58 @media(min-height: 1080px) { body { font-size: 43px; } }
59 @media(min-height: 2160px) { body { font-size: 86px; } }
62 font-family: sans-serif;
63 padding: 2em 1em 6em 1em;
64 #background-color: #555;
79 #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px);
82 a.previous, a.next ,a.toplevel {
83 text-decoration: none;
91 padding: .5em 4em .5em 12em;
95 /* footer must not have background, so slide number is not covered */
97 footer:before { /* fake background in case footer spans multiple lines */
103 #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px);
109 bottom: 0; left: 8em;
110 width: 2ex; overflow: hidden;
112 padding-bottom: .25em;
116 body a.toplevel:before {
123 bottom: 0; left: 6.25em;
125 padding-bottom: .125em;
130 /* ==== Overview Screen ==== */
132 div.slide, a.nextslide {
138 display: inline-block;
140 width: 48em; height: 30em;
142 border: 1px solid black;
145 div.slide:after { /* slide number */
151 content: attr(count);
152 padding-left: .125em;
156 div.slide + a { display: none; }
158 display: inline-block;
161 width: 48em; line-height: 30em;
165 #div.slide:nth-of-type(1) { margin-right: .5em; }
167 /* ==== Slide Appearance ==== */
170 #background: #FFF no-repeat center;
182 div.slide > *:first-child:last-child,
183 div.slide > h2:first-child + :last-child {
185 transform: translate(0, -50%);
188 div.slide h1, div.slide h2 {
194 width: 100%; max-width: 100%;
195 #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px);
199 div.slide > h1:first-child:last-child {
217 list-style-type: square;
221 div.slide ul ul, div.slide ul ol,
222 div.slide ol ul, div.slide ol ol {
232 div.slide pre, div.slide code {
233 #background-color: rgba(224,224,224,128);
234 font-family: monospace;
245 /* ==== Slide Display ==== */
250 top: 0; bottom: 0; left: 0; right: 0;
251 width: auto; height: 100%;
257 /* slide number, footer bar*/
258 div.slide:target:after {
265 content: attr(count) " /";
268 #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px);
271 /* back and forth link buttons */
272 div.slide:target + a,
273 div.slide:target + a + a {
280 :target + a:before, :target + a + a:before {
285 padding: 0 1em .25em 1em;
288 :target + a:before { left: 0; }
289 :target + a:before { content: '\22d8'; }
290 :target + a + a:before { right: 0; }
291 :target + a + a:before { content: '\22d9'; }
293 .uncover[type="checkbox"] + * { opacity: .2; }
294 .uncover[type="checkbox"]:checked + * { opacity: 1; }
296 .uncover[type="checkbox"] {
298 top: 0; bottom: 0; left: 0; right: 0;
299 width: 100%; height: 100%;
304 .uncover[type="checkbox"] + * + .uncover[type="checkbox"] { display: none; }
305 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"] { display: inline; }
306 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"]:checked,
307 .uncover[type="checkbox"]:checked { display: none; }