1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
/**
* @file
* Positioning for a fixed-width, desktop-centric layout.
*
* Define CSS classes to create a table-free, 3-column, 2-column, or single
* column layout depending on whether blocks are enabled in the left or right
* columns.
*
* This layout uses the Zen Grids plugin for Compass: http://zengrids.com
*/
// We are going to create a 980px wide, 5 column grid with 20px gutters between
// columns (applied as 10px of left/right padding on each column).
$zen-column-count: 5;
$zen-gutter-width: 20px;
$zen-grid-width: 980px;
// If you need IE6/7 support for box-sizing: border-box (default), see _base.scss
// Since the same CSS unit for grid width and gutter width are set here
// we can use box-sizing: content-box; without worrying about polyfills.
$zen-box-sizing: content-box;
// You can generate more efficient CSS if you manually apply the
// zen-grid-item-base mixin to all grid items from within a single ruleset.
$zen-auto-include-item-base: false;
// $zen-auto-include-flow-item-base: false;
// Suppress this section of CSS for RTL layouts since it contains no LTR-specific styles.
@if $zen-reverse-all-floats == false {
/**
* Center the page.
*
* If you want to make the page a fixed width and centered in the viewport,
* this is the standards-compliant way to do that.
*/
#page,
.region-bottom {
margin-left: auto;
margin-right: auto;
width: $zen-grid-width;
}
/* Apply the shared properties of grid items in a single, efficient ruleset. */
#header,
#content,
#navigation,
.region-sidebar-first,
.region-sidebar-second,
#footer {
// See the note about $zen-auto-include-item-base above.
@include zen-grid-item-base();
}
/* Containers for grid items and flow items. */
#header,
#main,
#footer {
@include zen-grid-container();
}
/* Navigation bar */
#main {
/* Move all the children of #main down to make room. */
padding-top: $nav-height;
position: relative;
}
#navigation {
/* Move the navbar up inside #main's padding. */
position: absolute;
top: 0;
height: $nav-height;
width: $zen-grid-width - $zen-gutter-width;
}
} // End of @if $zen-reverse-all-floats == true
/**
* The layout when there is only one sidebar, the left one.
*/
.sidebar-first {
/* Span 4 columns, starting in 2nd column from left. */
#content {
@include zen-grid-item(4, 2);
}
/* Span 1 column, starting in 1st column from left. */
.region-sidebar-first {
@include zen-grid-item(1, 1);
}
}
/**
* The layout when there is only one sidebar, the right one.
*/
.sidebar-second {
/* Span 4 columns, starting in 1st column from left. */
#content {
@include zen-grid-item(4, 1);
}
/* Span 1 column, starting in 5th column from left. */
.region-sidebar-second {
@include zen-grid-item(1, 5);
}
}
/**
* The layout when there are two sidebars.
*/
.two-sidebars {
/* Span 3 columns, starting in 2nd column from left. */
#content {
@include zen-grid-item(3, 2);
}
/* Span 1 column, starting in 1st column from left. */
.region-sidebar-first {
@include zen-grid-item(1, 1);
}
/* Span 1 column, starting in 5th column from left. */
.region-sidebar-second {
@include zen-grid-item(1, 5);
}
}
|
