Subversion Repositories LCARS

Rev

Rev 50 | Rev 72 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 50 Rev 58
Line 1... Line 1...
1
<?php
1
<?php
2
namespace de\pointedears\css\least;
2
namespace de\pointedears\css\least;
3
3
4
// \header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
4
\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
5
//
5
6
// /* Cached resource expires in HTTP/1.1 caches 24h after last retrieval */
6
/* Cached resource expires in HTTP/1.1 caches 0h after last retrieval */
7
// \header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate');
7
\header('Cache-Control: max-age=86400, s-maxage=0'/*'86400*/.', must-revalidate, proxy-revalidate');
8
//
8
9
// /* Cached resource expires in HTTP/1.0 caches 24h after last retrieval */
9
/* Cached resource expires in HTTP/1.0 caches 0h after last retrieval */
10
// \header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
10
\header('Expires: ' . gmdate('D, d M Y H:i:s', time()/* + 86400*/) . ' GMT');
11
 
11
 
12
\header('Content-Type: text/css; charset=UTF-8');
12
\header('Content-Type: text/css; charset=UTF-8');
13
13
14
require_once 'css/least/Mixins.php';
14
require_once 'css/least/Mixins.php';
15
?>
15
?>
Line 38... Line 38...
38
  /* -webkit-animation-iteration-count: infinite; */
38
  /* -webkit-animation-iteration-count: infinite; */
39
}
39
}
40
40
41
/* 0.0 to 0.6 s */
41
/* 0.0 to 0.6 s */
42
<?php
42
<?php
43
  Mixins::keyframes('content',
43
  Mixins::keyframes('empty-content',
44
    'from {
44
    'from {
45
       opacity: 0;
45
       opacity: 0;
46
     }
46
     }
47
     
47
     
48
     /* 0.6 s */
48
     /* 0.6 s */
Line 51... Line 51...
51
     }');
51
     }');
52
?>
52
?>
53
53
54
.empty.fade-in #content {
54
.empty.fade-in #content {
55
  <?php
55
  <?php
56
    Mixins::animation('-name', 'content');
56
    Mixins::animation('-name', 'empty-content');
57
    Mixins::animation('-duration', '0.6s');
57
    Mixins::animation('-duration', '0.6s');
58
    Mixins::animation('-timing-function', 'linear');
58
    Mixins::animation('-timing-function', 'linear');
59
  ?>
59
  ?>
60
}
60
}
61
61
-
 
62
/*
-
 
63
time in s      |0.0                |0.5      |0.75     |1.0                |1.5
-
 
64
                                   :   |0.625   :      :       |1.25
-
 
65
                                   :   :  |0.63 |0.875
-
 
66
bow-top        |------------------>|   :  :  :  :  :  :  :
-
 
67
bow-top-left   |                   :-->|  :  :  :  :  :  :
-
 
68
bow-top-text   |------------------>|   :  :  :  :  :  :  :
-
 
69
menu-container |                   :   :->|  :  :  :  :  :
-
 
70
footer         |------------------>|   :  :  :  :  :  :  :
-
 
71
menu           |                   :   :->|  :  :  :  :  :
-
 
72
footer-text    |------------------>|      :  :  :  :  :  :
-
 
73
bow-bottom     |                          :> |  :  :  :  :
-
 
74
elbo-bg        |                           :>|  :  :  :
-
 
75
elbo           |                                :->|  :
-
 
76
elbo-border    |                                         :->|
-
 
77
content        |                                      :->|
-
 
78

-
 
79
1: bow-top-left
-
 
80

-
 
81
*/
-
 
82
62
/* 0.0 to 0.5 s */
83
/* 0.0 to 0.5 s */
63
<?php
84
<?php
64
  Mixins::keyframes('bow-top',
85
  Mixins::keyframes('bow-top',
65
    'from {
86
    'from {
66
       left: 90%;
87
       left: 90%;
Line 137... Line 158...
137
    Mixins::animation('-duration', '0.5s');
158
    Mixins::animation('-duration', '0.5s');
138
    Mixins::animation('-timing-function', 'linear');
159
    Mixins::animation('-timing-function', 'linear');
139
  ?>
160
  ?>
140
}
161
}
141
162
142
/* 0.0 to 0.625 s */
163
/* 0.0 to 0.625s */
143
<?php
164
<?php
144
  Mixins::keyframes('bow-top-left',
165
  Mixins::keyframes('bow-top-left',
145
    'from {
166
    'from {
146
       height: 0;
167
       height: 0;
147
     }
168
     }
