1 files changed, 137 insertions, 0 deletions
diff --git a/97suifangqa/sass/sass-extensions/zen-grids/templates/project/layout.scss b/97suifangqa/sass/sass-extensions/zen-grids/templates/project/layout.scss
new file mode 100644
index 0000000..73a9242
--- /dev/null
+++ b/97suifangqa/sass/sass-extensions/zen-grids/templates/project/layout.scss
@@ -0,0 +1,137 @@
+// Ideally, variables should be initialized in a partial. We're setting
+// variables here to make the mixin usage more transparent.
+$legacy-support-for-ie6: false;
+$legacy-support-for-ie7: false;
+
+// Import Zen Grids.
+@import "zen";
+
+$zen-column-count: 12;
+$zen-gutter-width: 20px;
+
+
+//
+// Skip link styling
+//
+@media all and (min-width: 480px) {
+  #skip-link a {
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+      clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax.
+    }
+    clip: rect(1px, 1px, 1px, 1px);
+
+    &:active,
+    &:focus {
+      position: static !important;
+      clip: auto;
+      height: auto;
+      width: auto;
+      overflow: auto;
+    }
+  }
+}
+
+#header,
+#main,
+#footer {
+  margin: {
+    left: auto;
+    right: auto;
+  }
+  max-width: 1100px;
+}
+
+#main {
+  @include zen-grid-container();
+}
+
+#content aside {
+  font-weight: bold;
+  font-style: italic;
+  font-size: 1.2em;
+  @include zen-grid-flow-item(1, 3);
+  float: left;
+  margin: {
+    top: (1em/1.2);
+    bottom: (1em/1.2);
+  }
+}
+
+//
+// Horizontal navigation bar
+@media all and (min-width: 480px) {
+  $zen-column-count: 1;
+  $navbar-height: 4em;
+
+  #main {
+    padding-top: $navbar-height;
+  }
+  #main-menu {
+    @include zen-grid-item(1, 1);
+    margin-top: -$navbar-height;
+    height: $navbar-height;
+  }
+}
+
+@media all and (min-width: 480px) and (max-width: 639px) {
+  $zen-column-count: 2;
+
+  #content {
+    @include zen-grid-item(2, 1);
+  }
+  #aside1 {
+    @include zen-clear(); // Clear left-floated elements (#content)
+    @include zen-grid-item(1, 1);
+  }
+  #aside2 {
+    @include zen-grid-item(1, 2);
+  }
+}
+
+@media all and (min-width: 640px) and (max-width: 799px) {
+  $zen-column-count: 3;
+
+  #content {
+    @include zen-grid-item(2, 1);
+  }
+  #aside1 {
+    @include zen-grid-item(1, 1, right); // Position from the right
+  }
+  #aside2 {
+    @include zen-clear(); // Clear left-floated elements (#content)
+    @include zen-grid-item(2, 1);
+  }
+}
+
+@media all and (min-width: 800px) and (max-width: 959px) {
+  $zen-column-count: 3;
+
+  #content {
+    @include zen-grid-item(2, 1);
+  }
+  #aside1 {
+    @include zen-grid-item(1, 1, right); // Position from the right
+  }
+  #aside2 {
+    @include zen-clear(right); // Clear right-floated elements (#aside1)
+    @include zen-grid-item(1, 1, right);
+  }
+}
+
+@media all and (min-width: 960px) {
+  $zen-column-count: 5;
+
+  #content {
+    @include zen-grid-item(3, 2);
+  }
+  #aside1 {
+    @include zen-grid-item(1, 1);
+  }
+  #aside2 {
+    @include zen-grid-item(1, 5);
+  }
+}