f1fd2117a9e14c7f3bdfbdb652b7ff9e1cb31d2a
[drupal/global/profiles/fonamental.git] / themes / custom / fonamental_theme / sass / layouts / _responsive.scss
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 // We are going to create a fluid grid with 1, 3, or 5 columns and 20px gutters
12 // between columns (applied as 10px of left/right padding on each column).
13 $zen-column-count: 1;
14 $zen-gutter-width: 20px;
15
16 // If you need IE6/7 support for box-sizing: border-box (default), see _base.scss
17 //$zen-box-sizing: content-box;
18
19 // You can generate more efficient CSS if you manually apply the
20 // zen-grid-item-base mixin to all grid items from within a single ruleset.
21 $zen-auto-include-item-base: false;
22 // $zen-auto-include-flow-item-base: false;
23
24 // Suppress this section of CSS for RTL layouts since it contains no LTR-specific styles.
25 @if $zen-reverse-all-floats == false {
26
27 /**
28 * Center the page.
29 *
30 * For screen sizes larger than 1200px, prevent excessively long lines of text
31 * by setting a max-width.
32 */
33 #page,
34 .region-bottom {
35 margin-left: auto;
36 margin-right: auto;
37 max-width: 1200px;
38 }
39
40 /* Apply the shared properties of grid items in a single, efficient ruleset. */
41 #header,
42 #content,
43 #navigation,
44 .region-sidebar-first,
45 .region-sidebar-second,
46 #footer {
47 // See the note about $zen-auto-include-item-base above.
48 @include zen-grid-item-base();
49 }
50
51 /* Containers for grid items and flow items. */
52 #header,
53 #main,
54 #footer {
55 @include zen-grid-container();
56 }
57
58 /* Navigation bar */
59 @media all and (min-width: 480px) {
60 #main {
61 /* Move all the children of #main down to make room. */
62 padding-top: $nav-height;
63 position: relative;
64 }
65 #navigation {
66 /* Move the navbar up inside #main's padding. */
67 position: absolute;
68 top: 0;
69 height: $nav-height;
70 width: $zen-grid-width;
71 }
72 }
73
74 } // End of @if $zen-reverse-all-floats == true
75
76 /**
77 * Use 3 grid columns for smaller screens.
78 */
79 @media all and (min-width: 480px) and (max-width: 959px) {
80
81 $zen-column-count: 3;
82
83 /**
84 * The layout when there is only one sidebar, the left one.
85 */
86 .sidebar-first {
87 /* Span 2 columns, starting in 2nd column from left. */
88 #content {
89 @include zen-grid-item(2, 2);
90 }
91
92 /* Span 1 column, starting in 1st column from left. */
93 .region-sidebar-first {
94 @include zen-grid-item(1, 1);
95 }
96 }
97
98 /**
99 * The layout when there is only one sidebar, the right one.
100 */
101 .sidebar-second {
102 /* Span 2 columns, starting in 1st column from left. */
103 #content {
104 @include zen-grid-item(2, 1);
105 }
106
107 /* Span 1 column, starting in 3rd column from left. */
108 .region-sidebar-second {
109 @include zen-grid-item(1, 3);
110 }
111 }
112
113 /**
114 * The layout when there are two sidebars.
115 */
116 .two-sidebars {
117 /* Span 2 columns, starting in 2nd column from left. */
118 #content {
119 @include zen-grid-item(2, 2);
120 }
121
122 /* Span 1 column, starting in 1st column from left. */
123 .region-sidebar-first {
124 @include zen-grid-item(1, 1);
125 }
126
127 /* Start a new row and span all 3 columns. */
128 .region-sidebar-second {
129 @include zen-grid-item(3, 1);
130 @include zen-nested-container(); // Since we're making every block in this region be a grid item.
131 @include zen-clear();
132
133 /* Apply the shared properties of grid items in a single, efficient ruleset. */
134 .block {
135 @include zen-grid-item-base();
136 }
137 /* Span 1 column, starting in the 1st column from left. */
138 .block:nth-child(3n+1) {
139 @include zen-grid-item(1, 1);
140 @include zen-clear();
141 }
142 /* Span 1 column, starting in the 2nd column from left. */
143 .block:nth-child(3n+2) {
144 @include zen-grid-item(1, 2);
145 }
146 /* Span 1 column, starting in the 3rd column from left. */
147 .block:nth-child(3n) {
148 @include zen-grid-item(1, 3);
149 }
150 }
151 }
152 }
153
154 /**
155 * Use 5 grid columns for larger screens.
156 */
157 @media all and (min-width: 960px) {
158
159 $zen-column-count: 5;
160
161 /**
162 * The layout when there is only one sidebar, the left one.
163 */
164 .sidebar-first {
165 /* Span 4 columns, starting in 2nd column from left. */
166 #content {
167 @include zen-grid-item(4, 2);
168 }
169
170 /* Span 1 column, starting in 1st column from left. */
171 .region-sidebar-first {
172 @include zen-grid-item(1, 1);
173 }
174 }
175
176 /**
177 * The layout when there is only one sidebar, the right one.
178 */
179 .sidebar-second {
180 /* Span 4 columns, starting in 1st column from left. */
181 #content {
182 @include zen-grid-item(4, 1);
183 }
184
185 /* Span 1 column, starting in 5th column from left. */
186 .region-sidebar-second {
187 @include zen-grid-item(1, 5);
188 }
189 }
190
191 /**
192 * The layout when there are two sidebars.
193 */
194 .two-sidebars {
195 /* Span 3 columns, starting in 2nd column from left. */
196 #content {
197 @include zen-grid-item(3, 2);
198 }
199
200 /* Span 1 column, starting in 1st column from left. */
201 .region-sidebar-first {
202 @include zen-grid-item(1, 1);
203 }
204
205 /* Span 1 column, starting in 5th column from left. */
206 .region-sidebar-second {
207 @include zen-grid-item(1, 5);
208 }
209 }
210 }