diff --git a/src/data/image_styles.yml b/src/data/image_styles.yml index 42b942902..a15f6c298 100644 --- a/src/data/image_styles.yml +++ b/src/data/image_styles.yml @@ -249,3 +249,12 @@ image_styles: - 336x598 - 416x740 sizes: '(max-width: 416px) 100vw, 416px' + + journey_banner: + title: Banner image on homepage + ratio: '24:5' + srcset: + - 512x107 + - 736x154 + - 1136x237 + - 1376x287 diff --git a/src/images/campaign-logo-bottom.svg b/src/images/campaign-logo-bottom.svg new file mode 100644 index 000000000..f3987c884 --- /dev/null +++ b/src/images/campaign-logo-bottom.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/campaign-logo-top.svg b/src/images/campaign-logo-top.svg new file mode 100644 index 000000000..e68eb13a8 --- /dev/null +++ b/src/images/campaign-logo-top.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/scss/components/_banner.scss b/src/scss/components/_banner.scss new file mode 100644 index 000000000..ddb265917 --- /dev/null +++ b/src/scss/components/_banner.scss @@ -0,0 +1,122 @@ +.banner { + background-color: $navy-dark; + padding: $spacing-3; + + @include breakpoint(sm) { + padding: $spacing-4 $spacing-3; + } + + @include breakpoint(lg) { + padding: $spacing-5; + } + + figure { + position: relative; + // max-width: 1376px; + max-width: fit-content; + + img { + min-height: 250px; + object-fit: cover; + max-width: fit-content; + width: 100%; + height: 100%; + } + } + + .banner__top-line, + .banner__bottom-line { + position: absolute; + display: block; + width: percentage(12/12); + + @include breakpoint(sm) { + width: percentage(9/12); + } + } + + .banner__top-line { + border-top: $spacing-1 solid $blue; + } + + .banner__bottom-line { + bottom: 0; + right: 0; + border-top: 1px solid #a7c504; + } + + .banner__content { + position: absolute; + top: 0; + right: 0; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + margin-right: $spacing-3; + + @include breakpoint(sm) { + margin-right: $spacing-4; + } + + @include breakpoint(xl) { + margin-right: $spacing-5; + } +} + + .banner__campaign-logo { + display: flex; + flex-direction: column; + margin-top: -$spacing-1; + + @include breakpoint(md) { + margin-top: 0; + } + + svg { + fill: $white; + + &:first-child { + margin-left: -$spacing-5; + margin-bottom: $spacing-2; + + width: 200px; + + @include breakpoint(md) { + width: initial; + margin-left: rem(-144); + margin-bottom: $spacing-3; + } + } + + &:nth-child(2) { + width: 200px; + + @include breakpoint(md) { + width: initial; + } + } + } + } + + .banner__link { + position: absolute; + bottom: 0; + right: $spacing-3; + margin-bottom: $spacing-3; + color: $white; + font-size: $typescale-1; + font-weight: $font-weight-semibold; + letter-spacing: $letter-spacing; + text-transform: uppercase; + + @include breakpoint(sm) { + margin-bottom: $spacing-4; + right: $spacing-4; + } + + @include breakpoint(xl) { + right: $spacing-5; + } + } +} diff --git a/src/scss/main.scss b/src/scss/main.scss index 5e5026248..f75bf8e2d 100755 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -28,6 +28,7 @@ @import 'components/app-header'; @import 'components/audio'; @import 'components/badge'; +@import 'components/banner'; @import 'components/box-menu'; @import 'components/breadcrumb'; @import 'components/button'; diff --git a/src/templates/midd-home.twig b/src/templates/midd-home.twig index e2e8e15f7..0f0fcbc92 100644 --- a/src/templates/midd-home.twig +++ b/src/templates/midd-home.twig @@ -105,6 +105,7 @@ background_light: true }%} {% include 'paragraphs/non-discrimination-policy.twig' %} + {% include 'paragraphs/banner.twig' %} {% include 'partials/midd-footer.twig' with { journey: true }%} diff --git a/src/templates/paragraphs/banner.twig b/src/templates/paragraphs/banner.twig new file mode 100644 index 000000000..128bfad61 --- /dev/null +++ b/src/templates/paragraphs/banner.twig @@ -0,0 +1,19 @@ + \ No newline at end of file diff --git a/src/templates/partials/campaign-logo.twig b/src/templates/partials/campaign-logo.twig new file mode 100644 index 000000000..8d347ff74 --- /dev/null +++ b/src/templates/partials/campaign-logo.twig @@ -0,0 +1,44 @@ + +Top half of logo for Middlebury Campaign + + + + + + + + + + + + + + + + +Bottom half of logo for Middlebury Campaign + + + + + + + + + + + + + + + + + + + + + + + + +