Skip to content

Commit

Permalink
Merge pull request #567 from middlebury/campaign-banner
Browse files Browse the repository at this point in the history
Campaign banner on Institutional Homepage
imcbride authored Nov 28, 2023
2 parents 7548337 + 99b139e commit b5cbd8a
Showing 8 changed files with 238 additions and 0 deletions.
9 changes: 9 additions & 0 deletions src/data/image_styles.yml
Original file line number Diff line number Diff line change
@@ -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
26 changes: 26 additions & 0 deletions src/images/campaign-logo-bottom.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions src/images/campaign-logo-top.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
122 changes: 122 additions & 0 deletions src/scss/components/_banner.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
1 change: 1 addition & 0 deletions src/scss/main.scss
Original file line number Diff line number Diff line change
@@ -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';
1 change: 1 addition & 0 deletions src/templates/midd-home.twig
Original file line number Diff line number Diff line change
@@ -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
}%}
19 changes: 19 additions & 0 deletions src/templates/paragraphs/banner.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<aside class="banner">
<figure class="container px-0">
<a href="#">
<span class="banner__top-line"></span>
{% include 'partials/img.twig' with {
name: 'journey_banner'
} %}
</a>
<a href="#" class="banner__content">
<div class="banner__campaign-logo">
{% include 'partials/campaign-logo.twig' %}
<span class="sr-only">For Every Future, the Campaign for Middlebury</span>
</div>
</a>
<a href="#" class="banner__link">Engage and Give »</a>
<span class="banner__bottom-line"></span>
<figcaption class="sr-only"></figcaption>
</figure>
</aside>
44 changes: 44 additions & 0 deletions src/templates/partials/campaign-logo.twig
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<svg width="293" height="25" viewBox="0 0 293 25" fill="none" aria-labelledby="campaign-logo-top" xmlns="http://www.w3.org/2000/svg" role="img">
<title id="campaign-logo-top">Top half of logo for Middlebury Campaign</title>
<path d="M1.63277 2.6655V11.8453H9.55476L9.79665 13.3206H1.63277V24.3184H0V1.19019H11.3916V2.6655H1.63277Z" />
<path d="M24.991 24.75C18.9739 24.75 14.582 19.7876 14.582 12.7835C14.582 5.77949 19.0419 0.75 25.0666 0.75C31.0912 0.75 35.4755 5.71243 35.4755 12.7165C35.4755 19.7205 31.0232 24.75 24.9985 24.75H24.991ZM24.991 2.18806C19.8205 2.18806 16.2828 6.54696 16.2828 12.7165C16.2828 18.886 19.8508 23.3119 25.059 23.3119C30.2673 23.3119 33.7671 18.953 33.7671 12.7835C33.7671 6.61402 30.1992 2.18806 24.991 2.18806Z" />
<path d="M54.1686 24.5494L46.3827 13.9539H42.7089V24.311H41.0762V1.19019H46.617C51.2054 1.19019 53.9947 3.60434 53.9947 7.42676C53.9947 11.0107 51.2735 13.1939 48.212 13.7602L55.8996 24.1843L54.1686 24.5494ZM46.5188 2.62825H42.7089V12.5531H46.0728C49.8826 12.5531 52.2939 10.6456 52.2939 7.49382C52.2939 4.342 50.321 2.6357 46.5112 2.6357L46.5188 2.62825Z" />
<path d="M65.2891 24.3184V1.19019H78.9258V4.93809H69.7414V10.4668H76.8168L77.429 14.1849H69.7414V20.5556H79.2659V24.311H65.2891V24.3184Z" />
<path d="M94.3685 24.4522H89.8103L81.2383 1.75614L85.9627 0.951416L92.252 18.685L98.3824 1.18985H103.107L94.3685 24.4522Z" />
<path d="M106.304 24.3184V1.19019H119.94V4.93809H110.756V10.4668H117.831L118.444 14.1849H110.756V20.5556H120.281V24.311H106.304V24.3184Z" />
<path d="M136.843 24.3408L130.417 15.4665H128.513V24.3184H124.022V1.19019H131.302C136.54 1.19019 139.7 3.63415 139.7 8.12716C139.7 11.51 137.863 13.6261 134.938 14.632L141.809 24.3184L136.843 24.3482V24.3408ZM130.962 4.73691H128.482V12.0837H130.758C133.547 12.0837 135.278 10.7798 135.278 8.3656C135.278 5.95144 133.781 4.74436 130.962 4.74436V4.73691Z" />
<path d="M153.912 15.4662V24.3181H149.391V15.5034L141.197 1.68907L145.891 0.951416L151.772 11.3755L157.487 1.1824H162.386L153.919 15.4587L153.912 15.4662Z" />
<path d="M177.482 6.81577V10.5339H183.196L184.149 16.1296H177.482V24.311H170.58V1.19019H185.411V6.82322H177.489L177.482 6.81577Z" />
<path d="M197.815 24.6537C192.07 24.6537 187.784 21.8074 187.784 14.9971V1.19019H194.754V15.1014C194.754 17.6497 195.94 18.9909 197.913 18.9909C200.022 18.9909 201.043 17.5826 201.043 15.1685V1.19019H208.012V14.9971C208.012 21.7329 203.492 24.6537 197.808 24.6537H197.815Z" />
<path d="M223.561 6.88283V24.3184H216.592V6.88283H210.303V1.19019H229.178L230.13 6.89028H223.569L223.561 6.88283Z" />
<path d="M242.029 24.6537C236.284 24.6537 231.998 21.8074 231.998 14.9971V1.19019H238.968V15.1014C238.968 17.6497 240.154 18.9909 242.127 18.9909C244.236 18.9909 245.257 17.5826 245.257 15.1685V1.19019H252.226V14.9971C252.226 21.7329 247.706 24.6537 242.021 24.6537H242.029Z" />
<path d="M267.813 24.3408L263.587 17.143H262.536V24.3184H255.635V1.19019H264.615C270.67 1.19019 274.14 3.83533 274.14 8.79776C274.14 11.9123 272.711 14.1253 270.058 15.4665L275.787 24.3408H267.82H267.813ZM263.859 6.18242H262.468V12.3817H263.897C266.142 12.3817 267.367 11.2417 267.367 9.20012C267.367 7.15852 266.112 6.18242 263.867 6.18242H263.859Z" />
<path d="M277.224 24.3184V1.19019H292.698V6.58478H284.028V9.90052H290.589L291.436 15.2281H284.02V18.9164H293V24.311H277.217L277.224 24.3184Z" />
</svg>
<svg width="287" height="13" viewBox="0 0 287 13" fill="none" aria-labelledby="campaign-logo-bottom" xmlns="http://www.w3.org/2000/svg" role="img">
<title id="campaign-logo-bottom">Bottom half of logo for Middlebury Campaign</title>
<path d="M5.12738 2.02336V12.5181H3.91397V2.02336H0V0.968262H8.94517L9.10054 2.02336H5.12738Z" />
<path d="M19.466 12.5244V6.99571H12.7183V12.5244H11.5049V0.974609H12.7183V5.96171H19.466V0.974609H20.6794V12.5244H19.466Z" />
<path d="M24.6523 12.5244V0.974609H30.9931V2.02971H25.8657V5.96171H29.9203L30.0979 7.00274H25.8731V11.4764H31.1781V12.5315H24.6597L24.6523 12.5244Z" />
<path d="M44.518 12.743C41.2255 12.743 39.0059 10.3303 39.0059 6.76407C39.0059 3.19783 41.2625 0.75 44.6068 0.75C45.9829 0.75 47.1076 1.13687 48.025 1.73476L47.8326 2.90944C46.8782 2.24121 45.8276 1.79103 44.592 1.79103C41.9136 1.79103 40.2563 3.80275 40.2563 6.7289C40.2563 9.65504 41.9284 11.6879 44.5698 11.6879C45.872 11.6879 47.0558 11.2025 48.0398 10.485L48.2174 11.5894C47.2999 12.2435 45.9607 12.743 44.518 12.743Z" />
<path d="M55.4462 0.904053H56.6966L61.454 12.3906L60.2554 12.6438L58.7091 8.78917H53.4041L51.9096 12.5242H50.6592L55.4462 0.904053ZM53.8259 7.76924H58.28L56.0455 2.24051L53.8259 7.76924Z" />
<path d="M76.3256 12.5244L75.5339 2.61353L71.324 12.5948H70.3547L66.1448 2.61353L65.3531 12.5244H64.2285L65.1978 0.974609H66.6923L70.8653 11.0543L75.0604 0.974609H76.5401L77.5094 12.5244H76.333H76.3256Z" />
<path d="M84.1169 7.64987H82.6001V12.5244H81.3867V0.974609H84.3832C86.8692 0.974609 88.3786 2.14929 88.3786 4.22432C88.3786 6.50333 86.6029 7.65691 84.1169 7.65691V7.64987ZM84.3092 1.9875H82.6001V6.62291H84.1687C86.0184 6.62291 87.143 5.8562 87.143 4.24542C87.143 2.75421 86.159 1.9875 84.3092 1.9875Z" />
<path d="M93.8017 0.904053H95.0521L99.8095 12.3906L98.6109 12.6438L97.0646 8.78917H91.7596L90.265 12.5242H89.0146L93.8017 0.904053ZM92.1813 7.76924H96.6354L94.401 2.24051L92.1813 7.76924Z" />
<path d="M102.77 12.5244V0.974609H103.983V12.5244H102.77Z" />
<path d="M113.135 12.743C109.539 12.743 107.431 10.2951 107.431 6.76407C107.431 3.233 109.636 0.75 113.032 0.75C114.526 0.75 115.688 1.13687 116.627 1.75586L116.413 2.94461C115.518 2.25527 114.408 1.79103 113.017 1.79103C110.301 1.79103 108.681 3.76758 108.681 6.75C108.681 9.73242 110.301 11.709 113.157 11.709C114.304 11.709 115.133 11.4417 115.939 10.9704V7.52374H113.017L112.839 6.46864H117.138V11.5753C116.013 12.2787 114.711 12.75 113.143 12.75L113.135 12.743Z" />
<path d="M129.124 12.5244L122.029 2.79642V12.5244H120.882V0.974609H122.029L128.917 10.4002V0.974609H130.064V12.5244H129.132H129.124Z" />
<path d="M140.481 2.02267V6.1446H144.395L144.573 7.18563H140.489V12.5244H139.275V0.974609H145.372V2.02971H140.496L140.481 2.02267Z" />
<path d="M153.03 12.743C149.789 12.743 147.569 10.2951 147.569 6.76407C147.569 3.233 149.826 0.75 153.067 0.75C156.307 0.75 158.542 3.19783 158.542 6.7289C158.542 10.26 156.307 12.743 153.03 12.743ZM153.044 1.79103C150.492 1.79103 148.82 3.80275 148.82 6.7289C148.82 9.65504 150.514 11.7019 153.067 11.7019C155.619 11.7019 157.291 9.69021 157.291 6.76407C157.291 3.83792 155.597 1.79103 153.044 1.79103Z" />
<path d="M168.648 12.6445L164.771 7.48863H163.166V12.532H161.952V0.982178H165.037C167.449 0.982178 168.944 2.17092 168.944 4.16154C168.944 5.95521 167.694 7.01031 166.11 7.34091L169.913 12.3984L168.648 12.6516V12.6445ZM164.971 1.99507H163.173V6.49683H164.756C166.569 6.49683 167.716 5.67386 167.716 4.21782C167.716 2.76178 166.784 1.98804 164.971 1.98804V1.99507Z" />
<path d="M189.743 12.5244L188.951 2.61353L184.741 12.5948H183.772L179.562 2.61353L178.77 12.5244H177.646L178.615 0.974609H180.109L184.282 11.0543L188.477 0.974609H189.957L190.926 12.5244H189.743Z" />
<path d="M194.633 12.5244V0.974609H195.846V12.5244H194.633Z" />
<path d="M203.12 12.5244H199.864V0.974609H203.172C207.219 0.974609 209.498 3.30286 209.498 6.73545C209.498 10.168 207.034 12.5315 203.12 12.5315V12.5244ZM203.186 2.00861H201.07V11.4834H203.186C206.272 11.4834 208.24 9.90778 208.24 6.74248C208.24 3.57719 206.212 2.00157 203.186 2.00157V2.00861Z" />
<path d="M216.104 12.5244H212.849V0.974609H216.163C220.21 0.974609 222.489 3.30286 222.489 6.73545C222.489 10.168 220.025 12.5315 216.112 12.5315L216.104 12.5244ZM216.171 2.00861H214.055V11.4834H216.171C219.256 11.4834 221.224 9.90778 221.224 6.74248C221.224 3.57719 219.197 2.00157 216.171 2.00157V2.00861Z" />
<path d="M225.826 12.5244V0.974609H227.04V11.4553H231.723L231.901 12.5244H225.826Z" />
<path d="M234.713 12.5244V0.974609H241.054V2.02971H235.926V5.96171H239.981L240.158 7.00274H235.934V11.4764H241.239V12.5315H234.72L234.713 12.5244Z" />
<path d="M247.608 12.5244H244.812V0.974609H247.63C250.131 0.974609 251.382 2.12819 251.382 3.85151C251.382 5.0895 250.642 5.94765 249.532 6.37672C250.975 6.76359 251.929 7.64987 251.929 9.19032C251.929 11.399 250.22 12.5244 247.616 12.5244H247.608ZM247.593 1.97344H246.01V5.98985H247.556C249.28 5.98985 250.183 5.10356 250.183 3.89372C250.183 2.68387 249.34 1.9664 247.593 1.9664V1.97344ZM247.645 6.94647H246.01V11.5186H247.719C249.569 11.5186 250.731 10.6956 250.731 9.26066C250.731 7.68504 249.547 6.94647 247.645 6.94647Z" />
<path d="M259.543 12.7073C256.687 12.7073 255 10.8996 255 8.20556V0.974609H256.213V8.05784C256.213 10.2032 257.323 11.6733 259.558 11.6733C261.792 11.6733 262.924 10.3158 262.924 8.12115V0.974609H264.138V8.12115C264.138 10.9207 262.391 12.7073 259.543 12.7073Z" />
<path d="M274.666 12.6445L270.789 7.48863H269.183V12.532H267.97V0.982178H271.055C273.467 0.982178 274.962 2.17092 274.962 4.16154C274.962 5.95521 273.711 7.01031 272.128 7.34091L275.931 12.3984L274.666 12.6516V12.6445ZM270.988 1.99507H269.191V6.49683H270.774C272.587 6.49683 273.733 5.67386 273.733 4.21782C273.733 2.76178 272.801 1.98804 270.988 1.98804V1.99507Z" />
<path d="M282.627 7.73423V12.5244H281.414V7.73423L277.115 1.0871L278.366 0.85498L282.05 6.70023L285.624 0.97456H287L282.635 7.74126L282.627 7.73423Z" />
</svg>

0 comments on commit b5cbd8a

Please sign in to comment.