]> git.plutz.net Git - clickslide/blob - clickslide.css
portability: prevent crashes in bash
[clickslide] / 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 * {
28   text-align: left;
29   font-size: inherit;
30 }
31
32 body:after {
33   position: fixed;
34   bottom: 0; left: 0;
35   width: 100%;
36   background-color: #EEE;
37   height: 1.25em;
38   content: ' ';
39 }
40
41 a.previous, a.next ,a.toplevel {
42   text-decoration: none;
43 }
44
45 footer {
46   position: fixed;
47   bottom: 0; left: 0;
48   width: 100%;
49   font-size: .75em;
50   padding: .5em 4em .5em 12em;
51   text-align: center;
52   color: #888;
53   z-index: 4;
54 }
55 footer:before {
56   content: ' ';
57   position: absolute;
58   top: 0; left: 0;
59   bottom: 1.5em;
60   width: 100%;
61   background-color: #EEE;
62   z-index: -1;
63 }
64
65 body a.toplevel {
66   position: fixed;
67   bottom: 0; left: 8em;
68   width: 2ex; overflow: hidden;
69   font-size: .875em;
70   padding-bottom: .25em;
71   color: #EEE;
72   z-index: 5;
73 }
74 body a.toplevel:before {
75   color: #888;
76   content: '\2196';
77 }
78
79 body span.count {
80   position: fixed;
81   bottom: 0; left: 6.25em;
82   font-size: .875em;
83   padding-bottom: .125em;
84   color: #888;
85   z-index: 5;
86 }
87
88 /* ==== Overview Screen ==== */
89
90 div.slide, a.nextslide {
91   font-size: .15625em;
92 }
93
94 div.slide {
95   position: relative;
96   display: inline-block;
97   overflow: hidden;
98   width: 48em; height: 30em;
99   margin-left: -48em;
100   border: 1px solid black;
101 }
102
103 div.slide:after {  /* slide number */
104   position: absolute;
105   bottom: 0; left: 0;
106   font-size: 15em;
107   line-height: 1em;
108   text-align: left;
109   content: attr(count);
110   padding-left: .125em;
111   color: #DDD;
112 }
113
114 div.slide + a { display: none; }
115 a.nextslide {
116   display: inline-block;
117   position: relative;
118   vertical-align: top;
119   width: 48em; line-height: 30em;
120   color: rgba(0, 0, 0, 0);
121   z-index: 2;
122 }
123 #div.slide:nth-of-type(1) { margin-right: .5em; }
124
125 /* ==== Slide Appearance ==== */
126
127 div.slide {
128   background: #FFF no-repeat center;
129   text-align: center;
130   line-height: 1.5em;
131 }
132
133 div.slide > * {
134   margin-top: 1em;
135   max-width: 85%;
136   margin-left: auto;
137   margin-right: auto;
138 }
139
140 div.slide > *:first-child:last-child,
141 div.slide > h2:first-child + :last-child {
142   margin-top: 20%;
143   transform: translate(0, -50%);
144 }
145
146 div.slide h1, div.slide h2 {
147   display: block;
148   background-color: #EEE;
149   text-align: center;
150   font-size: 1.5em;
151   margin-top: 0;
152   margin-bottom: 1em;
153   width: 100%; max-width: 100%;
154 }
155
156 div.slide h1,
157 div.slide > h1:first-child:last-child {
158   margin-top: 25%;
159   margin-bottom: 0;
160   padding: .5em 2em;
161 }
162
163 div.slide h2 {
164   padding: .25em 1em;
165 }
166
167 div.slide > table {
168   width: 85%;
169 }
170 div.slide * table {
171   width: 100%;
172 }
173
174 div.slide ul li {
175   list-style-type: square;
176   margin-left: 2em;
177 }
178
179 div.slide ul ul, div.slide ul ol,
180 div.slide ol ul, div.slide ol ol {
181   margin-left: -1em;
182 }
183
184 div.slide > ul,
185 div.slide > ol {
186   width: fit-content;
187   margin: .25em auto;
188 }
189
190 div.slide pre {
191   background-color: rgba(192,192,192,128);
192   padding: 1ex;
193   text-align: left;
194   font-family: monospace;
195   overflow: hidden;
196 }
197
198 /* ==== Slide Display ==== */
199
200 div.slide:target {
201   position: fixed;
202   z-index: 3;
203   top: 0; bottom: 0; left: 0; right: 0;
204   width: auto; height: 100%;
205   margin: 0;
206   border: none;
207   font-size: inherit;
208 }
209
210 /* slide number, footer bar*/
211 div.slide:target:after {
212   position: absolute;
213   bottom: 0; left: 0;
214   width: 100%;
215   font-size: .875em;
216   line-height: 1.5em;
217   text-align: left;
218   content: attr(count) " /";
219   padding-left: 4em;
220   background-color: #EEE;
221   color: #888;
222 }
223
224 /* back and forth link buttons */
225 div.slide:target + a,
226 div.slide:target + a + a {
227   position: static;
228   display: block;
229   font-size: inherit;
230   line-height: 1em;
231   color: #888;
232 }
233 :target + a:before, :target + a + a:before {
234   display: block;
235   position: fixed;
236   bottom: 0;
237   color: #888;
238   padding: 0 1em .25em 1em;
239   z-index: 4;
240 }
241 :target + a:before { left:  0; }
242 :target + a:before { content: '\22d8'; }
243 :target + a + a:before { right: 0; }
244 :target + a + a:before { content: '\22d9'; }
245
246 .uncover[type="checkbox"] + * { opacity: .2; }
247 .uncover[type="checkbox"]:checked + * { opacity: 1; }
248
249 .uncover[type="checkbox"] {
250   position: fixed;
251   top: 0; bottom: 0; left: 0; right: 0;
252   width: 100%; height: 100%;
253   opacity: 0;
254   z-index: 1;
255 }
256
257 .uncover[type="checkbox"] + * + .uncover[type="checkbox"] { display: none; }
258 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"] { display: inline; }
259 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"]:checked,
260 .uncover[type="checkbox"]:checked { display: none; }
261