root / drupal7 / sites / all / themes / zen / STARTERKIT / css / layouts / responsive.css @ 87dbc3bf
1 |
/**
|
---|---|
2 |
* @file
|
3 |
* Positioning for a responsive layout.
|
4 |
*
|
5 |
* Define CSS classes to create a fluid grid layout with optional sidebars
|
6 |
* depending on whether blocks are placed in the left or right sidebars.
|
7 |
*
|
8 |
* This layout uses the Zen Grids plugin for Compass: http://zengrids.com
|
9 |
*/
|
10 |
|
11 |
/**
|
12 |
* Center the page.
|
13 |
*
|
14 |
* For screen sizes larger than 1200px, prevent excessively long lines of text
|
15 |
* by setting a max-width.
|
16 |
*/
|
17 |
#page,
|
18 |
.region-bottom {
|
19 |
margin-left: auto; |
20 |
margin-right: auto; |
21 |
max-width: 1200px; |
22 |
} |
23 |
|
24 |
/* Apply the shared properties of grid items in a single, efficient ruleset. */
|
25 |
#header,
|
26 |
#content,
|
27 |
#navigation,
|
28 |
.region-sidebar-first,
|
29 |
.region-sidebar-second,
|
30 |
#footer {
|
31 |
padding-left: 10px; |
32 |
padding-right: 10px; |
33 |
-moz-box-sizing: border-box; |
34 |
-webkit-box-sizing: border-box; |
35 |
-ms-box-sizing: border-box; |
36 |
box-sizing: border-box; |
37 |
word-wrap: break-word; |
38 |
*behavior: url("/path/to/boxsizing.htc"); |
39 |
_display: inline; |
40 |
_overflow: hidden; |
41 |
_overflow-y: visible; |
42 |
} |
43 |
|
44 |
/* Containers for grid items and flow items. */
|
45 |
#header,
|
46 |
#main,
|
47 |
#footer {
|
48 |
*position: relative; |
49 |
*zoom: 1; |
50 |
} |
51 |
#header:before, |
52 |
#header:after, |
53 |
#main:before, |
54 |
#main:after, |
55 |
#footer:before, |
56 |
#footer:after { |
57 |
content: ""; |
58 |
display: table; |
59 |
} |
60 |
#header:after, |
61 |
#main:after, |
62 |
#footer:after { |
63 |
clear: both; |
64 |
} |
65 |
|
66 |
/* Navigation bar */
|
67 |
@media all and (min-width: 480px) { |
68 |
#main {
|
69 |
/* Move all the children of #main down to make room. */
|
70 |
padding-top: 3em; |
71 |
position: relative; |
72 |
} |
73 |
#navigation {
|
74 |
/* Move the navbar up inside #main's padding. */
|
75 |
position: absolute; |
76 |
top: 0; |
77 |
height: 3em; |
78 |
width: 100%; |
79 |
} |
80 |
} |
81 |
|
82 |
/**
|
83 |
* Use 3 grid columns for smaller screens.
|
84 |
*/
|
85 |
@media all and (min-width: 480px) and (max-width: 959px) { |
86 |
|
87 |
/**
|
88 |
* The layout when there is only one sidebar, the left one.
|
89 |
*/
|
90 |
|
91 |
/* Span 2 columns, starting in 2nd column from left. */
|
92 |
.sidebar-first #content { |
93 |
float: left; |
94 |
width: 66.66667%; |
95 |
margin-left: 33.33333%; |
96 |
margin-right: -100%; |
97 |
} |
98 |
|
99 |
/* Span 1 column, starting in 1st column from left. */
|
100 |
.sidebar-first .region-sidebar-first { |
101 |
float: left; |
102 |
width: 33.33333%; |
103 |
margin-left: 0%; |
104 |
margin-right: -33.33333%; |
105 |
} |
106 |
|
107 |
/**
|
108 |
* The layout when there is only one sidebar, the right one.
|
109 |
*/
|
110 |
|
111 |
/* Span 2 columns, starting in 1st column from left. */
|
112 |
.sidebar-second #content { |
113 |
float: left; |
114 |
width: 66.66667%; |
115 |
margin-left: 0%; |
116 |
margin-right: -66.66667%; |
117 |
} |
118 |
|
119 |
/* Span 1 column, starting in 3rd column from left. */
|
120 |
.sidebar-second .region-sidebar-second { |
121 |
float: left; |
122 |
width: 33.33333%; |
123 |
margin-left: 66.66667%; |
124 |
margin-right: -100%; |
125 |
} |
126 |
|
127 |
/**
|
128 |
* The layout when there are two sidebars.
|
129 |
*/
|
130 |
|
131 |
/* Span 2 columns, starting in 2nd column from left. */
|
132 |
.two-sidebars #content { |
133 |
float: left; |
134 |
width: 66.66667%; |
135 |
margin-left: 33.33333%; |
136 |
margin-right: -100%; |
137 |
} |
138 |
|
139 |
/* Span 1 column, starting in 1st column from left. */
|
140 |
.two-sidebars .region-sidebar-first { |
141 |
float: left; |
142 |
width: 33.33333%; |
143 |
margin-left: 0%; |
144 |
margin-right: -33.33333%; |
145 |
} |
146 |
|
147 |
/* Start a new row and span all 3 columns. */
|
148 |
.two-sidebars .region-sidebar-second { |
149 |
float: left; |
150 |
width: 100%; |
151 |
margin-left: 0%; |
152 |
margin-right: -100%; |
153 |
padding-left: 0; |
154 |
padding-right: 0; |
155 |
clear: left; |
156 |
} |
157 |
|
158 |
/* Apply the shared properties of grid items in a single, efficient ruleset. */
|
159 |
.two-sidebars .region-sidebar-second .block { |
160 |
padding-left: 10px; |
161 |
padding-right: 10px; |
162 |
-moz-box-sizing: border-box; |
163 |
-webkit-box-sizing: border-box; |
164 |
-ms-box-sizing: border-box; |
165 |
box-sizing: border-box; |
166 |
word-wrap: break-word; |
167 |
*behavior: url("/path/to/boxsizing.htc"); |
168 |
_display: inline; |
169 |
_overflow: hidden; |
170 |
_overflow-y: visible; |
171 |
} |
172 |
|
173 |
/* Span 1 column, starting in the 1st column from left. */
|
174 |
.two-sidebars .region-sidebar-second .block:nth-child(3n+1) { |
175 |
float: left; |
176 |
width: 33.33333%; |
177 |
margin-left: 0%; |
178 |
margin-right: -33.33333%; |
179 |
clear: left; |
180 |
} |
181 |
|
182 |
/* Span 1 column, starting in the 2nd column from left. */
|
183 |
.two-sidebars .region-sidebar-second .block:nth-child(3n+2) { |
184 |
float: left; |
185 |
width: 33.33333%; |
186 |
margin-left: 33.33333%; |
187 |
margin-right: -66.66667%; |
188 |
} |
189 |
|
190 |
/* Span 1 column, starting in the 3rd column from left. */
|
191 |
.two-sidebars .region-sidebar-second .block:nth-child(3n) { |
192 |
float: left; |
193 |
width: 33.33333%; |
194 |
margin-left: 66.66667%; |
195 |
margin-right: -100%; |
196 |
} |
197 |
} |
198 |
|
199 |
/**
|
200 |
* Use 5 grid columns for larger screens.
|
201 |
*/
|
202 |
@media all and (min-width: 960px) { |
203 |
|
204 |
/**
|
205 |
* The layout when there is only one sidebar, the left one.
|
206 |
*/
|
207 |
|
208 |
/* Span 4 columns, starting in 2nd column from left. */
|
209 |
.sidebar-first #content { |
210 |
float: left; |
211 |
width: 80%; |
212 |
margin-left: 20%; |
213 |
margin-right: -100%; |
214 |
} |
215 |
|
216 |
/* Span 1 column, starting in 1st column from left. */
|
217 |
.sidebar-first .region-sidebar-first { |
218 |
float: left; |
219 |
width: 20%; |
220 |
margin-left: 0%; |
221 |
margin-right: -20%; |
222 |
} |
223 |
|
224 |
/**
|
225 |
* The layout when there is only one sidebar, the right one.
|
226 |
*/
|
227 |
|
228 |
/* Span 4 columns, starting in 1st column from left. */
|
229 |
.sidebar-second #content { |
230 |
float: left; |
231 |
width: 80%; |
232 |
margin-left: 0%; |
233 |
margin-right: -80%; |
234 |
} |
235 |
|
236 |
/* Span 1 column, starting in 5th column from left. */
|
237 |
.sidebar-second .region-sidebar-second { |
238 |
float: left; |
239 |
width: 20%; |
240 |
margin-left: 80%; |
241 |
margin-right: -100%; |
242 |
} |
243 |
|
244 |
/**
|
245 |
* The layout when there are two sidebars.
|
246 |
*/
|
247 |
|
248 |
/* Span 3 columns, starting in 2nd column from left. */
|
249 |
.two-sidebars #content { |
250 |
float: left; |
251 |
width: 60%; |
252 |
margin-left: 20%; |
253 |
margin-right: -80%; |
254 |
} |
255 |
|
256 |
/* Span 1 column, starting in 1st column from left. */
|
257 |
.two-sidebars .region-sidebar-first { |
258 |
float: left; |
259 |
width: 20%; |
260 |
margin-left: 0%; |
261 |
margin-right: -20%; |
262 |
} |
263 |
|
264 |
/* Span 1 column, starting in 5th column from left. */
|
265 |
.two-sidebars .region-sidebar-second { |
266 |
float: left; |
267 |
width: 20%; |
268 |
margin-left: 80%; |
269 |
margin-right: -100%; |
270 |
} |
271 |
} |