73a9242dd614307db93b076ec23a77a0ddb46928
[drupal/global/profiles/fonamental.git] / themes / cci-flight-theme / sass-extensions / zen-grids / templates / project / layout.scss
1 // Ideally, variables should be initialized in a partial. We're setting
2 // variables here to make the mixin usage more transparent.
3 $legacy-support-for-ie6: false;
4 $legacy-support-for-ie7: false;
5
6 // Import Zen Grids.
7 @import "zen";
8
9 $zen-column-count: 12;
10 $zen-gutter-width: 20px;
11
12
13 //
14 // Skip link styling
15 //
16 @media all and (min-width: 480px) {
17 #skip-link a {
18 position: absolute !important;
19 height: 1px;
20 width: 1px;
21 overflow: hidden;
22 @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
23 clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax.
24 }
25 clip: rect(1px, 1px, 1px, 1px);
26
27 &:active,
28 &:focus {
29 position: static !important;
30 clip: auto;
31 height: auto;
32 width: auto;
33 overflow: auto;
34 }
35 }
36 }
37
38 #header,
39 #main,
40 #footer {
41 margin: {
42 left: auto;
43 right: auto;
44 }
45 max-width: 1100px;
46 }
47
48 #main {
49 @include zen-grid-container();
50 }
51
52 #content aside {
53 font-weight: bold;
54 font-style: italic;
55 font-size: 1.2em;
56 @include zen-grid-flow-item(1, 3);
57 float: left;
58 margin: {
59 top: (1em/1.2);
60 bottom: (1em/1.2);
61 }
62 }
63
64 //
65 // Horizontal navigation bar
66 @media all and (min-width: 480px) {
67 $zen-column-count: 1;
68 $navbar-height: 4em;
69
70 #main {
71 padding-top: $navbar-height;
72 }
73 #main-menu {
74 @include zen-grid-item(1, 1);
75 margin-top: -$navbar-height;
76 height: $navbar-height;
77 }
78 }
79
80 @media all and (min-width: 480px) and (max-width: 639px) {
81 $zen-column-count: 2;
82
83 #content {
84 @include zen-grid-item(2, 1);
85 }
86 #aside1 {
87 @include zen-clear(); // Clear left-floated elements (#content)
88 @include zen-grid-item(1, 1);
89 }
90 #aside2 {
91 @include zen-grid-item(1, 2);
92 }
93 }
94
95 @media all and (min-width: 640px) and (max-width: 799px) {
96 $zen-column-count: 3;
97
98 #content {
99 @include zen-grid-item(2, 1);
100 }
101 #aside1 {
102 @include zen-grid-item(1, 1, right); // Position from the right
103 }
104 #aside2 {
105 @include zen-clear(); // Clear left-floated elements (#content)
106 @include zen-grid-item(2, 1);
107 }
108 }
109
110 @media all and (min-width: 800px) and (max-width: 959px) {
111 $zen-column-count: 3;
112
113 #content {
114 @include zen-grid-item(2, 1);
115 }
116 #aside1 {
117 @include zen-grid-item(1, 1, right); // Position from the right
118 }
119 #aside2 {
120 @include zen-clear(right); // Clear right-floated elements (#aside1)
121 @include zen-grid-item(1, 1, right);
122 }
123 }
124
125 @media all and (min-width: 960px) {
126 $zen-column-count: 5;
127
128 #content {
129 @include zen-grid-item(3, 2);
130 }
131 #aside1 {
132 @include zen-grid-item(1, 1);
133 }
134 #aside2 {
135 @include zen-grid-item(1, 5);
136 }
137 }