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