Rev 179 | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed
Rev 179 | Rev 198 | ||
---|---|---|---|
1 | /* Responsive Web Design */
|
1 | /* Responsive Web Design */
|
2 | 2 | ||
3 | <?php use de\pointedears\css\least\Mixins; ?> |
3 | <?php use de\pointedears\css\least\Mixins; ?> |
4 | 4 | ||
5 | /* Desktops with medium-size browser viewport (SVGA resolution) */
|
5 | /* Desktops with medium-size browser viewport (SVGA resolution) */
|
6 | 6 | ||
7 | body {
|
7 | body {
|
8 | <?php |
8 | <?php |
9 | Mixins::transition('', |
9 | Mixins::transition('', |
10 | 'margin-top 0.25s 0.75s linear,'
|
10 | 'margin-top 0.25s 0.75s linear,'
|
11 | . ' margin-left 0.25s 0.5s linear'); |
11 | . ' margin-left 0.25s 0.5s linear'); |
12 | ?>
|
12 | ?>
|
13 | }
|
13 | }
|
14 | 14 | ||
15 | .multi-display,
|
15 | .multi-display,
|
16 | #content.fixed |
16 | #content.fixed |
17 | {
|
17 | {
|
18 | <?php |
18 | <?php |
19 | Mixins::transition('', |
19 | Mixins::transition('', |
20 | 'top 0.25s 0.75s linear,'
|
20 | 'top 0.25s 0.75s linear,'
|
21 | . ' left 0.25s 0.5s linear'); |
21 | . ' left 0.25s 0.5s linear'); |
22 | ?>
|
22 | ?>
|
23 | }
|
23 | }
|
24 | 24 | ||
25 | .menu .bow |
25 | .menu .bow |
26 | {
|
26 | {
|
27 | <?php |
27 | <?php |
28 | Mixins::transition('', |
28 | Mixins::transition('', |
29 | 'width 0.5s 1s linear,'
|
29 | 'width 0.5s 1s linear,'
|
30 | . 'background-color 0s 0.75s linear'
|
30 | . 'background-color 0s 0.75s linear'
|
31 | ); |
31 | ); |
32 | ?>
|
32 | ?>
|
33 | }
|
33 | }
|
34 | 34 | ||
35 | .multi-display .lower .bg |
35 | .multi-display .lower .bg |
36 | {
|
36 | {
|
37 | <?php |
37 | <?php |
38 | /* Wait 1s for bow to become shallower */
|
38 | /* Wait 1s for bow to become shallower */
|
39 | Mixins::transition('', |
39 | Mixins::transition('', |
40 | 'top 0.25s 0.75s linear,'
|
40 | 'top 0.25s 0.75s linear,'
|
41 | . 'bottom 2.5s 0.5s ease'); |
41 | . 'bottom 2.5s 0.5s ease'); |
42 | ?>
|
42 | ?>
|
43 | }
|
43 | }
|
44 | 44 | ||
45 | #bow-top { |
45 | #bow-top { |
46 | <?php |
46 | <?php |
47 | Mixins::transition('', |
47 | Mixins::transition('', |
48 | 'left 0.5s 1.0s linear,'
|
48 | 'left 0.5s 1.0s linear,'
|
49 | . ' min-width 0s 1.5s linear,'
|
49 | . ' min-width 0s 1.5s linear,'
|
50 | . ' border-top-left-radius 0.5s 1.0s linear,'
|
50 | . ' border-top-left-radius 0.5s 1.0s linear,'
|
51 | . ' border-top-right-radius 0.5s 1.0s linear,'
|
51 | . ' border-top-right-radius 0.5s 1.0s linear,'
|
52 | . ' border-bottom-right-radius 0.5s 1.0s linear,'
|
52 | . ' border-bottom-right-radius 0.5s 1.0s linear,'
|
53 | . ' opacity 0s 1.0s linear'); |
53 | . ' opacity 0s 1.0s linear'); |
54 | ?>
|
54 | ?>
|
55 | }
|
55 | }
|
56 | 56 | ||
57 | #bow-top .text { |
57 | #bow-top .text { |
58 | <?php |
58 | <?php |
59 | Mixins::transition('-property', 'opacity'); |
59 | Mixins::transition('-property', 'opacity'); |
60 | Mixins::transition('-delay', '1.5s'); |
60 | Mixins::transition('-delay', '1.5s'); |
61 | Mixins::transition('-timing-function', 'linear'); |
61 | Mixins::transition('-timing-function', 'linear'); |
62 | ?>
|
62 | ?>
|
63 | }
|
63 | }
|
64 | 64 | ||
65 | #bow-top-left { |
65 | #bow-top-left { |
66 | <?php |
66 | <?php |
67 | Mixins::transition('-property', 'height'); |
67 | Mixins::transition('-property', 'height'); |
68 | Mixins::transition('-duration', '0.125s'); |
68 | Mixins::transition('-duration', '0.125s'); |
69 | Mixins::transition('-delay', '1.5s'); |
69 | Mixins::transition('-delay', '1.5s'); |
70 | Mixins::transition('-timing-function', 'linear'); |
70 | Mixins::transition('-timing-function', 'linear'); |
71 | ?>
|
71 | ?>
|
72 | }
|
72 | }
|
73 | 73 | ||
74 | .menu-container
|
74 | .menu-container
|
75 | {
|
75 | {
|
76 | <?php |
76 | <?php |
77 | Mixins::transition('', |
77 | Mixins::transition('', |
78 | 'top 0.5s 1s linear,'
|
78 | 'top 0.5s 1s linear,'
|
79 | . ' width 0.5s 1s linear,'
|
79 | . ' width 0.5s 1s linear,'
|
80 | . ' bottom 0.5s 1s linear,'
|
80 | . ' bottom 0.5s 1s linear,'
|
81 | . ' z-index 0s 1s linear'); |
81 | . ' z-index 0s 1s linear'); |
82 | ?>
|
82 | ?>
|
83 | }
|
83 | }
|
84 | 84 | ||
85 | .menu { |
85 | .menu { |
86 | <?php |
86 | <?php |
87 | Mixins::transition('', 'height 0.5s 1s linear'); |
87 | Mixins::transition('', 'height 0.5s 1s linear'); |
88 | ?>
|
88 | ?>
|
89 | }
|
89 | }
|
90 | 90 | ||
91 | .menu ul:first-child { |
91 | .menu ul:first-child { |
92 | <?php |
92 | <?php |
93 | Mixins::transition('', 'padding-top 0.5s 1s linear'); |
93 | Mixins::transition('', 'padding-top 0.5s 1s linear'); |
94 | ?>
|
94 | ?>
|
95 | }
|
95 | }
|
96 | 96 | ||
97 | .menu .button |
97 | .menu .button |
98 | {
|
98 | {
|
99 | <?php |
99 | <?php |
100 | Mixins::transition('', 'width 0.5s 1s linear'); |
100 | Mixins::transition('', 'width 0.5s 1s linear'); |
101 | ?>
|
101 | ?>
|
102 | }
|
102 | }
|
103 | 103 | ||
104 | #bow #bottom { |
104 | #bow #bottom { |
105 | <?php |
105 | <?php |
106 | Mixins::transition('', 'visibility 0s 1.625s linear'); |
106 | Mixins::transition('', 'visibility 0s 1.625s linear'); |
107 | ?>
|
107 | ?>
|
108 | }
|
108 | }
|
109 | 109 | ||
110 | #bow-bottom { |
110 | #bow-bottom { |
111 | <?php |
111 | <?php |
112 | Mixins::transition('', |
112 | Mixins::transition('', |
113 | 'border-bottom-left-radius 0.5s 0.5s ease,'
|
113 | 'border-bottom-left-radius 0.5s 0.5s ease,'
|
114 | . ' border-bottom-right-radius 0.5s 0.5s ease,'
|
114 | . ' border-bottom-right-radius 0.5s 0.5s ease,'
|
115 | . ' width 0.5s 0.5s ease,'
|
115 | . ' width 0.5s 0.5s ease,'
|
116 | . ' bottom 0.0225s 1.625s linear,'
|
116 | . ' bottom 0.0225s 1.625s linear,'
|
117 | . ' height 0.0225s 1.625s linear'); |
117 | . ' height 0.0225s 1.625s linear'); |
118 | ?>
|
118 | ?>
|
119 | }
|
119 | }
|
120 | 120 | ||
121 | #bow-bottom .concave { |
121 | #bow-bottom .concave { |
122 | <?php |
122 | <?php |
123 | Mixins::transition('', 'width 0.5s 0.5s ease'); |
123 | Mixins::transition('', 'width 0.5s 0.5s ease'); |
124 | ?>
|
124 | ?>
|
125 | }
|
125 | }
|
126 | 126 | ||
127 | #connectors { |
127 | #connectors { |
128 | <?php |
128 | <?php |
129 | Mixins::transition('', 'opacity 0s 1.6475s linear'); |
129 | Mixins::transition('', 'opacity 0s 1.6475s linear'); |
130 | ?>
|
130 | ?>
|
131 | }
|
131 | }
|
132 | 132 | ||
133 | #connectors .right { |
133 | #connectors .right { |
134 | <?php |
134 | <?php |
135 | Mixins::transition('', 'width 0.5s 0.5s ease'); |
135 | Mixins::transition('', 'width 0.5s 0.5s ease'); |
136 | ?>
|
136 | ?>
|
137 | }
|
137 | }
|
138 | 138 | ||
139 | /* Desktops with large viewport (XGA resolution and more, or no toolbars) */
|
139 | /* Desktops with large viewport (XGA resolution and more, or no toolbars) */
|
140 | @media all and (min-width: 1024px) and (min-height: 364px) {
|
140 | @media all and (min-width: 1024px) and (min-height: 364px) {
|
141 | body {
|
141 | body {
|
142 | margin-left: 22em; |
142 | margin-left: 22em; |
143 | <?php |
143 | <?php |
144 | Mixins::transition('', 'margin-left 0.5s 0.5s ease'); |
144 | Mixins::transition('', 'margin-left 0.5s 0.5s ease'); |
145 | ?>
|
145 | ?>
|
146 | }
|
146 | }
|
147 | 147 | ||
148 | #bow #bottom |
148 | #bow #bottom |
149 | {
|
149 | {
|
150 | width: 20.8em; |
150 | width: 20.8em; |
151 | <?php |
151 | <?php |
152 | /* Wait 0.5s for multi-display to be reduced in height */
|
152 | /* Wait 0.5s for multi-display to be reduced in height */
|
153 | Mixins::transition('', 'width 1.0s 0.5s ease'); |
153 | Mixins::transition('', 'width 1.0s 0.5s ease'); |
154 | ?>
|
154 | ?>
|
155 | }
|
155 | }
|
156 | 156 | ||
157 | #bow-bottom { |
157 | #bow-bottom { |
158 | border-bottom-left-radius: 2.4em; |
158 | border-bottom-left-radius: 2.4em; |
159 | border-bottom-right-radius: 2em; |
159 | border-bottom-right-radius: 2em; |
160 | width: 20.6em; |
160 | width: 20.6em; |
161 | <?php |
161 | <?php |
162 | Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width'); |
162 | Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width'); |
163 | Mixins::transition('-delay', '1.0s'); |
163 | Mixins::transition('-delay', '1.0s'); |
164 | Mixins::transition('-duration', '0.5s'); |
164 | Mixins::transition('-duration', '0.5s'); |
165 | Mixins::transition('-timing-function', 'ease'); |
165 | Mixins::transition('-timing-function', 'ease'); |
166 | ?>
|
166 | ?>
|
167 | }
|
167 | }
|
168 | 168 | ||
169 | #bow-bottom .concave { |
169 | #bow-bottom .concave { |
170 | width: 7.6em; |
170 | width: 7.6em; |
171 | <?php |
171 | <?php |
172 | Mixins::transition('', 'width 1.0s 0.5s ease'); |
172 | Mixins::transition('', 'width 1.0s 0.5s ease'); |
173 | ?>
|
173 | ?>
|
174 | }
|
174 | }
|
175 | 175 | ||
176 | #connectors .right { |
176 | #connectors .right { |
177 | width: 5em; |
177 | width: 5em; |
178 | <?php |
178 | <?php |
179 | /* Wait 1.0s for multi-display to be moved to right */
|
179 | /* Wait 1.0s for multi-display to be moved to right */
|
180 | Mixins::transition('', 'width 1.0s 0.5s ease'); |
180 | Mixins::transition('', 'width 1.0s 0.5s ease'); |
181 | ?>
|
181 | ?>
|
182 | }
|
182 | }
|
183 | 183 | ||
184 | .multi-display
|
184 | .multi-display
|
185 | {
|
185 | {
|
186 | left: 15.8em; |
186 | left: 15.8em; |
187 | <?php |
187 | <?php |
188 | Mixins::transition('', |
188 | Mixins::transition('', |
189 | 'left 0.5s 0.5s ease,'
|
189 | 'left 0.5s 0.5s ease,'
|
190 | . 'top 0.5s 0.5s linear'); |
190 | . 'top 0.5s 0.5s linear'); |
191 | ?>
|
191 | ?>
|
192 | }
|
192 | }
|
193 | 193 | ||
194 | #content.fixed { |
194 | #content.fixed { |
195 | left: 22em; |
195 | left: 22em; |
196 | }
|
196 | }
|
197 | 197 | ||
198 | .multi-display .lower .bg |
198 | .multi-display .lower .bg |
199 | {
|
199 | {
|
200 | bottom: 2.8em; |
200 | bottom: 2.8em; |
201 | <?php |
201 | <?php |
202 | Mixins::transition('', 'bottom 0.5s 0.5s ease'); |
202 | Mixins::transition('', 'bottom 0.5s 0.5s ease'); |
203 | ?>
|
203 | ?>
|
204 | }
|
204 | }
|
205 | }
|
205 | }
|
206 | 206 | ||
207 | /* Desktops with small viewport (VGA resolution and less, or toolbars) */
|
207 | /* Desktops with small viewport (VGA resolution and less, or toolbars) */
|
208 | @media all and (max-width: 584px) {
|
208 | @media all and (max-width: 584px) {
|
209 | <?php require 'lcars-responsive-small.css'; ?> |
209 | <?php require 'lcars-responsive-small.css'; ?> |
210 | }
|
210 | }
|
211 | 211 | ||
212 | /* Mobile devices: HTC Sensation & friends */
|
212 | /* Mobile devices: HTC Sensation & friends */
|
213 | @media screen and (max-device-width: 540px) {
|
213 | @media screen and (max-device-width: 540px) {
|
214 | /*
|
214 | /*
|
215 | html,
|
215 | html,
|
216 | #LCARS,
|
216 | #LCARS,
|
217 | .multi-display
|
217 | .multi-display
|
218 | {
|
218 | {
|
219 | max-width: 540px;
|
219 | max-width: 540px;
|
220 | }
|
220 | }
|
221 | */
|
221 | */
|
222 | <?php require 'lcars-responsive-small.css'; ?> |
222 | <?php require 'lcars-responsive-small.css'; ?> |
223 | }
|
223 | }
|