diff --git a/src/patterns/01-core/props/_colors.scss b/src/patterns/01-core/props/_colors.scss
index 7cbcbdf122325a24e090e3b355c134ffd00a8796..ef3c72aaff954f9a7d728b12afa5015d1078af18 100644
--- a/src/patterns/01-core/props/_colors.scss
+++ b/src/patterns/01-core/props/_colors.scss
@@ -92,6 +92,7 @@
--uw-gold-3: #fdd54f;
--uw-gold-4: #e4b429;
--uw-gold-primary: #fdd54f;
+ --uw-gold-footer: #3f3a13;
--uw-white: #fff;
--uw-white-1: #fff;
--uw-white-primary: #fff;
diff --git a/src/patterns/01-core/props/_fonts.scss b/src/patterns/01-core/props/_fonts.scss
index 84a27e9a05ec89b7c48bb1d1bed18f835b923e61..10ac81900f2527d268193abd2a82160bafddb2b7 100644
--- a/src/patterns/01-core/props/_fonts.scss
+++ b/src/patterns/01-core/props/_fonts.scss
@@ -46,6 +46,7 @@
--font-size-4: 25.632px;
--font-size-5: 28.832px;
--font-size-55: 30px;
+ --font-size-57: 31px;
--font-size-6: 32.432px;
--font-size-7: 36.496px;
--font-size-8: 41.056px;
diff --git a/src/patterns/01-core/props/_sizes.scss b/src/patterns/01-core/props/_sizes.scss
index 3ed95110a4a0221635b44bd3cbcb1bd361a37d96..9bd5d3c9e4b8c8736b3749df06066d5b576a9ac1 100644
--- a/src/patterns/01-core/props/_sizes.scss
+++ b/src/patterns/01-core/props/_sizes.scss
@@ -15,6 +15,7 @@
--size-4: 2rem; // 32px lg
--size-405: 2.125rem;
--size-5: 2.5rem; // 40px
+ --size-505: 2.75rem; // 40px
--size-6: 3rem; // 48px
--size-7: 3.5rem; // 56px xl
--size-8: 4rem; // 64px
diff --git a/src/patterns/03-layouts/footer/_footer.scss b/src/patterns/03-layouts/footer/_footer.scss
index 4dd133fecd9aac132c185d64bc0ac974bafe987d..2a06fa4acf25c9e7c79dfba57d8edcf909ebc7b4 100644
--- a/src/patterns/03-layouts/footer/_footer.scss
+++ b/src/patterns/03-layouts/footer/_footer.scss
@@ -8,111 +8,6 @@
background-color: var(--uw-black);
padding: 0;
width: 100%;
- &__wrapper {
- @include uw-contained-width();
- background-color: var(--uw-black);
- color: var(--uw-white);
- padding: var(--size-805) var(--size-2) var(--size-2) var(--size-2);
- //text-size-adjust: none;
- @media(min-width: $screen-xl) {
- padding: var(--size-805) 0 var(--size-2) 0;
- }
- .uw-footer_info {
- @media(min-width: $screen-sm) {
- display: grid;
- row-gap: var(--size-5);
- grid-template-columns: 50% 50%;
- }
- @media(min-width: $screen-md) {
- column-gap: var(--size-10);
- grid-template-columns: 14rem auto 11rem;
- }
- }
- .uw-footer__marketing {
- margin: var(--size-6) 0 var(--size-3) 0;
- text-align: center;
- @media(min-width: $screen-md) {
- text-align: left;
- }
- @media(min-width: $screen-lg) {
- margin: 0;
- &::before {
- display: block;
- content: '';
- height: 70%;
- top: 7%;
- bottom: 0;
- transform: translate(calc(var(--size-305) * -1), 0);
- position: absolute;
- width: 1px;
- background-color: var(--neutral-3);
- }
- }
- a {
- @include link (
- var(--uw-white),
- var(--uw-gold)
- );
- background-color: var(uw-black);
- }
- grid-column: 2 / 3;
- }
- .uw-footer__bottom {
- //-webkit-font-smoothing: antialiased;
- display: grid;
- font-family: var(--font-system);
- font-size: var(--font-size-min);
- grid-column: 1 / 2;
- grid-template-columns: 100%;
- letter-spacing: 0.5px;
- line-height: 1.7;
- margin-top: var(--size-5);
- margin-bottom: var(--size-105);
- @media(min-width: $screen-md) {
- grid-template-columns: 50% 50%;
- }
- width: 100%;
- a {
- @include link-reverse(
- var(--uw-white),
- var(--uw-white)
- );
- background-color: var(--uw-black);
- }
- &--left {
- display: flex;
- justify-content: center;
- margin-bottom: var(--size-1);
- @media(min-width: $screen-md) {
- justify-content: flex-start;
- margin-bottom: 0;
- }
- }
- &--right {
- display: flex;
- justify-content: center;
- @media(min-width: $screen-md) {
- justify-content: flex-end;
- }
- }
- }
- &.uw-footer__wrapper--marketing {
- position: relative;
- column-gap: var(--size-7);
- @media(min-width: $screen-lg) {
- display: grid;
- column-gap: var(--size-7);
- grid-template-columns: auto 18rem;
- .uw-footer_info {
- column-gap: var(--size-5);
- row-gap: var(--size-5);
- }
- }
- .uw-footer__bottom {
- grid-column: 1 / 3;
- }
- }
- }
&__address {
grid-column: 1 / 3;
grid-row: 1 / 2;
@@ -140,9 +35,167 @@
font-size: var(--font-size-00);
}
}
- &__menu {
+ &__bottom {
//-webkit-font-smoothing: antialiased;
+ display: grid;
+ font-family: var(--font-system);
+ font-size: var(--font-size-min);
+ grid-column: 1 / 2;
+ letter-spacing: 0.5px;
+ line-height: 1.7;
+ margin-top: var(--size-5);
+ margin-bottom: var(--size-105);
+ text-align: center;
+ @media(min-width: $screen-sm) {
+ grid-column: 1 / 3;
+ }
+ @media(min-width: $screen-md) {
+ grid-column: 1 / 4;
+ }
+ @media(min-width: $screen-lg) {
+ grid-column: 1 / 5;
+ text-align: left;
+ }
+ width: 100%;
+ a {
+ @include link-reverse(
+ var(--uw-white),
+ var(--uw-white)
+ );
+ background-color: var(--uw-black);
+ }
+ &--left {
+ display: flex;
+ justify-content: center;
+ margin-bottom: var(--size-1);
+ @media(min-width: $screen-md) {
+ justify-content: flex-start;
+ margin-bottom: 0;
+ }
+ }
+ &--right {
+ display: flex;
+ justify-content: center;
+ @media(min-width: $screen-md) {
+ justify-content: flex-end;
+ }
+ }
+ }
+ //&__info {
+ // @media(min-width: $screen-sm) {
+ // display: grid;
+ // row-gap: var(--size-5);
+ // grid-template-columns: 50% 50%;
+ // }
+ // @media(min-width: $screen-md) {
+ // column-gap: var(--size-10);
+ // grid-template-columns: 14rem auto 11rem;
+ // }
+ // @media(min-width: $screen-lg) {
+ // column-gap: var(--size-7);
+ // row-gap: var(--size-5);
+ // }
+ //}
+ &__marketing {
+ margin: var(--size-3) auto 0 auto;
grid-column: 1 / 3;
+ max-width: 15rem;
+ width: 80%;
+ @media(min-width: $screen-md) {
+ grid-column: 2 / 3;
+ }
+ @media(min-width: $screen-lg) {
+ grid-column: 4 / 5;
+ grid-row: 1 / 3;
+ max-width: inherit;
+ margin: 0;
+ width: inherit;
+ &::before {
+ display: block;
+ content: '';
+ height: 65%;
+ top: 7%;
+ bottom: 0;
+ transform: translate(calc(var(--size-5) * -1), 0);
+ position: absolute;
+ width: 1px;
+ background-color: var(--neutral-3);
+ }
+ }
+ &--svg {
+ position: relative;
+ margin: 0 auto;
+ z-index: var(--layer-background);
+ .uw-icon {
+ position: absolute;
+ top: calc(var(--size-505) * -1);
+ right: 0;
+ height: inherit;
+ width: 97%;
+ svg {
+ fill: var(--uw-gold-footer);
+ height: inherit;
+ width: 100%;
+ }
+ }
+ @media(min-width: $screen-lg) {
+ margin: inherit;
+ max-width: inherit;
+ .uw-icon {
+ width: 97%;
+ right: 0;
+ }
+ }
+ }
+ &--text {
+ position: relative;
+ margin: 0 auto;
+ max-width: 15rem;
+ text-align: left;
+ z-index: var(--layer-content);
+ @media(min-width: $screen-lg) {
+ margin: inherit;
+ max-width: inherit;
+ }
+ span {
+ display: inline-block;
+ font-family: var(--font-condensedbook);
+ font-size: var(--font-size-6);
+ font-weight: var(--font-weight-100) !important;
+ letter-spacing: 0.5px;
+ line-height: var(--font-lineheight-1);
+ margin-bottom: var(--size-1);
+ }
+ a {
+ @include link (
+ var(--uw-white),
+ var(--uw-gold)
+ );
+ background-color: var(uw-black);
+ display: inline-block;
+ text-align: center;
+ width: 100%;
+ @media(min-width: $screen-lg) {
+ text-align: left;
+ }
+ i {
+ display: inline-block;
+ font-style: italic;
+ height: var(--size-3);
+ border-bottom: solid var(--size-sm) var(--uw-gold);
+ }
+ &:hover,
+ &:focus {
+ i {
+ border-bottom: solid var(--size-sm) transparent;
+ }
+ }
+ }
+ }
+ }
+ &__menu {
+ grid-column: 1 / 2;
+ grid-row: 2 / 3;
@media(min-width: $screen-sm) {
grid-column: 1 / 2;
grid-row: 2 / 3;
@@ -153,7 +206,7 @@
}
}
&__social {
- grid-column: 3 / 4;
+ grid-column: 1 / 2;
grid-row: 3 / 4;
margin: 0 auto;
text-align: center;
@@ -196,9 +249,39 @@
a:hover {
text-decoration: underline;
}
- grid-column: 1 / 3;
+ grid-column: 1 / 2;
+ @media(min-width: $screen-sm) {
+ grid-column: 1 / 3;
+ }
@media(min-width: $screen-md) {
grid-row: 2 / 3;
}
}
+ &__wrapper {
+ @include uw-contained-width();
+ background-color: var(--uw-black);
+ color: var(--uw-white);
+ display: grid;
+ row-gap: var(--size-405);
+ padding: var(--size-805) var(--size-2) var(--size-2) var(--size-2);
+ grid-template-columns: 100%;
+ position: relative;
+ @media(min-width: $screen-sm) {
+ grid-template-columns: 50% 50%;
+ }
+ @media(min-width: $screen-md) {
+ column-gap: var(--size-7);
+ grid-template-columns: 14rem auto 11rem;
+ }
+ @media(min-width: $screen-lg) {
+ column-gap: var(--size-10);
+ grid-template-columns: 14rem auto auto 15rem;
+ }
+ @media(min-width: $screen-xl) {
+ padding: var(--size-805) 0 var(--size-2) 0;
+ }
+ }
+}
+.text_uw-gold {
+ color: var(--uw-gold) !important;
}
diff --git a/src/patterns/03-layouts/footer/_footer_marketing.twig b/src/patterns/03-layouts/footer/_footer_marketing.twig
deleted file mode 100644
index 3d5b142f0fec5f4a2c05e8e6af68ee0c8f078e8c..0000000000000000000000000000000000000000
--- a/src/patterns/03-layouts/footer/_footer_marketing.twig
+++ /dev/null
@@ -1,11 +0,0 @@
-<p>
- <a href="https://uwaterloo.ca/support/give-to-waterloo">
- <img src="/profiles/uw_base_profile/modules/custom/uw_wcms_ohana/dist/images/you.jpg" alt ="Image of a you + waterloo campaign" width="180"/>
- </a>
-</p>
-<p>
- <i> Our Greatest impact happens together.</i>
- <br>
- <br>
- <a href="https://uwaterloo.ca/support/give-to-waterloo"> <i>Give to Waterloo →</i></a>
-</p>
diff --git a/src/patterns/03-layouts/footer/footer.twig b/src/patterns/03-layouts/footer/footer.twig
index 920d68eb0c656476d595b0d3b26128029631f73a..7159bcf659cf981c3f4c22b084bbce7e0aac2e50 100644
--- a/src/patterns/03-layouts/footer/footer.twig
+++ b/src/patterns/03-layouts/footer/footer.twig
@@ -1,4 +1,3 @@
-{% set marketing_block = 'true' %}
{% if pattern_lab %}
{% set faculty = faculty ? faculty : 'org-default' %}
{% set branding_level = branding_level ? branding_level : 'full' %}
@@ -17,42 +16,46 @@
} %}
{% endblock %}
</div>
- <div class="uw-footer__wrapper{% if marketing_block == 'true'%} uw-footer__wrapper--marketing{% endif %}" lang="en">
+ <div class="uw-footer__wrapper" lang="en">
{% if branding_level == 'full'%}
- <div class="uw-footer_info">
- <div class="uw-footer__address">
- {% include "@components/contact-info/contact-info.twig" %}
- </div>
- <div class="uw-footer__menu">
- {% include "@components/menu/menu--footer/menu--footer.twig" with {
- 'items': footer_menu
- } %}
- </div>
- <div class="uw-footer__territorial">
- {% include "@components/territorial-statement/territorial-statement.twig" with {
- "modifier_classes": modifier_classes
- } %}
- </div>
- <div class="uw-footer__social">
- {% include "@components/menu/menu--social/menu--social.twig" with {
- 'social_media': social_media,
- "social_media_placement": 'global-site-footer',
- } %}
- <div class="uw-footer__social-directory">
- <a href="https://uwaterloo.ca/social-media/">@uwaterloo social directory</a>
- </div>
+ <div class="uw-footer__address">
+ {% include "@components/contact-info/contact-info.twig" %}
+ </div>
+ <div class="uw-footer__menu">
+ {% include "@components/menu/menu--footer/menu--footer.twig" with {
+ 'items': footer_menu
+ } %}
+ </div>
+ <div class="uw-footer__territorial">
+ {% include "@components/territorial-statement/territorial-statement.twig" with {
+ "modifier_classes": modifier_classes
+ } %}
+ </div>
+ <div class="uw-footer__social">
+ {% include "@components/menu/menu--social/menu--social.twig" with {
+ 'social_media': social_media,
+ "social_media_placement": 'global-site-footer',
+ } %}
+ <div class="uw-footer__social-directory">
+ <a href="https://uwaterloo.ca/social-media/">@uwaterloo social directory</a>
</div>
</div>
- {% if marketing_block == 'true' %}
- <div class="uw-footer__marketing">
- {% include "@layouts/footer/_footer_marketing.twig" %}
+ <div class="uw-footer__marketing">
+ <div class="uw-footer__marketing--svg">
+ {% include '@components/icon/icon.twig' with {
+ 'name': 'onit_check',
+ } %}
+ </div>
+ <div class="uw-footer__marketing--text">
+ <span>
+ WHERE THERE’S <br> A CHALLENGE,<br>WATERLOO IS<br><span class="text_uw-gold">ON IT</span>.
+ </span>
+ <br>
+ <a href="https://uwaterloo.ca/on-it"><i>Learn how → </i></a>
</div>
- {% endif %}
+ </div>
<div class="uw-footer__bottom">
- <div class="uw-footer__bottom--left">©{{ 'now' | date('Y') }} All rights reserved </div>
- <div class="uw-footer__bottom--right">
-{# <a href="https://uwaterloo.ca/privacy">Privacy Policy </a> <a href="#">Terms and Conditions </a> #}
- </div>
+ ©{{ 'now' | date('Y') }} All rights reserved
</div>
{% endif %}
</div>
diff --git a/src/patterns/04-components/links/_links.scss b/src/patterns/04-components/links/_links.scss
index 0c3a2c179bdc4e7c3593a607a08a4b33cef7eb8b..e72f981f513baf441c66269b328510dcbef61c69 100644
--- a/src/patterns/04-components/links/_links.scss
+++ b/src/patterns/04-components/links/_links.scss
@@ -112,6 +112,13 @@
// var(--uw-gray)
// );
//}
+ .uw-footer__marketing--text a {
+ @include link(
+ var(--uw-white),
+ var(--uw-gold)
+ );
+ //text-decoration-color: var(--uw-gold);
+ }
.uw-footer__social-directory a {
@include link(
var(--uw-gold),
@@ -285,6 +292,13 @@
var(--uw-gold)
);
}
+ .uw-footer__marketing--text a {
+ @include link(
+ var(--uw-white),
+ var(--uw-gold)
+ );
+ //text-decoration-color: var(--uw-gold);
+ }
.uw-site-footer__content a,
.uw-site-footer__title a{
@include link(
diff --git a/src/patterns/04-components/menu/menu--footer/_menu--footer.scss b/src/patterns/04-components/menu/menu--footer/_menu--footer.scss
index 9e679989a64d8425d6eab086d4a30dc5e25bea9e..b9b000c460772eec686e5cc319f86f8f66cea87e 100644
--- a/src/patterns/04-components/menu/menu--footer/_menu--footer.scss
+++ b/src/patterns/04-components/menu/menu--footer/_menu--footer.scss
@@ -86,9 +86,7 @@
text-align: right;
}
@media(min-width: $screen-lg) {
- .uw-footer__wrapper--marketing & {
- text-align: left;
- }
+ text-align: left;
}
a {
display: block;
diff --git a/src/patterns/04-components/svg/icons/_onit_check.svg.twig b/src/patterns/04-components/svg/icons/_onit_check.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..80903c739310b5172eb29bfe6ef0f8e993547177
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_onit_check.svg.twig
@@ -0,0 +1,6 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32px" height="23.6px" viewBox="0 0 32 23.6">
+ <title>On It Check</title>
+<g transform="translate(0 15.477)">
+ <path d="M11.3-3.5L0-10.1V1.6l11.3,6.5L32-3.8l0-11.7L11.3-3.5z"/>
+</g>
+</svg>
diff --git a/src/patterns/04-components/svg/svgs.yml b/src/patterns/04-components/svg/svgs.yml
index 2363101cc825e672a7747a128292c1914ce4f462..f5bbb2bfd928ba449c7705f460ec8f80facedad7 100644
--- a/src/patterns/04-components/svg/svgs.yml
+++ b/src/patterns/04-components/svg/svgs.yml
@@ -53,6 +53,7 @@ svg_names:
- mobile-arrow-up-y
- mobile-close
- mobile-menu
+ - onit_check
- opera
- pencil
- pin