Merge pull request #238 from MITLibraries/use-79

Introduce 1280px max width container with responsive behavior

Author: djanelle-mit

app/assets/stylesheets/partials/_layouts.scss

@@ -1,3 +1,27 @@
+.wrap-gridband, .wrap-notice, .wrap-header, 
+.wrap-header-local, .wrap-breadcrumb, .wrap-content, 
+.wrap-footer, .wrap-footer-institute, .wrap-footer.footer-slim {
+  
+  // Ensures the container is actually 1280px when space is available
+  max-width: calc(#{$container-max-width} + (#{$edge-padding-tablet} * 2)); 
+  
+  // Set desktop-sized padding
+  padding: 20px $edge-padding-desktop;
+
+  // Set edge margins for tablet (portrait) devices
+  @media (max-width: $bp-screen-md) {
+    padding-left: $edge-padding-tablet;
+    padding-right: $edge-padding-tablet;
+  }
+
+  // Set edge margins for phone devices
+  @media (max-width: $bp-screen-sm) {
+    padding-left: $edge-padding-phone;
+    padding-right: $edge-padding-phone;
+  }
+
+}
+
 .hidden-md {
   @media (max-width: $bp-screen-md) {
     display: none;

app/assets/stylesheets/partials/_variables.scss

@@ -20,3 +20,15 @@ $fw-bold:     700;
 
 $lh-xtight: 0.92;
 $lh-base:   1.2;
+
+// ----------------------------
+// #LAYOUT
+// ----------------------------
+
+// Container max-width
+$container-max-width: 1280px;
+
+// Left/Right Edge Padding
+$edge-padding-desktop: 32px;
+$edge-padding-tablet: 24px;
+$edge-padding-phone: 16px;