Subversion Repositories LCARS

Rev

Rev 177 | Details | Compare with Previous | Last modification | View Log | RSS feed

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