Optimizations

1 files changed, 99 insertions, 0 deletions

diff --git a/_sass/960-responsive.scss b/_sass/960-responsive.scss
new file mode 100644
index 0000000..0dbbca3
--- /dev/null
+++ b/_sass/960-responsive.scss
@@ -0,0 +1,99 @@
+// Default styles
+body {
+    min-width: 960px;
+}
+
+.container {
+    margin-left: auto;
+    margin-right: auto;
+    width: 960px;
+}
+
+.grid_blob,
+.grid_wide {
+    display: inline;
+    float: left;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.container .grid_blob {
+    width: 220px;
+}
+
+.container .grid_wide {
+    width: 940px;
+}
+
+.container:before,
+.container:after {
+    content: '.';
+    display: block;
+    overflow: hidden;
+    visibility: hidden;
+    font-size: 0;
+    line-height: 0;
+    width: 0;
+    height: 0;
+}
+
+/*
+* 960 Responsive Grid
+* Copyright 2012, Tyler Wolff
+* Free to use under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+* 12/10/2012
+*/
+
+/* Tablet Portrait width to 960px */
+@media only screen and (min-width: 768px) and (max-width: 959px) {
+
+  body {
+    min-width: 768px;
+  }
+
+  .container {
+    width: 768px;
+  }
+
+  .container .grid_blob  { width: 172px; }
+  .container .grid_wide { width: 748px; }
+}
+
+/* All Mobile Widths */
+@media only screen and (max-width: 767px) {
+
+  body {
+    min-width: 300px;
+  }
+
+  .container {
+    width: 300px;
+  }
+
+  .container .grid_blob,
+  .container .grid_wide {
+    margin: 0;
+    width: 300px;
+  }
+
+}
+
+/* Mobile Landscape Width to Tablet Portrait Width */
+@media only screen and (min-width: 480px) and (max-width: 767px) {
+
+  body {
+    min-width: 480px;
+  }
+
+  .container {
+    width: 420px;
+  }
+
+  .container .grid_blob,
+  .container .grid_wide {
+    margin: 0;
+    width: 420px;
+  }
+
+}