Adding css to align sections to max page width

css/styles.css

@@ -1113,19 +1113,16 @@ svg:not(:root) {
   .uw-footer__wrapper {
     display: grid;
     grid-template-columns: 100%;
-    grid-template-rows: auto auto auto;
     margin-left: auto;
     margin-right: auto;
     max-width: 63rem;
     padding: 1rem; }
     @media (min-width: 48.06rem) {
       .uw-footer__wrapper {
-        grid-template-columns: 60% 40%;
-        grid-template-rows: auto auto; } }
+        grid-template-columns: 60% 40%; } }
     @media (min-width: 63.1875rem) {
       .uw-footer__wrapper {
-        grid-template-columns: 25% auto 30%;
-        grid-template-rows: auto; } }
+        grid-template-columns: 25% auto 30%; } }
   .uw-footer__address {
     grid-column: 1 / 2;
     grid-row: 1 / 2;
@@ -1473,11 +1470,11 @@ svg:not(:root) {
 .layout {
   margin-left: auto;
   margin-right: auto;
-  max-width: 80rem; }
+  max-width: 63.1875rem; }
   .layout.uw-contained-width {
     margin-left: auto;
     margin-right: auto;
-    max-width: 80rem; }
+    max-width: 63.1875rem; }
   .layout.uw-full-width {
     max-width: 100%;
     width: 100%; }
@@ -1485,7 +1482,7 @@ svg:not(:root) {
 .layout.uw-contained-width {
   margin-left: auto;
   margin-right: auto;
-  max-width: 80rem; }
+  max-width: 63.1875rem; }
 
 .l-media {
   display: flex;
@@ -1567,10 +1564,25 @@ svg:not(:root) {
     background-color: #fff;
     grid-column: 1 / 2;
     grid-row: 3 / 4;
-    min-height: 500px; }
+    min-height: 60vh; }
   .uw-site-container .uw-footer {
     grid-column: 1 / 2;
     grid-row: 4 / 5; }
+  .uw-site-container .messages,
+  .uw-site-container .block-page-title-block,
+  .uw-site-container .block-local-tasks-block,
+  .uw-site-container .layout-builder-form,
+  .uw-site-container .node-form,
+  .uw-site-container .contextual-region,
+  .uw-site-container form {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 63.1875rem; }
+  .uw-site-container .block-local-tasks-block {
+    min-height: 25vh; }
+    @media (min-width: 40.06rem) {
+      .uw-site-container .block-local-tasks-block {
+        min-height: auto; } }
 
 .uw-site-footer {
   background-color: #787878;
@@ -1640,7 +1652,7 @@ ul.toolbar-menu {
     text-align: center; }
 
 .block {
-  margin-bottom: 2.5rem; }
+  margin-bottom: 1rem; }
 
 .block--provider-layout-builder {
   margin-bottom: 0; }
@@ -1921,7 +1933,7 @@ ul.toolbar-menu {
   .uw-cta.uw-contained-width {
     margin-left: auto;
     margin-right: auto;
-    max-width: 80rem;
+    max-width: 63.1875rem;
     padding: 0; }
   .uw-cta .uw-cta__aside {
     background-color: #000;
@@ -2191,7 +2203,7 @@ ul.toolbar-menu {
 .uw-copy-text__wrapper.uw-contained-width {
   margin-left: auto;
   margin-right: auto;
-  max-width: 80rem;
+  max-width: 63.1875rem;
   padding: 1rem 0; }
 
 /* stylelint-disable-next-line selector-no-qualifying-type */
@@ -3069,7 +3081,7 @@ details.details {
 .uw-image__wrapper.uw-contained-width {
   margin-left: auto;
   margin-right: auto;
-  max-width: 80rem; }
+  max-width: 63.1875rem; }
 
 .uw-instagram {
   display: block;
@@ -3955,6 +3967,9 @@ details.details {
     .mobile-menu__subnav .mobile-menu__link:hover, .mobile-menu__subnav .mobile-menu__link:focus, .mobile-menu__subnav .mobile-menu__link:active {
       color: #000; }
 
+.page-title {
+  padding-top: 1rem; }
+
 .pager__items {
   list-style-type: none;
   margin: 0;
@@ -4136,6 +4151,9 @@ picture {
   text-indent: -999rem;
   width: 100%; }
 
+.site-name {
+  padding: 1rem; }
+
 .skiplinks {
   display: flex;
   font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;

source/_patterns/00-config/_breakpoints.scss

@@ -19,7 +19,7 @@ $xl: 80rem;
 $xxl: 102.5rem;
 $onek: 120rem;
 $twok: 159.93rem;
-$max-width: $xl;
+$max-width: $large;
 
 /// Mixin - xs Breakpoint
 /// Allows easier @include xs {} syntax

source/_patterns/03-layouts/footer/_footer.scss

@@ -10,7 +10,7 @@
   &__wrapper {
     display: grid;
     grid-template-columns: 100%;
-    grid-template-rows: auto auto auto;
+
     margin-left: auto;
     margin-right: auto;
     max-width: 63rem;
@@ -18,12 +18,12 @@
 
     @include medium {
       grid-template-columns: 60% 40%;
-      grid-template-rows: auto auto;
+
     }
 
     @include large {
       grid-template-columns: 25% auto 30%;
-      grid-template-rows: auto;
+
     }
   }
 

source/_patterns/03-layouts/header/header.yml

@@ -2,7 +2,7 @@
 menu_name: 'header'
 items:
   - title: 'Admissions'
-    url: https://uwaterloo.ca/admissions/'
+    url: 'https://uwaterloo.ca/admissions/'
     original_link:
       options:
         attributes:

source/_patterns/03-layouts/site-container/_site-container.scss

@@ -11,16 +11,31 @@
     grid-column: 1 / 2;
     grid-row: 2 / 3;
   }
-
   .uw-main {
     background-color: $uw-white;
     grid-column: 1 / 2;
     grid-row: 3 / 4;
-    min-height: 500px;
+    min-height: 60vh;
   }
-
   .uw-footer {
     grid-column: 1 / 2;
     grid-row: 4 / 5;
   }
+  // constraining sections of the theme with the site-container
+  .messages,
+  .block-page-title-block,
+  .block-local-tasks-block,
+  .layout-builder-form,
+  .node-form,
+  .contextual-region,
+  form{
+    @include uw-contained-width;
+  }
+  .block-local-tasks-block{
+    min-height:25vh;
+    @include small {
+      min-height:auto;
+    }
+  }
 }
+

source/_patterns/04-components/block/_block.scss

@@ -2,7 +2,7 @@
 // Styles for Block.
 
 .block {
-  margin-bottom: rem(gesso-spacing(lg));
+  margin-bottom: rem(gesso-spacing(sm));
 }
 
 // disable margin for layout builder blocks

source/_patterns/04-components/page-title/_page-title.scss

 // @file
 // Styles for Page title.
 
-// .page-title {}
+ .page-title {
+   padding-top:1rem;
+ }

source/_patterns/04-components/site-name/_site-name.scss

 // @file
 // Styles for Site name.
 
-// .site-name {}
+ .site-name {
+   padding:1rem;
+ }