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 | } |