Mercurial > hg > mpiwgzen_wide

comparison css/layouts/responsive.css~ @ 0:a3750d724105 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
initital
author Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
date Tue, 02 Jun 2015 09:16:36 +0200
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:a3750d724105
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: 75em; /* 900px */
22 background-color: #F7F7F7;
23 border-right: solid 1px #efefef;
24 border-left: solid 1px #efefef;
25 padding: 0.5em 3.333em 0.833em 1.667em; /* 6px 40px 10px 20px */
26 }
27
28 /* Apply the shared properties of grid items in a single, efficient ruleset. */
29 #header,
30 #content,
31 #navigation,
32 .region-sidebar-first,
33 .region-sidebar-second,
34 #footer {
35 padding-left: 0px;
36 padding-right: 0px;
37 -moz-box-sizing: border-box;
38 -webkit-box-sizing: border-box;
39 -ms-box-sizing: border-box;
40 box-sizing: border-box;
41 word-wrap: break-word;
42 *behavior: url("/path/to/boxsizing.htc");
43 _display: inline;
44 _overflow: hidden;
45 _overflow-y: visible;
46 }
47
48 /* Containers for grid items and flow items. */
49 #header,
50 #main,
51 #footer {
52 *position: relative;
53 *zoom: 1;
54 }
55 #header:before,
56 #header:after,
57 #main:before,
58 #main:after,
59 #footer:before,
60 #footer:after {
61 content: "";
62 display: table;
63 }
64 #header:after,
65 #main:after,
66 #footer:after {
67 clear: both;
68 }
69
70 /* Navigation bar */
71 @media all and (min-width: 480px) {
72 #main {
73 /* Move all the children of #main down to make room. */
74 padding-top: 2.833em;
75 position: relative;
76 }
77 #navigation {
78 /* Move the navbar up inside #main's padding. */
79 position: absolute;
80 top: 0;
81 height: 2.833em;
82 width: 100%;
83 }
84 }
85
86 /**
87 * Use 3 grid columns for smaller screens.
88 */
89 @media all and (min-width: 480px) and (max-width: 959px) {
90
91 /**
92 * The layout when there is only one sidebar, the left one.
93 */
94
95 /* Span 2 columns, starting in 2nd column from left. */
96 .sidebar-first #content {
97 float: left;
98 width: 66.66667%;
99 margin-left: 33.33333%;
100 margin-right: -100%;
101 }
102
103 /* Span 1 column, starting in 1st column from left. */
104 .sidebar-first .region-sidebar-first {
105 float: left;
106 width: 33.33333%;
107 margin-left: 0%;
108 margin-right: -33.33333%;
109 }
110
111 /**
112 * The layout when there is only one sidebar, the right one.
113 */
114
115 /* Span 2 columns, starting in 1st column from left. */
116 .sidebar-second #content {
117 float: left;
118 width: 66.66667%;
119 margin-left: 0%;
120 margin-right: -66.66667%;
121 }
122
123 /* Span 1 column, starting in 3rd column from left. */
124 .sidebar-second .region-sidebar-second {
125 float: left;
126 width: 33.33333%;
127 margin-left: 66.66667%;
128 margin-right: -100%;
129 }
130
131 /**
132 * The layout when there are two sidebars.
133 */
134
135 /* Span 2 columns, starting in 2nd column from left. */
136 .two-sidebars #content {
137 float: left;
138 width: 66.66667%;
139 margin-left: 33.33333%;
140 margin-right: -100%;
141 }
142
143 /* Span 1 column, starting in 1st column from left. */
144 .two-sidebars .region-sidebar-first {
145 float: left;
146 width: 33.33333%;
147 margin-left: 0%;
148 margin-right: -33.33333%;
149 }
150
151 /* Start a new row and span all 3 columns. */
152 .two-sidebars .region-sidebar-second {
153 float: left;
154 width: 100%;
155 margin-left: 0%;
156 margin-right: -100%;
157 padding-left: 0;
158 padding-right: 0;
159 clear: left;
160 }
161
162 /* Apply the shared properties of grid items in a single, efficient ruleset. */
163 .two-sidebars .region-sidebar-second .block {
164 padding-left: 10px;
165 padding-right: 10px;
166 -moz-box-sizing: border-box;
167 -webkit-box-sizing: border-box;
168 -ms-box-sizing: border-box;
169 box-sizing: border-box;
170 word-wrap: break-word;
171 *behavior: url("/path/to/boxsizing.htc");
172 _display: inline;
173 _overflow: hidden;
174 _overflow-y: visible;
175 }
176
177 /* Span 1 column, starting in the 1st column from left. */
178 .two-sidebars .region-sidebar-second .block:nth-child(3n+1) {
179 float: left;
180 width: 33.33333%;
181 margin-left: 0%;
182 margin-right: -33.33333%;
183 clear: left;
184 }
185
186 /* Span 1 column, starting in the 2nd column from left. */
187 .two-sidebars .region-sidebar-second .block:nth-child(3n+2) {
188 float: left;
189 width: 33.33333%;
190 margin-left: 33.33333%;
191 margin-right: -66.66667%;
192 }
193
194 /* Span 1 column, starting in the 3rd column from left. */
195 .two-sidebars .region-sidebar-second .block:nth-child(3n) {
196 float: left;
197 width: 33.33333%;
198 margin-left: 66.66667%;
199 margin-right: -100%;
200 }
201 }
202
203 /**
204 * Use 5 grid columns for larger screens.
205 */
206 @media all and (min-width: 960px) {
207
208 /**
209 * The layout when there is only one sidebar, the left one.
210 */
211
212 /* Span 4 columns, starting in 2nd column from left. */
213 .sidebar-first #content {
214 float: left;
215 width: 55.5em; /*666px*/
216 margin-left: 19.5em; /*216+18px*/
217 margin-right: -100%;
218 }
219
220 /* Span 1 column, starting in 1st column from left. */
221 .sidebar-first .region-sidebar-first {
222 float: left;
223 width: 18em;
224 margin-left: 0%;
225 margin-right: -18em;
226 }
227
228 /**
229 * The layout when there is only one sidebar, the right one.
230 */
231
232 /* Span 4 columns, starting in 1st column from left. */
233 .sidebar-second #content {
234 float: left;
235 width: 80%;
236 margin-left: 0%;
237 margin-right: -80%;
238 }
239
240 /* Span 1 column, starting in 5th column from left. */
241 .sidebar-second .region-sidebar-second {
242 float: left;
243 width: 20%;
244 margin-left: 80%;
245 margin-right: -100%;
246 }
247
248 /**
249 * The layout when there are two sidebars.
250 */
251
252 /* Span 3 columns, starting in 2nd column from left. */
253 .two-sidebars #content {
254 float: left;
255 width: 60%;
256 margin-left: 20%;
257 margin-right: -80%;
258 }
259
260 /* Span 1 column, starting in 1st column from left. */
261 .two-sidebars .region-sidebar-first {
262 float: left;
263 width: 20%;
264 margin-left: 0%;
265 margin-right: -20%;
266 }
267
268 /* Span 1 column, starting in 5th column from left. */
269 .two-sidebars .region-sidebar-second {
270 float: left;
271 width: 20%;
272 margin-left: 80%;
273 margin-right: -100%;
274 }
275 }