148

169

149
     /* at 0.5 s */
170
     /* at 0.5s */
150
     80% {
171
     80% {
151
       height: 0;
172
       height: 0;
152
     }');
173
     }');
153
?>
174
?>
154
     
175
     
Line 158... Line 179...
158
    Mixins::animation('-duration', '0.625s');  
179
    Mixins::animation('-duration', '0.625s');  
159
    Mixins::animation('-timing-function', 'linear');
180
    Mixins::animation('-timing-function', 'linear');
160
  ?>  
181
  ?>  
161
}
182
}
162
183
163
/* 0.0 to 1.125 s */
184
/* 0.0 to 0.63s */
164
<?php
185
<?php
165
  Mixins::keyframes('menu-container',
186
  Mixins::keyframes('menu-container',
166
    'from {
187
    'from {
167
       opacity: 0;
188
       opacity: 0;
168
     }
189
     }
169
     
190
     
170
     /* at ca. 0.61875 s */
191
     /* at ca. 0.61875s */
171
     55% {
192
     98% {
172
       opacity: 0;
193
       opacity: 0;
173
     }
194
     }
174
     
195
     
175
     56% {
196
     to {
176
       opacity: 1;
197
       opacity: 1;
177
     }');
198
     }'
-
 
199
   );
178
?>
200
?>
179
201
180
.fade-in .menu-container {
202
.fade-in .menu-container {
181
  <?php
203
  <?php
182
    Mixins::animation('-name', 'menu-container');
204
    Mixins::animation('-name', 'menu-container');
183
    Mixins::animation('-duration', '1.125s');
205
    Mixins::animation('-duration', '0.63s');
184
    Mixins::animation('-timing-function', 'linear');
206
    Mixins::animation('-timing-function', 'linear');
185
  ?>
207
  ?>
186
}
208
}
187
209
188
/* 0.0 to 1.125 s */
210
/* 0.0 to 0.63s */
189
<?php
211
<?php
190
  Mixins::keyframes('menu',
212
  Mixins::keyframes('menu', <<<CSS
191
    'from {
213
    from {
192
       opacity: 0;
214
      opacity: 0;
193
     }
215
    }
194
     
216
     
195
     /* at ca. 0.61875 s */
217
    /* at ca. 0.61875 s */
196
     55% {
218
    98% {
197
       opacity: 0;
219
      opacity: 0;
198
     }
220
    }
199
     
221
     
-
 
222
    /* at ca. 0.63 s */
200
     56% {
223
    to {
201
       opacity: 1;
224
      opacity: 1;
-
 
225
    }
-
 
226
CSS
202
     }');
227
   );
203
?>
228
?>
204
229
205
.fade-in .menu
230
.fade-in .menu
206
{
231
{
207
  <?php
232
  <?php
208
    Mixins::animation('-name', 'menu');
233
    Mixins::animation('-name', 'menu');
-
 
234
    Mixins::animation('-duration', '0.63s');
-
 
235
    Mixins::animation('-timing-function', 'linear');
-
 
236
  ?>
-
 
237
}
-
 
238
-
 
239
/* 0.0 to 0.75s */
-
 
240
<?php
-
 
241
  Mixins::keyframes('bow-bottom', <<<CSS
-
 
242
    from {
-
 
243
      bottom: 2.6em;
-
 
244
      width: 20.6em;
-
 
245
      height: 0em;
-
 
246
      border-bottom-right-radius: 0em;
-
 
247
      opacity: 0;
-
 
248
    }
-
 
249
-
 
250
    /* 0.64125 s */
-
 
251
    83% {
-
 
252
      bottom: 2.6em;
-
 
253
      width: 0em;
-
 
254
      height: 0em;
-
 
255
      border-bottom-right-radius: 0em;
-
 
256
      opacity: 1;
-
 
257
    }
-
 
258
-
 
259
    98% {
-
 
260
      bottom: 0.2em;
-
 
261
      width: 20.6em;
-
 
262
      height: 2.4em;
-
 
263
      border-bottom-right-radius: 2em;
-
 
264
    }
-
 
265
CSS
-
 
266
   );
-
 
267
?>
-
 
268
-
 
269
.fade-in #bow-bottom {
-
 
270
  <?php
-
 
271
    Mixins::animation('-name', 'bow-bottom');
-
 
272
    Mixins::animation('-duration', '0.75s');
-
 
273
    Mixins::animation('-timing-function', 'linear');
-
 
274
  ?>
-
 
275
}
-
 
