diff --git a/core/css/decanter.css b/core/css/decanter.css index 8b1e5f229..afcfa8a01 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -6524,10 +6524,6 @@ dfn { .su-brand-bar__container { max-width: 1500px; width: calc(100% - 200px); } } - @media only screen and (min-width: 0) and (max-width: 575px) { - .su-brand-bar__container { - padding-right: 20px; - padding-left: 20px; } } .su-brand-bar__logo { display: inline-block; @@ -7074,104 +7070,104 @@ button, .su-cta--button-center .su-cta__button { width: auto; } } -.global-footer { +.su-global-footer { background-color: #8c1515; color: #ffffff; } @media only screen and (min-width: 0) { - .global-footer { + .su-global-footer { padding-top: 2.31111104rem; } } @media only screen and (min-width: 576px) { - .global-footer { + .su-global-footer { padding-top: 2.31111104rem; } } @media only screen and (min-width: 768px) { - .global-footer { + .su-global-footer { padding-top: 2.59999992rem; } } @media only screen and (min-width: 992px) { - .global-footer { + .su-global-footer { padding-top: 2.59999992rem; } } @media only screen and (min-width: 1200px) { - .global-footer { + .su-global-footer { padding-top: 2.59999992rem; } } @media only screen and (min-width: 1500px) { - .global-footer { + .su-global-footer { padding-top: 2.74444436rem; } } @media only screen and (min-width: 0) { - .global-footer { + .su-global-footer { padding-bottom: 2.31111104rem; } } @media only screen and (min-width: 576px) { - .global-footer { + .su-global-footer { padding-bottom: 2.31111104rem; } } @media only screen and (min-width: 768px) { - .global-footer { + .su-global-footer { padding-bottom: 2.59999992rem; } } @media only screen and (min-width: 992px) { - .global-footer { + .su-global-footer { padding-bottom: 2.59999992rem; } } @media only screen and (min-width: 1200px) { - .global-footer { + .su-global-footer { padding-bottom: 2.59999992rem; } } @media only screen and (min-width: 1500px) { - .global-footer { + .su-global-footer { padding-bottom: 2.74444436rem; } } - .global-footer a { + .su-global-footer a { color: rgba(255, 255, 255, 0.9); text-decoration: none; } - .global-footer a:hover { + .su-global-footer a:hover { color: #ffffff; text-decoration: underline; } - .global-footer .global-footer__container { + .su-global-footer .su-global-footer__container { margin: 0 auto; } @media only screen and (min-width: 0) { - .global-footer .global-footer__container { + .su-global-footer .su-global-footer__container { max-width: calc(100% - 40px); width: calc(100% - 40px); } } @media only screen and (min-width: 576px) { - .global-footer .global-footer__container { + .su-global-footer .su-global-footer__container { max-width: calc(100% - 60px); width: calc(100% - 60px); } } @media only screen and (min-width: 768px) { - .global-footer .global-footer__container { + .su-global-footer .su-global-footer__container { max-width: calc(100% - 100px); width: calc(100% - 100px); } } @media only screen and (min-width: 992px) { - .global-footer .global-footer__container { + .su-global-footer .su-global-footer__container { max-width: calc(100% - 160px); width: calc(100% - 160px); } } @media only screen and (min-width: 1200px) { - .global-footer .global-footer__container { + .su-global-footer .su-global-footer__container { max-width: calc(100% - 200px); width: calc(100% - 200px); } } @media only screen and (min-width: 1500px) { - .global-footer .global-footer__container { + .su-global-footer .su-global-footer__container { max-width: 1500px; width: calc(100% - 200px); } } @media only screen and (min-width: 768px) { - .global-footer .global-footer__container { + .su-global-footer .su-global-footer__container { display: -webkit-box; display: -ms-flexbox; display: flex; } } - .global-footer .global-footer__brand { + .su-global-footer .su-global-footer__brand { padding-top: 0.5rem; text-align: center; } @media only screen and (min-width: 0) { - .global-footer .global-footer__brand { + .su-global-footer .su-global-footer__brand { margin-bottom: 0.8rem; } } @media only screen and (min-width: 576px) { - .global-footer .global-footer__brand { + .su-global-footer .su-global-footer__brand { margin-bottom: 0.8rem; } } @media only screen and (min-width: 768px) { - .global-footer .global-footer__brand { + .su-global-footer .su-global-footer__brand { margin-bottom: 0.9rem; } } @media only screen and (min-width: 992px) { - .global-footer .global-footer__brand { + .su-global-footer .su-global-footer__brand { margin-bottom: 0.9rem; } } @media only screen and (min-width: 1200px) { - .global-footer .global-footer__brand { + .su-global-footer .su-global-footer__brand { margin-bottom: 0.9rem; } } @media only screen and (min-width: 1500px) { - .global-footer .global-footer__brand { + .su-global-footer .su-global-footer__brand { margin-bottom: 0.95rem; } } - .global-footer .global-footer__brand a { + .su-global-footer .su-global-footer__brand a { display: inline-block; font-family: Stanford, 'Source Serif Pro', Georgia, Times, 'Times New Roman', serif; font-style: normal; @@ -7193,25 +7189,25 @@ button, color: #ffffff; font-size: 3.4rem; } @media only screen and (min-width: 0) and (max-width: 575px) { - .global-footer .global-footer__brand a { + .su-global-footer .su-global-footer__brand a { font-size: 3.2rem; } } - .global-footer .global-footer__content { + .su-global-footer .su-global-footer__content { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } @media only screen and (min-width: 576px) and (max-width: 767px) { - .global-footer .global-footer__content { + .su-global-footer .su-global-footer__content { text-align: center; } } @media only screen and (min-width: 768px) { - .global-footer .global-footer__content { + .su-global-footer .su-global-footer__content { padding-left: 3rem; } } @media only screen and (min-width: 992px) { - .global-footer .global-footer__content { + .su-global-footer .su-global-footer__content { padding-left: 4.5rem; } } @media only screen and (min-width: 1200px) { - .global-footer .global-footer__content { + .su-global-footer .su-global-footer__content { padding-left: 5.2rem; } } - .global-footer nav { + .su-global-footer nav { margin-bottom: 1rem; display: -webkit-box; display: -ms-flexbox; @@ -7223,66 +7219,66 @@ button, -ms-flex-pack: center; justify-content: center; } @media only screen and (min-width: 576px) { - .global-footer nav { + .su-global-footer nav { display: block; margin-bottom: 1.3rem; } } - .global-footer .global-footer__menu { + .su-global-footer .su-global-footer__menu { margin: 0 0 1rem; padding: 0; list-style-type: none; } - .global-footer .global-footer__menu li { + .su-global-footer .su-global-footer__menu li { margin: 0; padding: 0.25em 0; display: block; } @media only screen and (min-width: 576px) { - .global-footer .global-footer__menu li { + .su-global-footer .su-global-footer__menu li { margin-right: 1.3rem; display: inline-block; line-height: 1.1; } } @media only screen and (min-width: 768px) { - .global-footer .global-footer__menu li { + .su-global-footer .su-global-footer__menu li { padding: 0; text-align: left; } } @media only screen and (min-width: 992px) { - .global-footer .global-footer__menu li { + .su-global-footer .su-global-footer__menu li { margin-right: 2rem; } } - .global-footer .global-footer__menu li:last-child { + .su-global-footer .su-global-footer__menu li:last-child { margin-right: 0; } - .global-footer .global-footer__menu--global { + .su-global-footer .su-global-footer__menu--global { font-size: 1.5rem; } @media only screen and (min-width: 0) and (max-width: 575px) { - .global-footer .global-footer__menu--global { + .su-global-footer .su-global-footer__menu--global { padding-right: 2rem; } } @media (min-width: 768px) and (max-width: 1499px) { - .global-footer .global-footer__menu--global { + .su-global-footer .su-global-footer__menu--global { font-size: 1.7rem; } } @media only screen and (min-width: 1500px) { - .global-footer .global-footer__menu--global { + .su-global-footer .su-global-footer__menu--global { font-size: 1.8rem; } } - .global-footer .global-footer__menu--policy { + .su-global-footer .su-global-footer__menu--policy { font-size: 1.5rem; font-weight: 300; } @media only screen and (min-width: 0) and (max-width: 575px) { - .global-footer .global-footer__menu--policy { + .su-global-footer .su-global-footer__menu--policy { padding-left: 2rem; font-weight: 400; } } @media only screen and (min-width: 576px) { - .global-footer .global-footer__menu--policy { + .su-global-footer .su-global-footer__menu--policy { font-size: 1.4rem; } } @media (min-width: 768px) and (max-width: 1199px) { - .global-footer .global-footer__menu--policy { + .su-global-footer .su-global-footer__menu--policy { font-size: 1.5rem; } } @media only screen and (min-width: 1200px) { - .global-footer .global-footer__menu--policy { + .su-global-footer .su-global-footer__menu--policy { font-size: 1.6rem; } } - .global-footer .global-footer__copyright { + .su-global-footer .su-global-footer__copyright { font-size: 1.4rem; font-weight: 300; text-align: center; } - .global-footer .global-footer__copyright span { + .su-global-footer .su-global-footer__copyright span { white-space: nowrap; } @media only screen and (min-width: 768px) { - .global-footer .global-footer__copyright { + .su-global-footer .su-global-footer__copyright { text-align: left; } } .su-hero { diff --git a/core/scss/components/brand-bar/_brand-bar.scss b/core/scss/components/brand-bar/_brand-bar.scss index 979367c70..b0d3c87bc 100644 --- a/core/scss/components/brand-bar/_brand-bar.scss +++ b/core/scss/components/brand-bar/_brand-bar.scss @@ -21,9 +21,6 @@ .su-brand-bar__container { @include centered-column; - @include grid-media-only('xs') { - @include padding(null 20px); - } } .su-brand-bar__logo { diff --git a/core/scss/components/global-footer/_global-footer.scss b/core/scss/components/global-footer/_global-footer.scss index bf28cf98b..b22d4db5a 100644 --- a/core/scss/components/global-footer/_global-footer.scss +++ b/core/scss/components/global-footer/_global-footer.scss @@ -11,7 +11,7 @@ // // Global styles for the global footer. -.global-footer { +.su-global-footer { @include modular-spacing(1, 'padding-top'); @include modular-spacing(1, 'padding-bottom'); background-color: $color-cardinal-red; @@ -28,7 +28,7 @@ } // Grid settings for footer container. - .global-footer__container { + .su-global-footer__container { @include centered-column; @include grid-media('md') { display: flex; @@ -36,7 +36,7 @@ } // The Logo. - .global-footer__brand { + .su-global-footer__brand { @include padding(0.5rem null null); @include modular-spacing(-2, 'margin-bottom'); text-align: center; @@ -52,7 +52,7 @@ } } - .global-footer__content { + .su-global-footer__content { @include grid-media-only('sm') { text-align: center; } @@ -86,7 +86,7 @@ } } - .global-footer__menu { + .su-global-footer__menu { @include margin(0 0 1rem); @include padding(0); list-style-type: none; @@ -117,7 +117,7 @@ } } - .global-footer__menu--global { + .su-global-footer__menu--global { font-size: 1.5rem; @include grid-media-only('xs') { @@ -133,7 +133,7 @@ } } - .global-footer__menu--policy { + .su-global-footer__menu--policy { font-size: 1.5rem; font-weight: 300; @@ -155,7 +155,7 @@ } } - .global-footer__copyright { + .su-global-footer__copyright { font-size: 1.4rem; font-weight: 300; text-align: center; diff --git a/core/scss/utilities/mixins/layout/_sticky-footer.scss b/core/scss/utilities/mixins/layout/_sticky-footer.scss index fa326da54..8097be074 100644 --- a/core/scss/utilities/mixins/layout/_sticky-footer.scss +++ b/core/scss/utilities/mixins/layout/_sticky-footer.scss @@ -1,8 +1,5 @@ @charset 'UTF-8'; -// This file is here until https://github.com/SU-SWS/decanter/pull/261 gets -// merged and pulled in to this project. - // // @sticky-footer // @@ -15,12 +12,12 @@ // at the bottom of the page when the content is shorter than the window, but allow // the content to push the footer below the viewport when the page is long. // -// $selector - the CSS selector used to target the footer; default '> footer' +// $selector - the CSS selector used to target the footer; default '> .site-footer' // // Style guide: Mixins.Layout.Sticky Footer // -@mixin sticky-footer($selector: '> .global-footer') { +@mixin sticky-footer($selector: '> .site-footer') { @include padding(0); @include margin(0); diff --git a/core/templates/components/global-footer/global-footer.twig b/core/templates/components/global-footer/global-footer.twig index 59f4edc8f..6617ab2ca 100644 --- a/core/templates/components/global-footer/global-footer.twig +++ b/core/templates/components/global-footer/global-footer.twig @@ -1,29 +1,45 @@ - -