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