update @media responsive layout

1 files changed, 60 insertions, 55 deletions

diff --git a/src/layout.less b/src/layout.less
index d7f6557..8fc17e0 100644
--- a/src/layout.less
+++ b/src/layout.less
@@ -1,21 +1,21 @@
 // Layout
 .container {
+  width: 100%;
   margin-left: auto;
   margin-right: auto;
   padding-left: 10px;
   padding-right: 10px;
   &:extend(.clearfix all);
-
-  &.grid-960 {
-    width: 960px;
-  }
-  &.grid-full {
-    width: 100%;
+}
+@media screen and (min-width: 961px) {
+  .container {
+    &.grid-960 {
+      width: 960px;
+    }
   }
 }
 
 .columns {
-  display: flex;
   margin-left: -10px;
   margin-right: -10px;
   &:extend(.clearfix all);
@@ -23,55 +23,60 @@
 .column {
   flex: 1;
   padding: 10px;
-
-  &.col-12 {
-    flex: none;
-    width: 100%;
-  }
-  &.col-11 {
-    flex: none;
-    width: 91.66666667%;
-  }
-  &.col-10 {
-    flex: none;
-    width: 83.33333333%;
-  }
-  &.col-9 {
-    flex: none;
-    width: 75%;
-  }
-  &.col-8 {
-    flex: none;
-    width: 66.66666667%;
-  }
-  &.col-7 {
-    flex: none;
-    width: 58.33333333%;
-  }
-  &.col-6 {
-    flex: none;
-    width: 50%;
-  }
-  &.col-5 {
-    flex: none;
-    width: 41.66666667%;
-  }
-  &.col-4 {
-    flex: none;
-    width: 33.33333333%;
-  }
-  &.col-3 {
-    flex: none;
-    width: 25%;
-  }
-  &.col-2 {
-    flex: none;
-    width: 16.66666667%;
+}
+@media screen and (min-width: 769px) {
+  .columns {
+    display: flex;
   }
-  &.col-1 {
-    flex: none;
-    width: 8.33333333%;
+  .column {
+    &.col-12 {
+      flex: none;
+      width: 100%;
+    }
+    &.col-11 {
+      flex: none;
+      width: 91.66666667%;
+    }
+    &.col-10 {
+      flex: none;
+      width: 83.33333333%;
+    }
+    &.col-9 {
+      flex: none;
+      width: 75%;
+    }
+    &.col-8 {
+      flex: none;
+      width: 66.66666667%;
+    }
+    &.col-7 {
+      flex: none;
+      width: 58.33333333%;
+    }
+    &.col-6 {
+      flex: none;
+      width: 50%;
+    }
+    &.col-5 {
+      flex: none;
+      width: 41.66666667%;
+    }
+    &.col-4 {
+      flex: none;
+      width: 33.33333333%;
+    }
+    &.col-3 {
+      flex: none;
+      width: 25%;
+    }
+    &.col-2 {
+      flex: none;
+      width: 16.66666667%;
+    }
+    &.col-1 {
+      flex: none;
+      width: 8.33333333%;
+    }
   }
 }
 
-