Update container vars and view breakpoints

d2iq-archive · Sep 12, 2018 · aa56efe · aa56efe
1 parent 63c78ed
commit aa56efe
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 26 deletions.
diff --git a/styles/layout/container/variables.less b/styles/layout/container/variables.less
@@ -16,10 +16,10 @@
 // Container Width
 
 @container-width: 100%;
-@container-width-screen-small: null;
-@container-width-screen-medium: 730px;
-@container-width-screen-large: 920px;
-@container-width-screen-jumbo: 1100px;
+@container-width-screen-small: 552px;
+@container-width-screen-medium: 804px;
+@container-width-screen-large: 1000px;
+@container-width-screen-jumbo: 1280px;
 
 /* Margin */
 

diff --git a/styles/layout/grid/variables.less b/styles/layout/grid/variables.less
@@ -17,11 +17,11 @@
 
 // Gutter Width
 
-@grid-gutter-width: 24px;
+@grid-gutter-width: 16px;
 @grid-gutter-width-screen-small: 24px;
 @grid-gutter-width-screen-medium: 24px;
-@grid-gutter-width-screen-large: 24px;
-@grid-gutter-width-screen-jumbo: 32px;
+@grid-gutter-width-screen-large: 32px;
+@grid-gutter-width-screen-jumbo: 40px;
 
 /* Layout Variants */
 
@@ -35,16 +35,16 @@
 
 // Narrow
 
-@grid-narrow-gutter-width: 12px;
+@grid-narrow-gutter-width: 8px;
 @grid-narrow-gutter-width-screen-small: 12px;
 @grid-narrow-gutter-width-screen-medium: 12px;
-@grid-narrow-gutter-width-screen-large: 12px;
-@grid-narrow-gutter-width-screen-jumbo: 16px;
+@grid-narrow-gutter-width-screen-large: 16px;
+@grid-narrow-gutter-width-screen-jumbo: 20px;
 
 // Wide
 
-@grid-wide-gutter-width: 48px;
+@grid-wide-gutter-width: 32px;
 @grid-wide-gutter-width-screen-small: 48px;
 @grid-wide-gutter-width-screen-medium: 48px;
-@grid-wide-gutter-width-screen-large: 48px;
-@grid-wide-gutter-width-screen-jumbo: 64px;
+@grid-wide-gutter-width-screen-large: 64px;
+@grid-wide-gutter-width-screen-jumbo: 80px;
diff --git a/styles/layout/variables.less b/styles/layout/variables.less
@@ -11,20 +11,20 @@
  * Layout Breakpoints
  */
 
-// Small
-@layout-screen-small-min-width: 480px;
-@layout-screen-small-max-width: 767px;
+// Small (Tablet Portrait)
+@layout-screen-small-min-width: 600px;
+@layout-screen-small-max-width: 899px;
 
-// Medium
-@layout-screen-medium-min-width: 768px;
-@layout-screen-medium-max-width: 991px;
+// Medium (Tablet Landscape & Small Laptops)
+@layout-screen-medium-min-width: 900px;
+@layout-screen-medium-max-width: 1199px;
 
-// Large
-@layout-screen-large-min-width: 992px;
-@layout-screen-large-max-width: 1399px;
+// Large (Laptops)
+@layout-screen-large-min-width: 1200px;
+@layout-screen-large-max-width: 1799px;
 
-// Small
-@layout-screen-jumbo-min-width: 1400px;
+// Jumbo (Wide Monitors)
+@layout-screen-jumbo-min-width: 1800px;
 @layout-screen-jumbo-max-width: null;
 
 /*
@@ -34,8 +34,8 @@
 @base-spacing-unit: 24px;
 @base-spacing-unit-screen-small: 24px;
 @base-spacing-unit-screen-medium: 24px;
-@base-spacing-unit-screen-large: 24px;
-@base-spacing-unit-screen-jumbo: 32px;
+@base-spacing-unit-screen-large: 32px;
+@base-spacing-unit-screen-jumbo: 40px;
 
 /*
  * Z-Index