diff --git a/public/images/icons/facebook.svg b/public/images/icons/facebook.svg index 710b5c98..92bc1cad 100644 --- a/public/images/icons/facebook.svg +++ b/public/images/icons/facebook.svg @@ -1,3 +1,3 @@ - + diff --git a/public/images/icons/instagram.svg b/public/images/icons/instagram.svg index eeeb98f2..bb5c71e0 100644 --- a/public/images/icons/instagram.svg +++ b/public/images/icons/instagram.svg @@ -1,3 +1,3 @@ - + diff --git a/public/images/icons/twitter.svg b/public/images/icons/twitter.svg index ee5623d3..13eda01f 100644 --- a/public/images/icons/twitter.svg +++ b/public/images/icons/twitter.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/app-root/app-root.scss b/src/components/app-root/app-root.scss index 8c426d75..97dc1753 100644 --- a/src/components/app-root/app-root.scss +++ b/src/components/app-root/app-root.scss @@ -166,48 +166,65 @@ } footer { - background: $blue; - border-top: 5px solid $red; - color: $white; - padding: 20px 0; + background: $light-red; + color: $red; + ui-main-content .container { + padding-top: 0; + } a:not(.button) { - color: $white; + color: $red; border-color: transparent; &:hover, &:active, &:focus { - color: darken($white, 10%); + color: darken($red, 10%); border-color: transparent; } } .disclaimer { - font-size: 14px; - font-style: italic; - border-bottom: 3px solid #fff; - padding-bottom: 50px; + font-size: 12px; + color: $gray4; } .footer-nav { - padding: 20px 0 40px 0; - display: flex; - flex-direction: column; - border-top: 3px solid $white; - @media ($tablet) { - flex-direction: row; + display: flex; + .right { + width: 30%; + } + .left { + width: 70%; + } } + padding: 20px 16px; + ul { + width: 100%; + display: flex; list-style-type: none; - padding: 0 40px 0 0; flex-grow: 1; + flex-direction: row; + justify-content: left; + padding: 0; + margin: 0; li { - font-size: 18px; - + &:before { + content: "|"; + padding-right: 6px; + font-weight: lighter; + opacity: 0.25; + } + &:first-child:before { + content: ""; + display: none; + } + padding-right: 6px; + font-size: 12px; a:not(.button) { text-decoration: none; border-color: transparent; @@ -217,11 +234,23 @@ footer { } } } + &.major { + margin-bottom: 30px; + li { + font-size: 16px; + } + } } .social { + margin: 30px 0; padding: 0; - text-align: left; + text-align: right; + + @media ($tablet) { + margin: 0; + justify-content: right; + } @media ($tablet) { text-align: right; @@ -229,11 +258,13 @@ footer { li { display: inline-block; - margin: 0 10px; - + margin: 0 4px; + &:before { + content: ""; + } .icon { - height: 40px; - width: 40px; + height: 32px; + width: 32px; } } } diff --git a/src/components/app-root/app-root.tsx b/src/components/app-root/app-root.tsx index c33885c2..8f814385 100644 --- a/src/components/app-root/app-root.tsx +++ b/src/components/app-root/app-root.tsx @@ -92,59 +92,63 @@ export class AppRoot { diff --git a/src/components/page-home/page-home.scss b/src/components/page-home/page-home.scss index 826b63c1..c7409fd2 100644 --- a/src/components/page-home/page-home.scss +++ b/src/components/page-home/page-home.scss @@ -210,6 +210,11 @@ page-home { } .donate { + display: none; + @media ($tablet) { + display: none; + } + .container { background: $light-red; display: flex; @@ -278,6 +283,11 @@ page-home { .container { background-color: $red; display: flex; + @media ($tablet) { + text-align: left; + } + flex-wrap: wrap; + text-align: center; align-items: center; justify-content: space-around; padding: 30px; @@ -285,13 +295,21 @@ page-home { h1 { text-transform: uppercase; margin: -4px 0 0 0; - font-size: 42px; + @media ($tablet) { + font-size: 42px; + } } - .newsletter-text { - width: 50%; + + form { + width: 84%; } + .newsletter-text, form { - width: 50%; + margin: 4px 0; + @media ($tablet) { + width: 50%; + margin: 0; + } } .email-signup-input { diff --git a/src/components/ui-main-content/ui-main-content.scss b/src/components/ui-main-content/ui-main-content.scss index 9f6185cf..74621183 100644 --- a/src/components/ui-main-content/ui-main-content.scss +++ b/src/components/ui-main-content/ui-main-content.scss @@ -23,7 +23,6 @@ ui-main-content { } .container { - max-width: 800px; padding: 30px 20px 0 20px; &.full-bleed { padding: 0; diff --git a/styles/include/_vars.scss b/styles/include/_vars.scss index cc8c9341..96fc3aca 100644 --- a/styles/include/_vars.scss +++ b/styles/include/_vars.scss @@ -49,6 +49,10 @@ $button-colors: ( $white, $red, ), + "light-red": ( + $red, + $light-red, + ), "yellow": ( $blue, $yellow,