From 24e3f66091a44ce04b98dfc9ed7cde534885ad15 Mon Sep 17 00:00:00 2001
From: m26lebla <m26lebla@uwaterloo.ca>
Date: Wed, 22 Jul 2020 15:34:55 -0400
Subject: [PATCH] Adding css to align sections to max page width
---
css/styles.css | 44 +++++++++++++------
source/_patterns/00-config/_breakpoints.scss | 2 +-
.../_patterns/03-layouts/footer/_footer.scss | 6 +--
source/_patterns/03-layouts/header/header.yml | 2 +-
.../site-container/_site-container.scss | 21 +++++++--
.../_patterns/04-components/block/_block.scss | 2 +-
.../04-components/page-title/_page-title.scss | 4 +-
.../04-components/site-name/_site-name.scss | 4 +-
8 files changed, 61 insertions(+), 24 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index 923a9bd5..28ed28fa 100644
--- a/css/styles.css
+++ b/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;
diff --git a/source/_patterns/00-config/_breakpoints.scss b/source/_patterns/00-config/_breakpoints.scss
index bd03fbdb..72e5ff42 100644
--- a/source/_patterns/00-config/_breakpoints.scss
+++ b/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
diff --git a/source/_patterns/03-layouts/footer/_footer.scss b/source/_patterns/03-layouts/footer/_footer.scss
index 2c53c95c..29522301 100644
--- a/source/_patterns/03-layouts/footer/_footer.scss
+++ b/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;
+
}
}
diff --git a/source/_patterns/03-layouts/header/header.yml b/source/_patterns/03-layouts/header/header.yml
index 0043dbf5..106ab25d 100644
--- a/source/_patterns/03-layouts/header/header.yml
+++ b/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:
diff --git a/source/_patterns/03-layouts/site-container/_site-container.scss b/source/_patterns/03-layouts/site-container/_site-container.scss
index 559b866d..e72e6d13 100644
--- a/source/_patterns/03-layouts/site-container/_site-container.scss
+++ b/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;
+ }
+ }
}
+
diff --git a/source/_patterns/04-components/block/_block.scss b/source/_patterns/04-components/block/_block.scss
index f3f3407c..08918dac 100644
--- a/source/_patterns/04-components/block/_block.scss
+++ b/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
diff --git a/source/_patterns/04-components/page-title/_page-title.scss b/source/_patterns/04-components/page-title/_page-title.scss
index f4a77444..72db6072 100644
--- a/source/_patterns/04-components/page-title/_page-title.scss
+++ b/source/_patterns/04-components/page-title/_page-title.scss
@@ -1,4 +1,6 @@
// @file
// Styles for Page title.
-// .page-title {}
+ .page-title {
+ padding-top:1rem;
+ }
diff --git a/source/_patterns/04-components/site-name/_site-name.scss b/source/_patterns/04-components/site-name/_site-name.scss
index 1d863d51..8323335c 100644
--- a/source/_patterns/04-components/site-name/_site-name.scss
+++ b/source/_patterns/04-components/site-name/_site-name.scss
@@ -1,4 +1,6 @@
// @file
// Styles for Site name.
-// .site-name {}
+ .site-name {
+ padding:1rem;
+ }
--
GitLab