Rev 123 | Rev 175 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed
Rev 123 | Rev 136 | ||
---|---|---|---|
1 | <?php |
1 | <?php |
2 | namespace de\pointedears\css\least;
|
- | |
3 | - | ||
4 | \header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT'); |
2 | \header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT'); |
5 | 3 | ||
6 | /* Resource expires in HTTP/1.1 caches 24h after last retrieval */
|
4 | /* Resource expires in HTTP/1.1 caches 24h after last retrieval */
|
7 | \header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate'); |
5 | \header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate'); |
8 | 6 | ||
9 | /* Resource expires in HTTP/1.0 caches 24h after last retrieval */
|
7 | /* Resource expires in HTTP/1.0 caches 24h after last retrieval */
|
10 | \header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT'); |
8 | \header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT'); |
11 | 9 | ||
12 | \header('Content-Type: text/css; charset=UTF-8'); |
10 | \header('Content-Type: text/css; charset=UTF-8'); |
13 | 11 | ||
14 | require_once 'css/least/Mixins.php'; |
12 | require_once 'css/least/Mixins.php'; |
- | 13 | use de\pointedears\css\least\Mixins;
|
|
15 | ?>@charset "UTF-8"; |
14 | ?>@charset "UTF-8"; |
16 | 15 | ||
17 | /* 0.0 to 1.0 s */
|
16 | /* 0.0 to 1.0 s */
|
18 | <?php |
17 | <?php |
19 | Mixins::keyframes('fade-in', |
18 | Mixins::keyframes('fade-in', |
20 | 'from {
|
19 | 'from {
|
21 | opacity: 0;
|
20 | opacity: 0;
|
22 | }
|
21 | }
|
23 |
|
22 |
|
24 | /* at 0.25 s */
|
23 | /* at 0.25 s */
|
25 | 25% {
|
24 | 25% {
|
26 | opacity: 0;
|
25 | opacity: 0;
|
27 | }
|
26 | }
|
28 |
|
27 |
|
29 | to {
|
28 | to {
|
30 | opacity: 1;
|
29 | opacity: 1;
|
31 | }'); |
30 | }'); |
32 | ?>
|
31 | ?>
|
33 | 32 | ||
34 | body.fade-in { |
33 | body.fade-in { |
35 | /* TODO: Step-by-step display instead */
|
34 | /* TODO: Step-by-step display instead */
|
36 | /*-webkit-animation-name: fade-in;*/
|
35 | /*-webkit-animation-name: fade-in;*/
|
37 | /* -webkit-animation-iteration-count: infinite; */
|
36 | /* -webkit-animation-iteration-count: infinite; */
|
38 | }
|
37 | }
|
39 | 38 | ||
40 | /* 0.0 to 0.6 s */
|
39 | /* 0.0 to 0.6 s */
|
41 | <?php |
40 | <?php |
42 | Mixins::keyframes('empty-content', |
41 | Mixins::keyframes('empty-content', |
43 | 'from {
|
42 | 'from {
|
44 | opacity: 0;
|
43 | opacity: 0;
|
45 | }
|
44 | }
|
46 |
|
45 |
|
47 | /* 0.6 s */
|
46 | /* 0.6 s */
|
48 | 99% {
|
47 | 99% {
|
49 | opacity: 0;
|
48 | opacity: 0;
|
50 | }'); |
49 | }'); |
51 | ?>
|
50 | ?>
|
52 | 51 | ||
53 | .empty.fade-in #content { |
52 | .empty.fade-in #content { |
54 | <?php |
53 | <?php |
55 | Mixins::animation('-name', 'empty-content'); |
54 | Mixins::animation('-name', 'empty-content'); |
56 | Mixins::animation('-duration', '0.6s'); |
55 | Mixins::animation('-duration', '0.6s'); |
57 | Mixins::animation('-timing-function', 'linear'); |
56 | Mixins::animation('-timing-function', 'linear'); |
58 | ?>
|
57 | ?>
|
59 | }
|
58 | }
|
60 | 59 | ||
61 | /*
|
60 | /*
|
62 | time in s |0.0 |0.5 |0.75 |1.0 |1.5
|
61 | time in s |0.0 |0.5 |0.75 |1.0 |1.5
|
63 | : |0.625 : : |1.25
|
62 | : |0.625 : : |1.25
|
64 | : : |0.63 |0.875
|
63 | : : |0.63 |0.875
|
65 | bow-top |------------------>| : : : : : : :
|
64 | bow-top |------------------>| : : : : : : :
|
66 | bow-top-left | :-->| : : : : : :
|
65 | bow-top-left | :-->| : : : : : :
|
67 | bow-top-text |------------------>| : : : : : : :
|
66 | bow-top-text |------------------>| : : : : : : :
|
68 | menu-container | : :->| : : : : :
|
67 | menu-container | : :->| : : : : :
|
69 | footer |------------------>| : : : : : : :
|
68 | footer |------------------>| : : : : : : :
|
70 | menu | : :->| : : : : :
|
69 | menu | : :->| : : : : :
|
71 | footer-text |------------------>| : : : : : :
|
70 | footer-text |------------------>| : : : : : :
|
72 | bow-bottom | :> | : : : :
|
71 | bow-bottom | :> | : : : :
|
73 | elbo-bg | :>| : : :
|
72 | elbo-bg | :>| : : :
|
74 | elbo | :->| :
|
73 | elbo | :->| :
|
75 | elbo-border | :->|
|
74 | elbo-border | :->|
|
76 | content | :->|
|
75 | content | :->|
|
77 | 76 | ||
78 | 1: bow-top-left
|
77 | 1: bow-top-left
|
79 | 78 | ||
80 | */
|
79 | */
|
81 | 80 | ||
82 | /* 0.0 to 0.5 s */
|
81 | /* 0.0 to 0.5 s */
|
83 | <?php |
82 | <?php |
84 | Mixins::keyframes('bow-top', |
83 | Mixins::keyframes('bow-top', |
85 | 'from {
|
84 | 'from {
|
86 | left: 90%;
|
85 | left: 90%;
|
87 | border-top-left-radius: 0;
|
86 | border-top-left-radius: 0;
|
88 | border-bottom-left-radius: 0;
|
87 | border-bottom-left-radius: 0;
|
89 | border-top-right-radius: 1.2em;
|
88 | border-top-right-radius: 1.2em;
|
90 | border-bottom-right-radius: 1.2em;
|
89 | border-bottom-right-radius: 1.2em;
|
91 | }'); |
90 | }'); |
92 | ?>
|
91 | ?>
|
93 | 92 | ||
94 | .fade-in #bow-top { |
93 | .fade-in #bow-top { |
95 | <?php |
94 | <?php |
96 | Mixins::animation('-name', 'bow-top'); |
95 | Mixins::animation('-name', 'bow-top'); |
97 | Mixins::animation('-duration', '0.5s'); |
96 | Mixins::animation('-duration', '0.5s'); |
98 | Mixins::animation('-timing-function', 'linear'); |
97 | Mixins::animation('-timing-function', 'linear'); |
99 | ?>
|
98 | ?>
|
100 | }
|
99 | }
|
101 | 100 | ||
102 | /* 0.0 to 0.5 s */
|
101 | /* 0.0 to 0.5 s */
|
103 | <?php |
102 | <?php |
104 | Mixins::keyframes('bow-top-text', |
103 | Mixins::keyframes('bow-top-text', |
105 | 'from {
|
104 | 'from {
|
106 | opacity: 0;
|
105 | opacity: 0;
|
107 | }
|
106 | }
|
108 |
|
107 |
|
109 | /* shortly before 1.0 s */
|
108 | /* shortly before 1.0 s */
|
110 | 99% {
|
109 | 99% {
|
111 | opacity: 0;
|
110 | opacity: 0;
|
112 | }'); |
111 | }'); |
113 | ?>
|
112 | ?>
|
114 | 113 | ||
115 | .fade-in #bow-top .text { |
114 | .fade-in #bow-top .text { |
116 | <?php |
115 | <?php |
117 | Mixins::animation('-name', 'bow-top-text'); |
116 | Mixins::animation('-name', 'bow-top-text'); |
118 | Mixins::animation('-duration', '0.5s'); |
117 | Mixins::animation('-duration', '0.5s'); |
119 | Mixins::animation('-timing-function', 'linear'); |
118 | Mixins::animation('-timing-function', 'linear'); |
120 | ?>
|
119 | ?>
|
121 | }
|
120 | }
|
122 | 121 | ||
123 | /* 0.0 to 0.5 s */
|
122 | /* 0.0 to 0.5 s */
|
124 | <?php |
123 | <?php |
125 | Mixins::keyframes('footer', |
124 | Mixins::keyframes('footer', |
126 | 'from {
|
125 | 'from {
|
127 | left: 90%;
|
126 | left: 90%;
|
128 | border-top-left-radius: 0;
|
127 | border-top-left-radius: 0;
|
129 | border-bottom-left-radius: 0;
|
128 | border-bottom-left-radius: 0;
|
130 | }'); |
129 | }'); |
131 | ?>
|
130 | ?>
|
132 | 131 | ||
133 | .empty.fade-in #footer { |
132 | .empty.fade-in #footer { |
134 | <?php |
133 | <?php |
135 | Mixins::animation('-name', 'footer'); |
134 | Mixins::animation('-name', 'footer'); |
136 | Mixins::animation('-duration', '0.5s'); |
135 | Mixins::animation('-duration', '0.5s'); |
137 | Mixins::animation('-timing-function', 'linear'); |
136 | Mixins::animation('-timing-function', 'linear'); |
138 | ?>
|
137 | ?>
|
139 | }
|
138 | }
|
140 | 139 | ||
141 | /* 0.0 to 0.5 s */
|
140 | /* 0.0 to 0.5 s */
|
142 | <?php |
141 | <?php |
143 | Mixins::keyframes('footer-text', |
142 | Mixins::keyframes('footer-text', |
144 | 'from {
|
143 | 'from {
|
145 | opacity: 0;
|
144 | opacity: 0;
|
146 | }
|
145 | }
|
147 |
|
146 |
|
148 | /* shortly before 0.5 s */
|
147 | /* shortly before 0.5 s */
|
149 | 99% {
|
148 | 99% {
|
150 | opacity: 0;
|
149 | opacity: 0;
|
151 | }'); |
150 | }'); |
152 | ?>
|
151 | ?>
|
153 | 152 | ||
154 | .empty.fade-in #footer .text { |
153 | .empty.fade-in #footer .text { |
155 | <?php |
154 | <?php |
156 | Mixins::animation('-name', 'footer-text'); |
155 | Mixins::animation('-name', 'footer-text'); |
157 | Mixins::animation('-duration', '0.5s'); |
156 | Mixins::animation('-duration', '0.5s'); |
158 | Mixins::animation('-timing-function', 'linear'); |
157 | Mixins::animation('-timing-function', 'linear'); |
159 | ?>
|
158 | ?>
|
160 | }
|
159 | }
|
161 | 160 | ||
162 | /* 0.0 to 0.625s */
|
161 | /* 0.0 to 0.625s */
|
163 | <?php |
162 | <?php |
164 | Mixins::keyframes('bow-top-left', |
163 | Mixins::keyframes('bow-top-left', |
165 | 'from {
|
164 | 'from {
|
166 | height: 0;
|
165 | height: 0;
|
167 | }
|
166 | }
|
168 | 167 | ||
169 | /* at 0.5s */
|
168 | /* at 0.5s */
|
170 | 80% {
|
169 | 80% {
|
171 | height: 0;
|
170 | height: 0;
|
172 | }'); |
171 | }'); |
173 | ?>
|
172 | ?>
|
174 | 173 | ||
175 | .fade-in #bow-top-left { |
174 | .fade-in #bow-top-left { |
176 | <?php |
175 | <?php |
177 | Mixins::animation('-name', 'bow-top-left'); |
176 | Mixins::animation('-name', 'bow-top-left'); |
178 | Mixins::animation('-duration', '0.625s'); |
177 | Mixins::animation('-duration', '0.625s'); |
179 | Mixins::animation('-timing-function', 'linear'); |
178 | Mixins::animation('-timing-function', 'linear'); |
180 | ?>
|
179 | ?>
|
181 | }
|
180 | }
|
182 | 181 | ||
183 | /* 0.0 to 0.63s */
|
182 | /* 0.0 to 0.63s */
|
184 | <?php |
183 | <?php |
185 | Mixins::keyframes('menu-container', <<<CSS |
184 | Mixins::keyframes('menu-container', <<<CSS |
186 | from {
|
185 | from {
|
187 | opacity: 0; |
186 | opacity: 0; |
188 | }
|
187 | }
|
189 | 188 | ||
190 | /* at ca. 0.61875s */
|
189 | /* at ca. 0.61875s */
|
191 | 98% { |
190 | 98% { |
192 | opacity: 0; |
191 | opacity: 0; |
193 | }
|
192 | }
|
194 | CSS |
193 | CSS |
195 | ); |
194 | ); |
196 | ?>
|
195 | ?>
|
197 | 196 | ||
198 | .fade-in .menu-container { |
197 | .fade-in .menu-container { |
199 | <?php |
198 | <?php |
200 | Mixins::animation('-name', 'menu-container'); |
199 | Mixins::animation('-name', 'menu-container'); |
201 | Mixins::animation('-duration', '0.63s'); |
200 | Mixins::animation('-duration', '0.63s'); |
202 | Mixins::animation('-timing-function', 'linear'); |
201 | Mixins::animation('-timing-function', 'linear'); |
203 | ?>
|
202 | ?>
|
204 | }
|
203 | }
|
205 | 204 | ||
206 | /* 0.0 to 0.63s */
|
205 | /* 0.0 to 0.63s */
|
207 | <?php |
206 | <?php |
208 | Mixins::keyframes('menu', <<<CSS |
207 | Mixins::keyframes('menu', <<<CSS |
209 | from {
|
208 | from {
|
210 | opacity: 0; |
209 | opacity: 0; |
211 | }
|
210 | }
|
212 | 211 | ||
213 | /* at ca. 0.61875 s */
|
212 | /* at ca. 0.61875 s */
|
214 | 98% { |
213 | 98% { |
215 | opacity: 0; |
214 | opacity: 0; |
216 | }
|
215 | }
|
217 | CSS |
216 | CSS |
218 | ); |
217 | ); |
219 | ?>
|
218 | ?>
|
220 | 219 | ||
221 | .fade-in .menu |
220 | .fade-in .menu |
222 | {
|
221 | {
|
223 | <?php |
222 | <?php |
224 | Mixins::animation('-name', 'menu'); |
223 | Mixins::animation('-name', 'menu'); |
225 | Mixins::animation('-duration', '0.63s'); |
224 | Mixins::animation('-duration', '0.63s'); |
226 | Mixins::animation('-timing-function', 'linear'); |
225 | Mixins::animation('-timing-function', 'linear'); |
227 | ?>
|
226 | ?>
|
228 | }
|
227 | }
|
229 | 228 | ||
230 | /* 0.0 to 0.75s */
|
229 | /* 0.0 to 0.75s */
|
231 | <?php |
230 | <?php |
232 | Mixins::keyframes('bow-bottom', <<<CSS |
231 | Mixins::keyframes('bow-bottom', <<<CSS |
233 | from {
|
232 | from {
|
234 | bottom: 2.6em; |
233 | bottom: 2.6em; |
235 | height: 0em; |
234 | height: 0em; |
236 | opacity: 0; |
235 | opacity: 0; |
237 | }
|
236 | }
|
238 | 237 | ||
239 | /* 0.64125 s */
|
238 | /* 0.64125 s */
|
240 | 83%, 97% { |
239 | 83%, 97% { |
241 | bottom: 2.6em; |
240 | bottom: 2.6em; |
242 | width: 0em; |
241 | width: 0em; |
243 | height: 0em; |
242 | height: 0em; |
244 | opacity: 1; |
243 | opacity: 1; |
245 | }
|
244 | }
|
246 | CSS |
245 | CSS |
247 | ); |
246 | ); |
248 | ?>
|
247 | ?>
|
249 | 248 | ||
250 | .fade-in #bow-bottom { |
249 | .fade-in #bow-bottom { |
251 | <?php |
250 | <?php |
252 | Mixins::animation('-name', 'bow-bottom'); |
251 | Mixins::animation('-name', 'bow-bottom'); |
253 | Mixins::animation('-duration', '0.75s'); |
252 | Mixins::animation('-duration', '0.75s'); |
254 | Mixins::animation('-timing-function', 'linear'); |
253 | Mixins::animation('-timing-function', 'linear'); |
255 | ?>
|
254 | ?>
|
256 | }
|
255 | }
|
257 | 256 | ||
258 | /* 0.0 to 0.875s */
|
257 | /* 0.0 to 0.875s */
|
259 | <?php |
258 | <?php |
260 | Mixins::keyframes('elbo-bg', <<<CSS |
259 | Mixins::keyframes('elbo-bg', <<<CSS |
261 | from {
|
260 | from {
|
262 | opacity: 0; |
261 | opacity: 0; |
263 | }
|
262 | }
|
264 | 263 | ||
265 | 99% { |
264 | 99% { |
266 | opacity: 0; |
265 | opacity: 0; |
267 | }
|
266 | }
|
268 | CSS |
267 | CSS |
269 | ); |
268 | ); |
270 | ?>
|
269 | ?>
|
271 | 270 | ||
272 | .fade-in .multi-display .upper .elbo-button, |
271 | .fade-in .multi-display .upper .elbo-button, |
273 | .fade-in .multi-display .lower .bg |
272 | .fade-in .multi-display .lower .bg |
274 | {
|
273 | {
|
275 | <?php |
274 | <?php |
276 | Mixins::animation('-name', 'elbo-bg'); |
275 | Mixins::animation('-name', 'elbo-bg'); |
277 | Mixins::animation('-duration', '0.75s'); |
276 | Mixins::animation('-duration', '0.75s'); |
278 | Mixins::animation('-timing-function', 'linear'); |
277 | Mixins::animation('-timing-function', 'linear'); |
279 | ?>
|
278 | ?>
|
280 | }
|
279 | }
|
281 | 280 | ||
282 | /* 0.0 to 0.875 */
|
281 | /* 0.0 to 0.875 */
|
283 | <?php |
282 | <?php |
284 | Mixins::keyframes('elbo', <<<CSS |
283 | Mixins::keyframes('elbo', <<<CSS |
285 | from {
|
284 | from {
|
286 | opacity: 0; |
285 | opacity: 0; |
287 | }
|
286 | }
|
288 | 287 | ||
289 | 99% { |
288 | 99% { |
290 | opacity: 0; |
289 | opacity: 0; |
291 | }
|
290 | }
|
292 | CSS |
291 | CSS |
293 | ); |
292 | ); |
294 | ?>
|
293 | ?>
|
295 | 294 | ||
296 | .fade-in .multi-display .elbo { |
295 | .fade-in .multi-display .elbo { |
297 | <?php |
296 | <?php |
298 | Mixins::animation('-name', 'elbo'); |
297 | Mixins::animation('-name', 'elbo'); |
299 | Mixins::animation('-duration', '0.875s'); |
298 | Mixins::animation('-duration', '0.875s'); |
300 | Mixins::animation('-timing-function', 'linear'); |
299 | Mixins::animation('-timing-function', 'linear'); |
301 | ?>
|
300 | ?>
|
302 | }
|
301 | }
|
303 | 302 | ||
304 | /* 0.0 to 1s */
|
303 | /* 0.0 to 1s */
|
305 | <?php |
304 | <?php |
306 | Mixins::keyframes('elbo-border', <<<CSS |
305 | Mixins::keyframes('elbo-border', <<<CSS |
307 | from {
|
306 | from {
|
308 | opacity: 0; |
307 | opacity: 0; |
309 | }
|
308 | }
|
310 | 309 | ||
311 | /* 0.99 s */
|
310 | /* 0.99 s */
|
312 | 99% { |
311 | 99% { |
313 | opacity: 0; |
312 | opacity: 0; |
314 | }
|
313 | }
|
315 | CSS |
314 | CSS |
316 | ); |
315 | ); |
317 | ?>
|
316 | ?>
|
318 | 317 | ||
319 | .fade-in .multi-display .border |
318 | .fade-in .multi-display .border |
320 | {
|
319 | {
|
321 | <?php |
320 | <?php |
322 | Mixins::animation('-name', 'elbo-border'); |
321 | Mixins::animation('-name', 'elbo-border'); |
323 | Mixins::animation('-duration', '1s'); |
322 | Mixins::animation('-duration', '1s'); |
324 | Mixins::animation('-timing-function', 'linear'); |
323 | Mixins::animation('-timing-function', 'linear'); |
325 | ?>
|
324 | ?>
|
326 | }
|
325 | }
|
327 | 326 | ||
328 | /* 0.0 to 1.125s */
|
327 | /* 0.0 to 1.125s */
|
329 | <?php |
328 | <?php |
330 | Mixins::keyframes('content', <<<CSS |
329 | Mixins::keyframes('content', <<<CSS |
331 | from {
|
330 | from {
|
332 | opacity: 0; |
331 | opacity: 0; |
333 | }
|
332 | }
|
334 | 333 | ||
335 | 99% { |
334 | 99% { |
336 | opacity: 0; |
335 | opacity: 0; |
337 | }
|
336 | }
|
338 | CSS |
337 | CSS |
339 | ); |
338 | ); |
340 | ?>
|
339 | ?>
|
341 | 340 | ||
342 | .fade-in .multi-display .upper .content, |
341 | .fade-in .multi-display .upper .content, |
343 | .fade-in #connectors, |
342 | .fade-in #connectors, |
344 | .fade-in #content |
343 | .fade-in #content |
345 | {
|
344 | {
|
346 | <?php |
345 | <?php |
347 | Mixins::animation('-name', 'content'); |
346 | Mixins::animation('-name', 'content'); |
348 | Mixins::animation('-duration', '1.125s'); |
347 | Mixins::animation('-duration', '1.125s'); |
349 | Mixins::animation('-timing-function', 'linear'); |
348 | Mixins::animation('-timing-function', 'linear'); |
350 | ?>
|
349 | ?>
|
351 | }
|
350 | }
|
352 | 351 |