Skip to content
Snippets Groups Projects
Commit 8baa005d authored by Martin Leblanc's avatar Martin Leblanc Committed by Kevin Paxman
Browse files

ISTWCMS-6584: Removed un-needed outter grid as well as add the approved marketing block

parent c6943e26
No related branches found
No related tags found
1 merge request!146Feature/istwcms 6584 m26lebla update global footer
Hide whitespace changes
Inline Side-by-side
Showing
with 251 additions and 154 deletions
src/patterns/01-core/props/_colors.scss
+ 1
− 0
View file @ 8baa005d
......@@ -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;
......
src/patterns/01-core/props/_fonts.scss
+ 1
− 0
View file @ 8baa005d
......@@ -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;
......
src/patterns/01-core/props/_sizes.scss
+ 1
− 0
View file @ 8baa005d
......@@ -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
......
src/patterns/03-layouts/footer/_footer.scss
+ 191
− 108
View file @ 8baa005d
......@@ -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;
}
src/patterns/03-layouts/footer/_footer_marketing.twig deleted 100644 → 0
+ 0
− 11
View file @ c6943e26
<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 &nbsp; &rarr;</i></a>
</p>
src/patterns/03-layouts/footer/footer.twig
+ 35
− 32
View file @ 8baa005d
{% 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&rsquo;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 &nbsp; &rarr; </i></a>
</div>
{% endif %}
</div>
<div class="uw-footer__bottom">
<div class="uw-footer__bottom--left">&copy;{{ 'now' | date('Y') }} All rights reserved </div>
<div class="uw-footer__bottom--right">
{# <a href="https://uwaterloo.ca/privacy">Privacy Policy </a>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <a href="#">Terms and Conditions </a> #}
</div>
&copy;{{ 'now' | date('Y') }} All rights reserved
</div>
{% endif %}
</div>
......
src/patterns/04-components/links/_links.scss
+ 14
− 0
View file @ 8baa005d
......@@ -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(
......
src/patterns/04-components/menu/menu--footer/_menu--footer.scss
+ 1
− 3
View file @ 8baa005d
......@@ -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;
......
src/patterns/04-components/svg/icons/_onit_check.svg.twig 0 → 100644
+ 6
− 0
View file @ 8baa005d
<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>
src/patterns/04-components/svg/svgs.yml
+ 1
− 0
View file @ 8baa005d
......@@ -53,6 +53,7 @@ svg_names:
- mobile-arrow-up-y
- mobile-close
- mobile-menu
- onit_check
- opera
- pencil
- pin
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment