]> git.plutz.net Git - clickslide/blob - clickslide.css
5e498e668ad2cac01dbf0237504cd191e24d1b11
[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: '\2ba4'
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   overflow: hidden;
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 ul ul, div.slide ul ol,
168 div.slide ol ul, div.slide ol ol {
169   margin-left: 1em;
170 }
171
172 div.slide > ul,
173 div.slide > ol {
174   width: fit-content;
175   margin: .25em auto;
176 }
177
178 div.slide pre {
179   background-color: rgba(192,192,192,128);
180   padding: 1ex;
181   text-align: left;
182   font-family: monospace;
183 }
184
185 /* ==== Slide Display ==== */
186
187 div.slide:target {
188   position: fixed;
189   z-index: 3;
190   top: 0; bottom: 0; left: 0; right: 0;
191   width: auto; height: 100%;
192   margin: 0;
193   border: none;
194   font-size: inherit;
195 }
196 div.slide:target + a,
197 div.slide:target + a + a {
198   position: static;
199   display: block;
200   font-size: inherit;
201   line-height: 1em;
202   color: #888;
203 }
204 :target + a:before, :target + a + a:before {
205   display: block;
206   position: fixed;
207   bottom: 0;
208   color: #888;
209   padding: 0 1em .25em 1em;
210   z-index: 4;
211 }
212 :target + a:before { left:  0; }
213 :target + a:before { content: '\22d8'; }
214 :target + a + a:before { right: 0; }
215 :target + a + a:before { content: '\22d9'; }
216
217 .uncover[type="checkbox"] + * { opacity: .2; }
218 .uncover[type="checkbox"]:checked + * { opacity: 1; }
219
220 .uncover[type="checkbox"] {
221   position: fixed;
222   top: 0; bottom: 0; left: 0; right: 0;
223   width: 100%; height: 100%;
224   opacity: 0;
225   z-index: 1;
226 }
227
228 .uncover[type="checkbox"] + * + .uncover[type="checkbox"] { display: none; }
229 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"] { display: inline; }
230 .uncover[type="checkbox"]:checked + * + .uncover[type="checkbox"]:checked,
231 .uncover[type="checkbox"]:checked { display: none; }
232