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