]> git.plutz.net Git - clickslide/blob - clickslide.css
separated color declarations for easyer syling
[clickslide] / clickslide.css
1 /* === Colors === */
2
3 footer,
4 body a.toplevel:before,
5 body span.count,
6 div.slide:target:after,
7 div.slide:target + a, div.slide:target + a + a,
8 :target + a:before, :target + a + a:before
9 { color: #888; }
10
11 body
12 { background-color: #AAA;
13   background-image: repeating-linear-gradient( to bottom right, #AAA, #999 8px);
14 }
15
16 div.slide
17 { background-color: #FFF;
18   background-image: repeating-linear-gradient( #FFF, #EEE 4px);
19 }
20
21 div.slide:target:after,
22 footer:before, body:after
23 { background-color: #EEE;
24   background-image: repeating-linear-gradient(#EEE, #DDD 8px);
25 }
26
27 div.slide h1, div.slide h2
28 { background-color: #EEE;
29   background-image: repeating-linear-gradient(#EEE, #DDD 8px);
30 }
31
32 div.slide pre, div.slide code
33 { background-color: #DDD;
34   background-image: repeating-linear-gradient(#CCC, #DDD 4px);
35 }
36
37 div.slide:after  /* slide number on overview screen */
38 { color: #AAA; }
39
40 /* === Overall Layout === */
41
42 * {
43   box-sizing: border-box;
44   margin: 0; padding: 0;
45   background-position: center;
46   background-repeat: no-repeat;
47   background-size: cover;
48 }
49
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; } }
60
61 body {
62   font-family: sans-serif;
63   padding: 2em 1em 6em 1em;
64   #background-color: #555;
65   text-align: center;
66   overflow-x: hidden;
67 }
68 body * {
69   text-align: left;
70   font-size: inherit;
71 }
72
73 body:after {
74   position: fixed;
75   bottom: 0; left: 0;
76   width: 100%;
77   height: 1.25em;
78   content: ' ';
79   #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px);
80 }
81
82 a.previous, a.next ,a.toplevel {
83   text-decoration: none;
84 }
85
86 footer {
87   position: fixed;
88   bottom: 0; left: 0;
89   width: 100%;
90   font-size: .75em;
91   padding: .5em 4em .5em 12em;
92   text-align: center;
93   #color: #888;
94   z-index: 4;
95   /* footer must not have background, so slide number is not covered */
96 }
97 footer:before {  /* fake background in case footer spans multiple lines */
98   content: ' ';
99   position: absolute;
100   top: 0; left: 0;
101   bottom: 1.5em;
102   width: 100%;
103   #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px);
104   z-index: -1;
105 }
106
107 body a.toplevel {
108   position: fixed;
109   bottom: 0; left: 8em;
110   width: 2ex; overflow: hidden;
111   font-size: .875em;
112   padding-bottom: .25em;
113   color: transparent;
114   z-index: 5;
115 }
116 body a.toplevel:before {
117   #color: #888;
118   content: '\2196';
119 }
120
121 body span.count {
122   position: fixed;
123   bottom: 0; left: 6.25em;
124   font-size: .875em;
125   padding-bottom: .125em;
126   #color: #888;
127   z-index: 5;
128 }
129
130 /* ==== Overview Screen ==== */
131
132 div.slide, a.nextslide {
133   font-size: .15625em;
134 }
135
136 div.slide {
137   position: relative;
138   display: inline-block;
139   overflow: hidden;
140   width: 48em; height: 30em;
141   margin-left: -48em;
142   border: 1px solid black;
143 }
144
145 div.slide:after {  /* slide number */
146   position: absolute;
147   bottom: 0; left: 0;
148   font-size: 15em;
149   line-height: 1em;
150   text-align: left;
151   content: attr(count);
152   padding-left: .125em;
153   #color: #DDD;
154 }
155
156 div.slide + a { display: none; }
157 a.nextslide {
158   display: inline-block;
159   position: relative;
160   vertical-align: top;
161   width: 48em; line-height: 30em;
162   color: transparent;
163   z-index: 2;
164 }
165 #div.slide:nth-of-type(1) { margin-right: .5em; }
166
167 /* ==== Slide Appearance ==== */
168
169 div.slide {
170   #background: #FFF no-repeat center;
171   text-align: center;
172   line-height: 1.5em;
173 }
174
175 div.slide > * {
176   margin-top: 1em;
177   max-width: 85%;
178   margin-left: auto;
179   margin-right: auto;
180 }
181
182 div.slide > *:first-child:last-child,
183 div.slide > h2:first-child + :last-child {
184   margin-top: 20%;
185   transform: translate(0, -50%);
186 }
187
188 div.slide h1, div.slide h2 {
189   display: block;
190   text-align: center;
191   font-size: 1.5em;
192   margin-top: 0;
193   margin-bottom: 1em;
194   width: 100%; max-width: 100%;
195   #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px);
196 }
197
198 div.slide h1,
199 div.slide > h1:first-child:last-child {
200   margin-top: 25%;
201   margin-bottom: 0;
202   padding: .5em 2em;
203 }
204
205 div.slide h2 {
206   padding: .25em 1em;
207 }
208
209 div.slide > table {
210   width: 85%;
211 }
212 div.slide * table {
213   width: 100%;
214 }
215
216 div.slide ul li {
217   list-style-type: square;
218   margin-left: 2em;
219 }
220
221 div.slide ul ul, div.slide ul ol,
222 div.slide ol ul, div.slide ol ol {
223   margin-left: -1em;
224 }
225
226 div.slide > ul,
227 div.slide > ol {
228   width: fit-content;
229   margin: .25em auto;
230 }
231
232 div.slide pre, div.slide code {
233   #background-color: rgba(224,224,224,128);
234   font-family: monospace;
235 }
236 div.slide pre {
237   padding: 1ex;
238   text-align: left;
239   overflow: hidden;
240 }
241 div.slide code {
242   padding: 0 .5em;
243 }
244
245 /* ==== Slide Display ==== */
246
247 div.slide:target {
248   position: fixed;
249   z-index: 3;
250   top: 0; bottom: 0; left: 0; right: 0;
251   width: auto; height: 100%;
252   margin: 0;
253   border: none;
254   font-size: inherit;
255 }
256
257 /* slide number, footer bar*/
258 div.slide:target:after {
259   position: absolute;
260   bottom: 0; left: 0;
261   width: 100%;
262   font-size: .875em;
263   line-height: 1.5em;
264   text-align: left;
265   content: attr(count) " /";
266   padding-left: 4em;
267   #color: #888;
268   #background: #EEE repeating-linear-gradient(#EEE, #DDD 8px);
269 }
270
271 /* back and forth link buttons */
272 div.slide:target + a,
273 div.slide:target + a + a {
274   position: static;
275   display: block;
276   font-size: inherit;
277   line-height: 1em;
278   #color: #888;
279 }
280 :target + a:before, :target + a + a:before {
281   display: block;
282   position: fixed;
283   bottom: 0;
284   #color: #888;
285   padding: 0 1em .25em 1em;
286   z-index: 4;
287 }
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'; }
292
293 .uncover[type="checkbox"] + * { opacity: .2; }
294 .uncover[type="checkbox"]:checked + * { opacity: 1; }
295
296 .uncover[type="checkbox"] {
297   position: fixed;
298   top: 0; bottom: 0; left: 0; right: 0;
299   width: 100%; height: 100%;
300   opacity: 0;
301   z-index: 1;
302 }
303
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; }
308