diff --git a/core/css/decanter.css b/core/css/decanter.css index de157d980..30d4c2af8 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -7058,9 +7058,44 @@ button, width: auto; } } .global-footer { - padding: 2.5rem 10px; background-color: #8c1515; color: #ffffff; } + @media only screen and (min-width: 0) { + .global-footer { + padding-top: 2.31111104rem; } } + @media only screen and (min-width: 576px) { + .global-footer { + padding-top: 2.31111104rem; } } + @media only screen and (min-width: 768px) { + .global-footer { + padding-top: 2.59999992rem; } } + @media only screen and (min-width: 992px) { + .global-footer { + padding-top: 2.59999992rem; } } + @media only screen and (min-width: 1200px) { + .global-footer { + padding-top: 2.59999992rem; } } + @media only screen and (min-width: 1500px) { + .global-footer { + padding-top: 2.74444436rem; } } + @media only screen and (min-width: 0) { + .global-footer { + padding-bottom: 2.31111104rem; } } + @media only screen and (min-width: 576px) { + .global-footer { + padding-bottom: 2.31111104rem; } } + @media only screen and (min-width: 768px) { + .global-footer { + padding-bottom: 2.59999992rem; } } + @media only screen and (min-width: 992px) { + .global-footer { + padding-bottom: 2.59999992rem; } } + @media only screen and (min-width: 1200px) { + .global-footer { + padding-bottom: 2.59999992rem; } } + @media only screen and (min-width: 1500px) { + .global-footer { + padding-bottom: 2.74444436rem; } } .global-footer a { color: rgba(255, 255, 255, 0.9); text-decoration: none; } @@ -7099,13 +7134,26 @@ button, display: -ms-flexbox; display: flex; } } .global-footer .global-footer__brand { - margin: 0 0 1.25rem; - padding-top: 5px; + padding-top: 0.5rem; text-align: center; } + @media only screen and (min-width: 0) { + .global-footer .global-footer__brand { + margin-bottom: 0.8rem; } } + @media only screen and (min-width: 576px) { + .global-footer .global-footer__brand { + margin-bottom: 0.8rem; } } @media only screen and (min-width: 768px) { .global-footer .global-footer__brand { - margin-bottom: 0; - text-align: left; } } + margin-bottom: 0.9rem; } } + @media only screen and (min-width: 992px) { + .global-footer .global-footer__brand { + margin-bottom: 0.9rem; } } + @media only screen and (min-width: 1200px) { + .global-footer .global-footer__brand { + margin-bottom: 0.9rem; } } + @media only screen and (min-width: 1500px) { + .global-footer .global-footer__brand { + margin-bottom: 0.95rem; } } .global-footer .global-footer__brand a { display: inline-block; font-family: Stanford, 'Source Serif Pro', Georgia, Times, 'Times New Roman', serif; @@ -7125,6 +7173,7 @@ button, font-variant-ligatures: discretionary-ligatures; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + color: #ffffff; font-size: 3.4rem; } @media only screen and (min-width: 0) and (max-width: 575px) { .global-footer .global-footer__brand a { @@ -7133,16 +7182,20 @@ button, -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } - @media only screen and (min-width: 1200px) { + @media only screen and (min-width: 576px) and (max-width: 767px) { .global-footer .global-footer__content { - padding-left: 52px; } } + text-align: center; } } @media only screen and (min-width: 768px) { .global-footer .global-footer__content { - padding-left: 45px; } } - @media only screen and (min-width: 576px) and (max-width: 767px) { + padding-left: 3rem; } } + @media only screen and (min-width: 992px) { .global-footer .global-footer__content { - text-align: center; } } + padding-left: 4.5rem; } } + @media only screen and (min-width: 1200px) { + .global-footer .global-footer__content { + padding-left: 5.2rem; } } .global-footer nav { + margin-bottom: 1rem; display: -webkit-box; display: -ms-flexbox; display: flex; @@ -7155,68 +7208,60 @@ button, @media only screen and (min-width: 576px) { .global-footer nav { display: block; - -webkit-box-pack: left; - -ms-flex-pack: left; - justify-content: left; - margin-bottom: 0.75rem; } } - @media only screen and (min-width: 768px) { - .global-footer nav { - margin: 0; } } + margin-bottom: 1.3rem; } } .global-footer .global-footer__menu { - margin: 0 0 1.5rem; + margin: 0 0 1rem; padding: 0; list-style-type: none; } - @media (max-width: 767px) { - .global-footer .global-footer__menu { - padding-right: 20px; - padding-left: 20px; } } - @media only screen and (min-width: 576px) { - .global-footer .global-footer__menu { - margin: 0 0 0.5rem; } } - @media only screen and (min-width: 768px) { - .global-footer .global-footer__menu { - margin-bottom: 0; } } .global-footer .global-footer__menu li { margin: 0; - padding: 0; padding: 0.25em 0; display: block; } - @media only screen and (min-width: 576px) and (max-width: 767px) { + @media only screen and (min-width: 576px) { .global-footer .global-footer__menu li { - margin-right: 1rem; + margin-right: 1.3rem; display: inline-block; - font-size: 0.9em; } } + line-height: 1.1; } } @media only screen and (min-width: 768px) { .global-footer .global-footer__menu li { - margin-right: 1rem; - padding: 0 0 1em; - text-align: left; - display: inline-block; - line-height: 0; } } + padding: 0; + text-align: left; } } @media only screen and (min-width: 992px) { .global-footer .global-footer__menu li { margin-right: 2rem; } } .global-footer .global-footer__menu li:last-child { - margin-right: 0; - margin-left: 0; } + margin-right: 0; } .global-footer .global-footer__menu--global { - font-size: 1.75rem; - font-weight: normal; } - @media only screen and (min-width: 768px) { + font-size: 1.5rem; } + @media only screen and (min-width: 0) and (max-width: 575px) { + .global-footer .global-footer__menu--global { + padding-right: 2rem; } } + @media (min-width: 768px) and (max-width: 1499px) { + .global-footer .global-footer__menu--global { + font-size: 1.7rem; } } + @media only screen and (min-width: 1500px) { .global-footer .global-footer__menu--global { - font-size: 1.85rem; } } + font-size: 1.8rem; } } .global-footer .global-footer__menu--policy { - font-size: 1.6rem; } + font-size: 1.5rem; + font-weight: 300; } + @media only screen and (min-width: 0) and (max-width: 575px) { + .global-footer .global-footer__menu--policy { + padding-left: 2rem; + font-weight: 400; } } @media only screen and (min-width: 576px) { .global-footer .global-footer__menu--policy { - font-weight: 300; } } + font-size: 1.4rem; } } + @media (min-width: 768px) and (max-width: 1199px) { + .global-footer .global-footer__menu--policy { + font-size: 1.5rem; } } + @media only screen and (min-width: 1200px) { + .global-footer .global-footer__menu--policy { + font-size: 1.6rem; } } .global-footer .global-footer__copyright { - font-size: 1.6rem; + font-size: 1.4rem; font-weight: 300; - line-height: 1.5; - text-align: center; - -ms-grid-row: 2; - -ms-grid-column: 1; } + text-align: center; } .global-footer .global-footer__copyright span { white-space: nowrap; } @media only screen and (min-width: 768px) { @@ -7317,9 +7362,6 @@ a { a:hover, a:active { color: #2e2d29; } - .su-link:focus, - a:focus { - outline: 0; } .su-link--action { text-decoration: none; diff --git a/core/scss/components/global-footer/_global-footer.scss b/core/scss/components/global-footer/_global-footer.scss index e679c64ba..bf28cf98b 100644 --- a/core/scss/components/global-footer/_global-footer.scss +++ b/core/scss/components/global-footer/_global-footer.scss @@ -12,7 +12,8 @@ // Global styles for the global footer. .global-footer { - @include padding(2.5rem 10px); + @include modular-spacing(1, 'padding-top'); + @include modular-spacing(1, 'padding-bottom'); background-color: $color-cardinal-red; color: $color-white; @@ -34,40 +35,38 @@ } } + // The Logo. .global-footer__brand { - @include margin(0 0 1.25rem); - @include padding(5px null null); + @include padding(0.5rem null null); + @include modular-spacing(-2, 'margin-bottom'); text-align: center; - // Logo should have no margin at higher breakpoints. - @include grid-media('md') { - @include margin(null null 0); - text-align: left; - } - - // The Logo. a { @include logo; + color: $color-white; + font-size: 3.4rem; + @include grid-media-only('xs') { font-size: 3.2rem; } - - font-size: 3.4rem; } - } .global-footer__content { - @include grid-media('xl') { - padding-left: 52px; + @include grid-media-only('sm') { + text-align: center; } @include grid-media('md') { - padding-left: 45px; + padding-left: 3rem; } - @include grid-media-only('sm') { - text-align: center; + @include grid-media('lg') { + padding-left: 4.5rem; + } + + @include grid-media('xl') { + padding-left: 5.2rem; } flex-grow: 1; @@ -75,56 +74,37 @@ // Grid settings for footer nav region; passing 0 for no outer gutters. nav { + @include margin(null null 1rem); display: flex; flex: 0 0 auto; justify-content: center; @include grid-media('sm') { display: block; - justify-content: left; - @include margin(null null .75rem); - } - @include grid-media('md') { - @include margin(0); + @include margin(null null 1.3rem); } } .global-footer__menu { - @include margin(0 0 1.5rem); + @include margin(0 0 1rem); @include padding(0); list-style-type: none; - @include grid-media-max('sm') { - @include padding(null 20px); - } - - @include grid-media('sm') { - @include margin(0 0 0.5rem); - } - - @include grid-media('md') { - @include margin(null null 0); - } - li { @include margin(0); - @include padding(0); @include padding(.25em 0); display: block; - @include grid-media-only('sm') { - @include margin(null 1rem null null); + @include grid-media('sm') { + @include margin(null 1.3rem null null); display: inline-block; - font-size: 0.9em; + line-height: 1.1; } @include grid-media('md') { - @include margin(null 1rem null null); - @include padding(0 0 1em); + @include padding(0); text-align: left; - display: inline-block; - line-height: 0; } @include grid-media('lg') { @@ -132,37 +112,53 @@ } &:last-child { - @include margin(null 0); + @include margin(null 0 null null); } } } .global-footer__menu--global { - font-size: 1.75rem; - font-weight: normal; + font-size: 1.5rem; - @include grid-media('md') { - font-size: 1.85rem; + @include grid-media-only('xs') { + @include padding(null 2rem null null); } + @include grid-media-between('md', 'xl') { + font-size: 1.7rem; + } + + @include grid-media('2xl') { + font-size: 1.8rem; + } } .global-footer__menu--policy { - font-size: 1.6rem; + font-size: 1.5rem; + font-weight: 300; + + @include grid-media-only('xs') { + @include padding(null null null 2rem); + font-weight: 400; + } @include grid-media('sm') { - font-weight: 300; + font-size: 1.4rem; + } + + @include grid-media-between('md', 'lg') { + font-size: 1.5rem; } + @include grid-media('xl') { + font-size: 1.6rem; + } } .global-footer__copyright { - font-size: 1.6rem; + font-size: 1.4rem; font-weight: 300; - line-height: 1.5; text-align: center; - -ms-grid-row: 2; - -ms-grid-column: 1; span { white-space: nowrap; diff --git a/core/scss/utilities/mixins/link/_link.scss b/core/scss/utilities/mixins/link/_link.scss index 368401b03..4a86dd44a 100644 --- a/core/scss/utilities/mixins/link/_link.scss +++ b/core/scss/utilities/mixins/link/_link.scss @@ -18,9 +18,4 @@ &:active { color: $hover; } - - &:focus { - // See: http://www.outlinenone.com/ - outline: 0; - } }