WebSVN - LCARS - Diff - Rev 177 and 179 - /trunk/styles/lcars-responsive.css


/* Responsive Web Design  */

<?php use de\pointedears\css\least\Mixins; ?>

/* Desktops with medium-size browser viewport (SVGA resolution) */

body {
  <?php
    Mixins::transition('',
        'margin-top   0.25s 0.75s linear,'
      . ' margin-left 0.25s 0.5s linear');
  ?>
}

.multi-display,
#content.fixed
{
  <?php
    Mixins::transition('',
        'top    0.25s 0.75s linear,'
      . ' left  0.25s 0.5s linear');
  ?>
}

.menu .bow
{
  <?php
    Mixins::transition('',
        'width            0.5s 1s    linear,'
      . 'background-color 0s   0.75s linear'
    );
  ?>
}

.multi-display .lower .bg
{
  <?php
    /* Wait 1s for bow to become shallower */
    Mixins::transition('',
        'top    0.25s 0.75s linear,'
      . 'bottom 2.5s 0.5s ease');
  ?>
}
 
#bow-top {
  <?php
    Mixins::transition('',
        'left                        0.5s 1.0s linear,'
      . ' min-width                  0s   1.5s linear,'
      . ' border-top-left-radius     0.5s 1.0s linear,'
      . ' border-top-right-radius    0.5s 1.0s linear,'
      . ' border-bottom-right-radius 0.5s 1.0s linear,'
      . ' opacity                    0s   1.0s linear');
  ?>
}

#bow-top .text {
  <?php
    Mixins::transition('-property', 'opacity');
    Mixins::transition('-delay', '1.5s');
    Mixins::transition('-timing-function', 'linear');
  ?>
}

#bow-top-left {
  <?php
    Mixins::transition('-property', 'height');
    Mixins::transition('-duration', '0.125s');
    Mixins::transition('-delay', '1.5s');
    Mixins::transition('-timing-function', 'linear');
  ?>
}

.menu-container
{
  <?php
    Mixins::transition('',
        'top      0.5s 1s linear,'
      . ' width   0.5s 1s linear,'
      . ' bottom  0.5s 1s linear,'
      . ' z-index 0s   1s linear');
  ?>
}  

.menu {
  <?php
    Mixins::transition('', 'height 0.5s 1s linear');
  ?>
}

.menu ul:first-child {
  <?php
    Mixins::transition('', 'padding-top 0.5s 1s linear');
  ?>
}

.menu .button
{
  <?php
    Mixins::transition('', 'width 0.5s 1s linear');
  ?>
}  

#bow #bottom {
  <?php
    Mixins::transition('', 'visibility 0s 1.625s linear');
  ?>
}

#bow-bottom {
  <?php
    Mixins::transition('',
        'border-bottom-left-radius   0.5s    0.5s   ease,'
      . ' border-bottom-right-radius 0.5s    0.5s   ease,'
      . ' width                      0.5s    0.5s   ease,'
      . ' bottom                     0.0225s 1.625s linear,'
      . ' height                     0.0225s 1.625s linear');
  ?>
}

#bow-bottom .concave {
  <?php
    Mixins::transition('', 'width 0.5s 0.5s ease');
  ?>
}

#connectors {
  <?php
    Mixins::transition('', 'opacity 0s 1.6475s linear');
  ?>
}  

#connectors .right {
  <?php
    Mixins::transition('', 'width 0.5s 0.5s ease');
  ?>
}

/* Desktops with large viewport (XGA resolution and more, or no toolbars) */
@media all and (min-width: 1024px) and (min-height: 364px) {
  body {
    margin-left: 22em;
  <?php
    Mixins::transition('', 'margin-left 0.5s 0.5s ease');
  ?>
  }

  #bow #bottom
  {
    width: 20.8em;
  <?php
    /* Wait 0.5s for multi-display to be reduced in height */
    Mixins::transition('', 'width 1.0s 0.5s ease');
  ?>
  }
   
  #bow-bottom {
    border-bottom-left-radius: 2.4em;
    border-bottom-right-radius: 2em;
    width: 20.6em;
  <?php
    Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width');
    Mixins::transition('-delay', '1.0s');
    Mixins::transition('-duration', '0.5s');
    Mixins::transition('-timing-function', 'ease');
  ?>
  }
 
  #bow-bottom .concave {
    width: 7.6em;
  <?php
    Mixins::transition('', 'width 1.0s 0.5s ease');
  ?>
  }

  #connectors .right {
    width: 5em;
    <?php
      /* Wait 1.0s for multi-display to be moved to right */
      Mixins::transition('', 'width 1.0s 0.5s ease');
    ?>
  }
 
  .multi-display
  {
    left: 15.8em;
  <?php
    Mixins::transition('',
        'left 0.5s 0.5s ease,'
      . 'top  0.5s 0.5s linear');
  ?>
  }

  #content.fixed {
    left: 22em;
  }
 
  .multi-display .lower .bg
  {
    bottom: 2.8em;
    <?php
      Mixins::transition('', 'bottom 0.5s 0.5s ease');
    ?>
  }  
}

/* Desktops with small viewport (VGA resolution and less, or toolbars) */
@media all and (max-width: 584px) {
  <?php require 'lcars-responsive-small.css'; ?>
}

/* Mobile devices: HTC Sensation & friends */
@media screen and (max-device-width: 540px) {
/*
  html,
  #LCARS,
  .multi-display
  {
    max-width: 540px;
  }
*/
  <?php require 'lcars-responsive-small.css'; ?>  
}

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	}

Subversion Repositories LCARS

(root)/trunk/styles/lcars-responsive.css - Rev 177 → 179