SDSS-1076: Widening the max-width of site to 2000px (#315)

* SDSS-1076: Widening to the max-width

docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/src/scss/components/header/_header-option-a.scss

@@ -25,7 +25,6 @@ body.sdss-header-variant--option_a {
   }
 }
 
-
 //
 // Mobile first min-width queries.
 // Queries should go in order of smallest screen to largest (e.g., sm, md, lg)

docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/src/scss/components/header/_header.scss

@@ -205,9 +205,7 @@ header.su-masthead {
 @include grid-media-min('xl') {
   header.su-masthead {
     section.su-masthead--inner {
-      width: calc(100% - 200px);
-      max-width: 1500px;
-      margin: 0 auto;
+      @include sdss-centered-column;
 
       .su-multi-menu {
         padding: 0;

docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/src/scss/components/newsroom/_newsroom-menu.scss

@@ -8,7 +8,7 @@
 }
 
 .menu--newsroom {
-  @include centered-column;
+  @include sdss-centered-column;
 
   display: grid;
   grid-template-columns: 160px 1fr;

docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/src/scss/components/node/_stanford-page.scss

@@ -18,7 +18,7 @@
 
 // For the issue with the h1's collapsing over to the left.
 .jumpstart-ui--one-column.centered-content {
-  @include centered-column;
+  @include sdss-centered-column;
 
   > div:first-child {
     margin-left: unset;

docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/src/scss/theme/_layout.scss

@@ -0,0 +1,23 @@
+
+///
+/// Centered Container
+///
+/// Centers the first child element of which this class is applied to.
+///
+///
+
+// Adjustments to the centered container to have a max-width of 2000px.
+
+
+.centered-container {
+    @if(mixin-exists(sdss-centered-column)) { @include sdss-centered-column(); }
+}
+
+.su-brand-bar__container,
+.su-local-footer__columns,
+.su-local-footer__header,
+.su-global-footer__container,
+.jumpstart-ui--one-column.centered-content {
+    @include sdss-centered-column;
+}
+

docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/src/scss/theme/index.scss

@@ -15,6 +15,7 @@
 @import 'caption';
 @import 'cta';
 @import 'headings';
+@import 'layout';
 @import 'link';
 @import 'lists';
 @import 'typography';

docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/src/scss/utilities/mixins/_centered-column.scss

@@ -0,0 +1,32 @@
+
+///
+/// Centers a single cellin a container based on max width in breakpoints.
+///
+/// @name sdss-centered-column
+///
+/// @param {map} $grid - A sass map where the key is the shortcode of the breakpoint and the value is the full media query.
+/// @param {map} $screens - A sass map of screen size breakpoint width values
+/// @param {map} $margin - A sass map of screen size breakpoint screen edge margin sizes
+///
+/// @group mixin
+///
+
+@mixin sdss-centered-column($grid: $sdss-grid-media, $screens: $sdss-grid-screens, $margin: $sdss-screen-margins) {
+  margin: 0 auto;
+
+  @each $code, $breakpoint in $grid {
+    $spacing: map-get($margin, $code);
+
+    @media #{$breakpoint} {
+      @if breakpoint-max($code, $grid) == null {
+        $max-width: map-get($screens, $code);
+        max-width: $sdss-site-max-width;
+        width: calc(100% - #{$spacing * 2});
+      }
+      @else {
+        max-width: calc(100% - #{$spacing * 2});
+        width: calc(100% - #{$spacing * 2});
+      }
+    }
+  }
+}

docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/src/scss/utilities/mixins/_screen-margins.scss

@@ -0,0 +1,15 @@
+
+///
+/// A sass map of screen margins for edge containment
+///
+/// @name $su-screen-margins
+///
+/// @group variable
+$sdss-screen-margins: (
+  'xs': 20px,
+  'sm': 30px,
+  'md': 50px,
+  'lg': 80px,
+  'xl': 100px,
+  '2xl':  100px
+) !default;

docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/src/scss/utilities/mixins/index.scss

@@ -9,8 +9,10 @@
 //@import 'filenamehere';
 @import 'background-colors';
 @import 'buttons';
+@import 'centered-column';
 @import 'cta';
 @import 'links';
 @import 'link-icon';
 @import 'links-news';
+@import 'screen-margins';
 @import 'typography';

docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/src/scss/utilities/variables/_breakpoints.scss

@@ -0,0 +1,132 @@
+
+///
+/// @name $su-screen-xs
+///
+/// @group variable
+$su-screen-xs: 0 !default;
+
+///
+/// @name $su-screen-sm
+///
+/// @group variable
+$su-screen-sm: 576px !default;
+
+///
+/// @name $su-screen-md
+///
+/// @group variable
+$su-screen-md: 768px !default;
+
+///
+/// @name $su-screen-lg
+///
+/// @group variable
+$su-screen-lg: 992px !default;
+
+///
+/// @name $su-screen-xl
+///
+/// @group variable
+$su-screen-xl: 1200px !default;
+
+///
+/// @name $su-screen-2xl
+///
+/// @group variable
+$su-screen-2xl: $sdss-site-max-width !default;
+
+///
+/// Mixin for basic mobile-first media query for xs-and-up screen size.
+///
+/// @name $su-breakpoint-xs
+///
+/// @group variable
+$su-breakpoint-xs: 'only screen and (min-width: #{$su-screen-xs})' !default;
+
+///
+/// Mixin for basic mobile-first media query for xs-only screen size.
+///
+/// @name $su-breakpoint-xs-only
+///
+/// @group variable
+$su-breakpoint-xs-only: 'only screen and (min-width: #{$su-screen-xs}) and (max-width: #{$su-screen-sm - 1})' !default;
+
+///
+/// Mixin for basic mobile-first media query for sm-and-up screen size.
+///
+/// @name $su-breakpoint-sm
+///
+/// @group variable
+$su-breakpoint-sm: 'only screen and (min-width: #{$su-screen-sm})' !default;
+
+///
+/// Mixin for basic mobile-first media query for sm-only screen size.
+///
+/// @name $su-breakpoint-sm-only
+///
+/// @group variable
+$su-breakpoint-sm-only: 'only screen and (min-width: #{$su-screen-sm}) and (max-width: #{$su-screen-md - 1})' !default;
+
+///
+/// Mixin for basic mobile-first media query for md-and-up screen size.
+///
+/// @name $su-breakpoint-md
+///
+/// @group variable
+$su-breakpoint-md: 'only screen and (min-width: #{$su-screen-md})' !default;
+
+///
+/// Mixin for basic mobile-first media query for md-only screen size.
+///
+/// @name $su-breakpoint-md-only
+///
+/// @group variable
+$su-breakpoint-md-only: 'only screen and (min-width: #{$su-screen-md}) and (max-width: #{$su-screen-lg - 1})' !default;
+
+///
+/// Mixin for basic mobile-first media query for lg-and-up screen size.
+///
+/// @name $su-breakpoint-lg
+///
+/// @group variable
+$su-breakpoint-lg: 'only screen and (min-width: #{$su-screen-lg})' !default;
+
+///
+/// Mixin for basic mobile-first media query for lg-only screen size.
+///
+/// @name $su-breakpoint-lg-only
+///
+/// @group variable
+$su-breakpoint-lg-only: 'only screen and (min-width: #{$su-screen-lg}) and (max-width: #{$su-screen-xl - 1})' !default;
+
+///
+/// Mixin for basic mobile-first media query for xl-and-up screen size.
+///
+/// @name $su-breakpoint-xl
+///
+/// @group variable
+$su-breakpoint-xl: 'only screen and (min-width: #{$su-screen-xl})' !default;
+
+///
+/// Mixin for basic mobile-first media query for xl-only screen size.
+///
+/// @name $su-breakpoint-xl-only
+///
+/// @group variable
+$su-breakpoint-xl-only: 'only screen and (min-width: #{$su-screen-xl}) and (max-width: #{$su-screen-2xl - 1})' !default;
+
+///
+/// Mixin for basic mobile-first media query for 2xl-and-up screen size.
+///
+/// @name $su-breakpoint-2xl
+///
+/// @group variable
+$su-breakpoint-2xl: 'only screen and (min-width: #{$su-screen-2xl})' !default;
+
+///
+/// Just in case.
+///
+/// @name $su-breakpoint-2xl-only
+///
+/// @group variable
+$su-breakpoint-2xl-only: $su-breakpoint-2xl;

docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/src/scss/utilities/variables/_grid.scss

@@ -0,0 +1,133 @@
+
+///
+/// The number of columns used by default for the flex grid.
+///
+/// @name $su-grid-columns
+///
+/// @group variable
+$su-grid-columns: 12 !default;
+
+///
+/// A sass map of screen sized keyed with the breakpoint shortcode.
+///
+/// @name $su-grid-screens
+///
+/// @group variable
+$sdss-grid-screens: (
+  'xs': $su-screen-xs,
+  'sm': $su-screen-sm,
+  'md': $su-screen-md,
+  'lg': $su-screen-lg,
+  'xl': $su-screen-xl,
+  '2xl': $su-screen-2xl
+) !default;
+
+///
+/// A sass map of breakpoints sized keyed with the breakpoint shortcode.
+///
+/// @name $sdss-grid-media
+///
+/// @group variable
+$sdss-grid-media: (
+  'xs': $su-breakpoint-xs,
+  'sm': $su-breakpoint-sm,
+  'md': $su-breakpoint-md,
+  'lg': $su-breakpoint-lg,
+  'xl': $su-breakpoint-xl,
+  '2xl': $su-breakpoint-2xl
+) !default;
+
+///
+/// A sass map of device sized keyed with the breakpoint shortcode.
+///
+/// @name $su-grid-device
+///
+/// @group variable
+$su-grid-device: (
+  'mobile': $su-breakpoint-xs,
+  'tablet': $su-breakpoint-md,
+  'desktop': $su-breakpoint-2xl
+) !default;
+
+///
+/// A sass map of single breakpoint spans keyed with the breakpoint shortcode.
+///
+/// @name $su-grid-media-only
+///
+/// @group variable
+$su-grid-media-only: (
+  'xs': $su-breakpoint-xs-only,
+  'sm': $su-breakpoint-sm-only,
+  'md': $su-breakpoint-md-only,
+  'lg': $su-breakpoint-lg-only,
+  'xl': $su-breakpoint-xl-only,
+  '2xl': $su-breakpoint-2xl
+) !default;
+
+///
+/// A sass map of css grid columns keyed with breakpoint media queries. 2 column.
+///
+/// @name $su-responsive-columns-default
+///
+/// @group variable
+$su-responsive-columns-default: (
+  $su-breakpoint-xs: 1fr,
+  $su-breakpoint-sm: 1fr 1fr,
+  $su-breakpoint-md: 1fr 1fr,
+  $su-breakpoint-lg: 1fr 1fr,
+  $su-breakpoint-xl: 1fr 1fr,
+  $su-breakpoint-2xl: 1fr 1fr
+) !default;
+
+///
+/// A sass map of css grid columns keyed with breakpoint media queries. 2 column.
+///
+/// @name $su-responsive-columns-two
+///
+/// @group variable
+$su-responsive-columns-two: $su-responsive-columns-default !default;
+
+///
+/// A sass map of css grid columns keyed with breakpoint media queries. 3 column.
+///
+/// @name $su-responsive-columns-three
+///
+/// @group variable
+$su-responsive-columns-three: (
+  $su-breakpoint-xs: 1fr,
+  $su-breakpoint-sm: 1fr 1fr,
+  $su-breakpoint-md: 1fr 1fr,
+  $su-breakpoint-lg: 1fr 1fr 1fr,
+  $su-breakpoint-xl: 1fr 1fr 1fr,
+  $su-breakpoint-2xl: 1fr 1fr 1fr
+) !default;
+
+///
+/// A sass map of css grid columns keyed with breakpoint media queries. 4 column.
+///
+/// @name $su-responsive-columns-four
+///
+/// @group variable
+$su-responsive-columns-four: (
+  $su-breakpoint-xs: 1fr,
+  $su-breakpoint-sm: 1fr 1fr,
+  $su-breakpoint-md: 1fr 1fr,
+  $su-breakpoint-lg: 1fr 1fr 1fr 1fr,
+  $su-breakpoint-xl: 1fr 1fr 1fr 1fr,
+  $su-breakpoint-2xl: 1fr 1fr 1fr 1fr
+) !default;
+
+///
+/// A sass map of css grid columns keyed with breakpoint media queries. 6 column.
+///
+/// @name $su-responsive-columns-six
+///
+/// @group variable
+$su-responsive-columns-six: (
+  $su-breakpoint-xs: 1fr,
+  $su-breakpoint-sm: 1fr 1fr 1fr,
+  $su-breakpoint-md: 1fr 1fr 1fr,
+  $su-breakpoint-lg: 1fr 1fr 1fr 1fr 1fr,
+  $su-breakpoint-xl: 1fr 1fr 1fr 1fr 1fr 1fr,
+  $su-breakpoint-2xl: 1fr 1fr 1fr 1fr 1fr 1fr
+) !default;