Rev 58 | Go to most recent revision | Details | Last modification | View Log | RSS feed
Rev | Author | Line No. | Line |
---|---|---|---|
50 | PointedEar | 1 | <?php |
2 | namespace de\pointedears\css\least; |
||
3 | |||
4 | // \header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT'); |
||
5 | // |
||
6 | // /* Cached 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'); |
||
8 | // |
||
9 | // /* Cached 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'); |
||
11 | |||
12 | \header('Content-Type: text/css; charset=UTF-8'); |
||
13 | |||
14 | require_once 'css/least/Mixins.php'; |
||
15 | ?> |
||
16 | @CHARSET "UTF-8"; |
||
17 | |||
18 | /* 0.0 to 1.0 s */ |
||
19 | <?php |
||
20 | Mixins::keyframes('fade-in', |
||
21 | 'from { |
||
22 | opacity: 0; |
||
23 | } |
||
24 | |||
25 | /* at 0.25 s */ |
||
26 | 25% { |
||
27 | opacity: 0; |
||
28 | } |
||
29 | |||
30 | to { |
||
31 | opacity: 1; |
||
32 | }'); |
||
33 | ?> |
||
34 | |||
35 | body.fade-in { |
||
36 | /* TODO: Step-by-step display instead */ |
||
37 | /*-webkit-animation-name: fade-in;*/ |
||
38 | /* -webkit-animation-iteration-count: infinite; */ |
||
39 | } |
||
40 | |||
41 | /* 0.0 to 0.6 s */ |
||
42 | <?php |
||
43 | Mixins::keyframes('content', |
||
44 | 'from { |
||
45 | opacity: 0; |
||
46 | } |
||
47 | |||
48 | /* 0.6 s */ |
||
49 | 99% { |
||
50 | opacity: 0; |
||
51 | }'); |
||
52 | ?> |
||
53 | |||
54 | .empty.fade-in #content { |
||
55 | <?php |
||
56 | Mixins::animation('-name', 'content'); |
||
57 | Mixins::animation('-duration', '0.6s'); |
||
58 | Mixins::animation('-timing-function', 'linear'); |
||
59 | ?> |
||
60 | } |
||
61 | |||
62 | /* 0.0 to 0.5 s */ |
||
63 | <?php |
||
64 | Mixins::keyframes('bow-top', |
||
65 | 'from { |
||
66 | left: 90%; |
||
67 | border-top-left-radius: 0; |
||
68 | border-bottom-left-radius: 0; |
||
69 | border-top-right-radius: 1.2em; |
||
70 | border-bottom-right-radius: 1.2em; |
||
71 | }'); |
||
72 | ?> |
||
73 | |||
74 | .fade-in #bow-top { |
||
75 | <?php |
||
76 | Mixins::animation('-name', 'bow-top'); |
||
77 | Mixins::animation('-duration', '0.5s'); |
||
78 | Mixins::animation('-timing-function', 'linear'); |
||
79 | ?> |
||
80 | } |
||
81 | |||
82 | /* 0.0 to 0.5 s */ |
||
83 | <?php |
||
84 | Mixins::keyframes('bow-top-text', |
||
85 | 'from { |
||
86 | opacity: 0; |
||
87 | } |
||
88 | |||
89 | /* shortly before 1.0 s */ |
||
90 | 99% { |
||
91 | opacity: 0; |
||
92 | }'); |
||
93 | ?> |
||
94 | |||
95 | .fade-in #bow-top .text { |
||
96 | <?php |
||
97 | Mixins::animation('-name', 'bow-top-text'); |
||
98 | Mixins::animation('-duration', '0.5s'); |
||
99 | Mixins::animation('-timing-function', 'linear'); |
||
100 | ?> |
||
101 | } |
||
102 | |||
103 | /* 0.0 to 0.5 s */ |
||
104 | <?php |
||
105 | Mixins::keyframes('footer', |
||
106 | 'from { |
||
107 | left: 90%; |
||
108 | border-top-left-radius: 0; |
||
109 | border-bottom-left-radius: 0; |
||
110 | }'); |
||
111 | ?> |
||
112 | |||
113 | .empty.fade-in #footer { |
||
114 | <?php |
||
115 | Mixins::animation('-name', 'footer'); |
||
116 | Mixins::animation('-duration', '0.5s'); |
||
117 | Mixins::animation('-timing-function', 'linear'); |
||
118 | ?> |
||
119 | } |
||
120 | |||
121 | /* 0.0 to 0.5 s */ |
||
122 | <?php |
||
123 | Mixins::keyframes('footer-text', |
||
124 | 'from { |
||
125 | opacity: 0; |
||
126 | } |
||
127 | |||
128 | /* shortly before 0.5 s */ |
||
129 | 99% { |
||
130 | opacity: 0; |
||
131 | }'); |
||
132 | ?> |
||
133 | |||
134 | .empty.fade-in #footer .text { |
||
135 | <?php |
||
136 | Mixins::animation('-name', 'footer-text'); |
||
137 | Mixins::animation('-duration', '0.5s'); |
||
138 | Mixins::animation('-timing-function', 'linear'); |
||
139 | ?> |
||
140 | } |
||
141 | |||
142 | /* 0.0 to 0.625 s */ |
||
143 | <?php |
||
144 | Mixins::keyframes('bow-top-left', |
||
145 | 'from { |
||
146 | height: 0; |
||
147 | } |
||
148 | |||
149 | /* at 0.5 s */ |
||
150 | 80% { |
||
151 | height: 0; |
||
152 | }'); |
||
153 | ?> |
||
154 | |||
155 | .fade-in #bow-top-left { |
||
156 | <?php |
||
157 | Mixins::animation('-name', 'bow-top-left'); |
||
158 | Mixins::animation('-duration', '0.625s'); |
||
159 | Mixins::animation('-timing-function', 'linear'); |
||
160 | ?> |
||
161 | } |
||
162 | |||
163 | /* 0.0 to 1.125 s */ |
||
164 | <?php |
||
165 | Mixins::keyframes('menu-container', |
||
166 | 'from { |
||
167 | opacity: 0; |
||
168 | } |
||
169 | |||
170 | /* at ca. 0.61875 s */ |
||
171 | 55% { |
||
172 | opacity: 0; |
||
173 | } |
||
174 | |||
175 | 56% { |
||
176 | opacity: 1; |
||
177 | }'); |
||
178 | ?> |
||
179 | |||
180 | .fade-in .menu-container { |
||
181 | <?php |
||
182 | Mixins::animation('-name', 'menu-container'); |
||
183 | Mixins::animation('-duration', '1.125s'); |
||
184 | Mixins::animation('-timing-function', 'linear'); |
||
185 | ?> |
||
186 | } |
||
187 | |||
188 | /* 0.0 to 1.125 s */ |
||
189 | <?php |
||
190 | Mixins::keyframes('menu', |
||
191 | 'from { |
||
192 | opacity: 0; |
||
193 | } |
||
194 | |||
195 | /* at ca. 0.61875 s */ |
||
196 | 55% { |
||
197 | opacity: 0; |
||
198 | } |
||
199 | |||
200 | 56% { |
||
201 | opacity: 1; |
||
202 | }'); |
||
203 | ?> |
||
204 | |||
205 | .fade-in .menu |
||
206 | { |
||
207 | <?php |
||
208 | Mixins::animation('-name', 'menu'); |
||
209 | Mixins::animation('-duration', '1.125s'); |
||
210 | Mixins::animation('-timing-function', 'linear'); |
||
211 | ?> |
||
212 | } |