2 box-sizing: border-box;
4 background-position: center;
5 background-repeat: no-repeat;
6 background-size: cover;
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; } }
21 font-family: sans-serif;
22 padding: 2em 1em 6em 1em;
23 background-color: #555;
27 body * { text-align: left; }
33 background-color: #EEE;
38 a.previous, a.next ,a.toplevel {
39 text-decoration: none;
47 padding: .5em 4em .5em 12em;
58 background-color: #EEE;
65 width: 2ex; overflow: hidden;
67 padding-bottom: .25em;
71 body a.toplevel:before {
78 bottom: 0; left: 6.25em;
80 padding-bottom: .125em;
85 /* ==== Overview Screen ==== */
87 div.slide, a.nextslide {
93 display: inline-block;
95 width: 48em; height: 30em;
97 border: 1px solid black;
100 div.slide + a { display: none; }
102 display: inline-block;
105 width: 48em; line-height: 30em;
106 color: rgba(0, 0, 0, 0);
109 #div.slide:nth-of-type(1) { margin-right: .5em; }
111 /* ==== Slide Appearance ==== */
114 background: #FFF no-repeat center;
126 content: attr(count) " /";
128 background-color: #EEE;
139 div.slide > *:first-child:last-child,
140 div.slide > h2:first-child + :last-child {
142 transform: translate(0, -50%);
145 div.slide h1, div.slide h2 {
147 background-color: #EEE;
152 width: 100%; max-width: 100%;
156 div.slide > h1:first-child:last-child {
167 list-style-type: square;
171 div.slide ul ul, div.slide ul ol,
172 div.slide ol ul, div.slide ol ol {
183 background-color: rgba(192,192,192,128);
186 font-family: monospace;
190 /* ==== Slide Display ==== */
195 top: 0; bottom: 0; left: 0; right: 0;
196 width: auto; height: 100%;
201 div.slide:target + a,
202 div.slide:target + a + a {
209 :target + a:before, :target + a + a:before {
214 padding: 0 1em .25em 1em;
217 :target + a:before { left: 0; }
218 :target + a:before { content: '\22d8'; }
219 :target + a + a:before { right: 0; }
220 :target + a + a:before { content: '\22d9'; }
222 .uncover[type="checkbox"] + * { opacity: .2; }
223 .uncover[type="checkbox"]:checked + * { opacity: 1; }
225 .uncover[type="checkbox"] {
227 top: 0; bottom: 0; left: 0; right: 0;
228 width: 100%; height: 100%;
233 .uncover[type="checkbox"] + * + .uncover[type="checkbox"] { display: none; }
234 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"] { display: inline; }
235 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"]:checked,
236 .uncover[type="checkbox"]:checked { display: none; }