diff --git a/frontend/stylesheets/components/_app-footer.scss b/frontend/stylesheets/components/_app-footer.scss index d3ef948d..4271e6e5 100644 --- a/frontend/stylesheets/components/_app-footer.scss +++ b/frontend/stylesheets/components/_app-footer.scss @@ -1,39 +1,3 @@ -.app-footer__mailing-list { - padding: 2rem; - - color: $white; - text-align: center; - - background-color: black; - - &__text { - padding: 0 2rem; - - @include media-breakpoint-up('md') { - padding: 0; - } - } - - .form-mailing-list { - @include media-breakpoint-up('md') { - @include make-col(6); - @include make-col-offset(3); - } - } - - .form-mailing-list .form__control { - font-size: map-get($font-sizes, 'xs'); - - @include media-breakpoint-up('sm') { - font-size: map-get($font-sizes, 'sm'); - } - - @include media-breakpoint-up('lg') { - font-size: map-get($font-sizes, 'lg'); - } - } -} - .app-footer__social-platform { padding-block: 1rem; text-align: center; @@ -53,15 +17,24 @@ .container { display: flex; - align-items: center; justify-content: space-between; + + @include media-breakpoint-up('sm') { + display: grid; + grid-template-columns: repeat(3, 1fr); + } } .app-footer__community { display: none; + text-align: center; @include media-breakpoint-up('sm') { display: initial; } } + + .app-footer__link { + text-align: right; + } } diff --git a/frontend/stylesheets/components/_app-hero.scss b/frontend/stylesheets/components/_app-hero.scss index 4aafeb8b..fce49e82 100644 --- a/frontend/stylesheets/components/_app-hero.scss +++ b/frontend/stylesheets/components/_app-hero.scss @@ -3,7 +3,7 @@ align-items: center; padding: 2rem 0; - background-color: $primary; + background-color: $black; &__heading { font-weight: 500; diff --git a/frontend/stylesheets/components/_app-navigation.scss b/frontend/stylesheets/components/_app-navigation.scss index e5aae1ac..9a49ee09 100644 --- a/frontend/stylesheets/components/_app-navigation.scss +++ b/frontend/stylesheets/components/_app-navigation.scss @@ -74,7 +74,7 @@ height: 75%; opacity: 0; - background-color: var(--color-brand-primary); + background-color: $black; border-radius: 1rem; transition: all variables.$base-animation-duration variables.$base-animation-timing; } diff --git a/frontend/stylesheets/components/_form-mailing-list.scss b/frontend/stylesheets/components/_form-mailing-list.scss index 6b7ccca0..bd4f055f 100644 --- a/frontend/stylesheets/components/_form-mailing-list.scss +++ b/frontend/stylesheets/components/_form-mailing-list.scss @@ -2,11 +2,21 @@ position: relative; .form__control { + font-size: map-get($font-sizes, 'xs'); + border-radius: var(--bs-border-radius-lg); + @include media-breakpoint-up('sm') { + font-size: map-get($font-sizes, 'sm'); + } + @include media-breakpoint-up('md') { padding-right: 155px; } + + @include media-breakpoint-up('lg') { + font-size: map-get($font-sizes, 'lg'); + } } .btn { diff --git a/frontend/stylesheets/layouts/_default.scss b/frontend/stylesheets/layouts/_default.scss index b62bb8a4..a5d8fb76 100755 --- a/frontend/stylesheets/layouts/_default.scss +++ b/frontend/stylesheets/layouts/_default.scss @@ -40,5 +40,29 @@ .app-hero ~ .app-content { padding-top: 0; - } + } + + .mailing-list { + padding: 2rem; + + color: $white; + text-align: center; + + background-color: black; + + &__text { + padding: 0 2rem; + + @include media-breakpoint-up('md') { + padding: 0; + } + } + + .form-mailing-list { + @include media-breakpoint-up('md') { + @include make-col(6); + @include make-col-offset(3); + } + } + } } diff --git a/frontend/stylesheets/screens/_home.scss b/frontend/stylesheets/screens/_home.scss index 6c04e488..fa9ab82b 100644 --- a/frontend/stylesheets/screens/_home.scss +++ b/frontend/stylesheets/screens/_home.scss @@ -1,15 +1,9 @@ body.home .app-hero { + + color: $primary; text-align: center; - background: { - image: url('/images/home/hero-background.png'); - repeat: no-repeat; - position: center; - } - - @include media-breakpoint-up('md') { - height: rem(460px); - } + background: $white; &__subheading { display: block; @@ -17,10 +11,18 @@ body.home .app-hero { text-transform: uppercase; } - .btn { - margin-top: 2rem; - font-size: map-get($font-sizes, 'lg'); - border-radius: var(--bs-border-radius-lg); + &__mailing-list { + width: 80%; + margin: 2rem auto 0; + + @include media-breakpoint-up('lg') { + width: 50%; + margin-top: 3rem; + } + } + + &__text { + color: $body-color; } } @@ -32,30 +34,11 @@ body.home .app-content { } } -body.home .speaker-lineup { - .list-speaker, - .btn { - margin-top: 1rem; - - @include media-breakpoint-up('sm') { - margin-top: 2rem; - } - } -} - body.home .sponsors { .list-sponsor { justify-content: center; padding-left: 0; - - &--silver,&--speaker { - .list-sponsor__company { - @include media-breakpoint-up('sm') { - @include make-col(3); - } - } - } @include media-breakpoint-up('sm') { margin-inline: auto; @@ -63,14 +46,16 @@ body.home .sponsors { } &.list-sponsor--silver { - @include media-breakpoint-up('sm') { - width: 75% + @include media-breakpoint-up('md') { + width: 85% } } - &.list-sponsor--speaker { + .btn { + width: 80%; + @include media-breakpoint-up('sm') { - width: 60% + width: auto; } } } diff --git a/src/_components/footer.liquid b/src/_components/footer.liquid index 906bcf2b..3a95347b 100644 --- a/src/_components/footer.liquid +++ b/src/_components/footer.liquid @@ -1,12 +1,4 @@