276
-
 
277
/* 0.0 to 0.875s */
-
 
278
<?php
-
 
279
  Mixins::keyframes('elbo-bg', <<<CSS
-
 
280
    from {
-
 
281
      opacity: 0;
-
 
282
    }
-
 
283
-
 
284
    99% {
-
 
285
      opacity: 0;
-
 
286
    }
-
 
287
-
 
288
    /* 0.75 s */
-
 
289
    to {
-
 
290
      opacity: 1;
-
 
291
    }
-
 
292
CSS
-
 
293
   );
-
 
294
?>
-
 
295
-
 
296
.fade-in .multi-display .upper .button,
-
 
297
.fade-in .multi-display .lower .bg
-
 
298
{
-
 
299
  <?php
-
 
300
    Mixins::animation('-name', 'elbo-bg');
-
 
301
    Mixins::animation('-duration', '0.75s');
-
 
302
    Mixins::animation('-timing-function', 'linear');
-
 
303
  ?>
-
 
304
}
-
 
305
-
 
306
/* 0.0 to 0.875 */
-
 
307
<?php
-
 
308
  Mixins::keyframes('elbo', <<<CSS
-
 
309
    from {
-
 
310
      opacity: 0;
-
 
311
    }
-
 
312
-
 
313
    99% {
-
 
314
      opacity: 0;
-
 
315
    }
-
 
316
-
 
317
    /* 0.875 s */
-
 
318
    to {
-
 
319
      opacity: 1;
-
 
320
    }
-
 
321
CSS
-
 
322
   );
-
 
323
?>
-
 
324
-
 
325
.fade-in .multi-display .elbo {
-
 
326
  <?php
-
 
327
    Mixins::animation('-name', 'elbo');
-
 
328
    Mixins::animation('-duration', '0.875s');
-
 
329
    Mixins::animation('-timing-function', 'linear');
-
 
330
  ?>
-
 
331
}
-
 
332
-
 
333
/* 0.0 to 1s */
-
 
334
<?php
-
 
335
  Mixins::keyframes('elbo-border', <<<CSS
-
 
336
    from {
-
 
337
      opacity: 0;
-
 
338
    }
-
 
339
-
 
340
    /* 0.99 s */
-
 
341
    99% {
-
 
342
      opacity: 0;
-
 
343
    }
-
 
344
-
 
345
    /* 1 s */
-
 
346
    to {
-
 
347
      opacity: 1;
-
 
348
    }
-
 
349
CSS
-
 
350
   );
-
 
351
?>
-
 
352
-
 
353
.fade-in .multi-display .border {
-
 
354
  <?php
-
 
355
    Mixins::animation('-name', 'elbo-border');
-
 
356
    Mixins::animation('-duration', '1s');
-
 
357
    Mixins::animation('-timing-function', 'linear');
-
 
358
  ?>
-
 
359
}
-
 
360
-
 
361
/* 0.0 to 1.125s */
-
 
362
<?php
-
 
363
  Mixins::keyframes('content', <<<CSS
-
 
364
    from {
-
 
365
      opacity: 0;
-
 
366
    }
-
 
367
   
-
 
368
    99% {
-
 
369
      opacity: 0;
-
 
370
    }
-
 
371
-
 
372
    /* 1.125s */
-
 
373
    to {
-
 
374
      opacity: 1;
-
 
375
    }
-
 
376
CSS
-
 
377
   );
-
 
378
?>
-
 
379
-
 
380
.fade-in #connectors,
-
 
381
.fade-in #content
-
 
382
{
-
 
383
  <?php
-
 
384
    Mixins::animation('-name', 'content');
209
    Mixins::animation('-duration', '1.125s');
385
    Mixins::animation('-duration', '1.125s');
210
    Mixins::animation('-timing-function', 'linear');
386
    Mixins::animation('-timing-function', 'linear');
211
  ?>
387
  ?>
212
}
388
}
213
389