diff --git a/src/patterns/01-core/mixins/_uw-mixins.scss b/src/patterns/01-core/mixins/_uw-mixins.scss
index 3b1506b123c666eab5e4303f23863cb5ff7d2a22..14f979a60607c9de6028948a6f0f71710e3aa664 100644
--- a/src/patterns/01-core/mixins/_uw-mixins.scss
+++ b/src/patterns/01-core/mixins/_uw-mixins.scss
@@ -23,9 +23,9 @@ $test-color-12: var(--green-5);
margin-left: auto;
margin-right: auto;
max-width: $value;
- padding: 0 var(--size-1);
+ padding: 0 var(--size-2);
- @include xl{
+ @media(min-width: 75rem) {
padding-left: 0;
padding-right: 0;
}
@@ -39,7 +39,7 @@ $test-color-12: var(--green-5);
@mixin uw-full-width-padding {
max-width: 100%;
- padding: 0 var(--size-1);
+ padding: 0 var(--size-2);
width: 100%;
}
@@ -71,7 +71,7 @@ $test-color-12: var(--green-5);
max-width: inherit;
padding: inherit;
- @media(min-width: $screen-xl) {
+ @media(min-width: 75rem) {
padding-left:inherit;
padding-right:inherit;
}
@@ -324,7 +324,7 @@ $test-color-12: var(--green-5);
@include align-items(flex-start);
width: 100%;
- @media(min-width: $screen-md) {
+ @media(min-width: 48.06rem) {
@include flex(1 1 auto);
@include flex-grow(1);
width: 45%;
@@ -339,7 +339,7 @@ $test-color-12: var(--green-5);
}
}
- @media(min-width: $screen-lg) {
+ @media(min-width: 63.1875rem) {
width: 30%;
.uw-contained-width--wide &{
@@ -353,13 +353,13 @@ $test-color-12: var(--green-5);
align-self: flex-start;
width: 100%;
- @media(min-width: $screen-md) {
+ @media(min-width: 48.06rem) {
@include flex(1 1 auto);
@include flex-grow(1);
width: 45%;
}
- @media(min-width: $screen-lg) {
+ @media(min-width: 63.1875rem) {
//width: 30%;
}
}
diff --git a/src/patterns/03-layouts/footer/_footer.scss b/src/patterns/03-layouts/footer/_footer.scss
index 7524bf50c601df4679721c2efe2641ea0961a821..1377c404e720e4caf2423e418719b0f56423f0ef 100644
--- a/src/patterns/03-layouts/footer/_footer.scss
+++ b/src/patterns/03-layouts/footer/_footer.scss
@@ -8,7 +8,11 @@
padding: 0;
width: 100%;
&__wrapper {
- @include layout-constrain;
+ @include uw-contained-width();
+ padding: var(--size-2);
+ @media(min-width: $screen-xl) {
+ padding: var(--size-2) 0;
+ }
display: grid;
grid-template-columns: 100%;
padding-top: var(--size-1);
@@ -24,8 +28,8 @@
}
}
&__address {
- //font-family: gesso-font-family(systemmedium);
- //font-size: gesso-font-size(-1);
+ font-family: var(--font-systemmedium);
+ font-size: var(--font-size-00);
-webkit-font-smoothing: antialiased;
grid-column: 1 / 3;
grid-row: 1 / 2;
@@ -34,7 +38,7 @@
padding: var(--size-1) 0 var(--size-4);
text-align: center;
@media(min-width: $screen-md) {
- //font-size: gesso-font-size(-2);
+ font-size: var(--font-size-000);
grid-column: 1 / 2;
grid-row: 1 / 2;
margin: 0;
@@ -42,7 +46,7 @@
text-align: left;
}
@media(min-width: $screen-lg) {
- //font-size: gesso-font-size(-1);
+ font-size: var(--font-size-00);
}
}
@@ -61,7 +65,6 @@
}
&__social {
- //background:$test-color-2;
grid-column: 1 / 3;
grid-row: 3 / 4;
margin: 0 auto;
@@ -88,8 +91,8 @@
}
a {
- //font-family: gesso-font-family(system);
- //font-size: gesso-font-size(-2);
+ font-family: var(--font-system);
+ font-size: var(--font-size-000);
text-decoration: none;
}
diff --git a/src/patterns/03-layouts/footer/footer.twig b/src/patterns/03-layouts/footer/footer.twig
index bba7daf32358d0fb579f753d847df1b832e20b74..457d9f6ee3b0dd13c0e1c83c40c7066f83bbad52 100644
--- a/src/patterns/03-layouts/footer/footer.twig
+++ b/src/patterns/03-layouts/footer/footer.twig
@@ -14,19 +14,27 @@
<div class="uw-footer__wrapper">
{% if branding_level == 'full' %}
<div class="uw-footer__address">
- address
+ {% include "@components/contact-info/contact-info.twig" %}
</div>
<div class="uw-footer__menu">
- menu
+ {% include "@components/menu/menu--footer/menu--footer.twig" with {
+ 'items': footer_menu
+ } %}
</div>
<div class="uw-footer__social">
- 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>
<div class="uw-footer__territorial">
- territorial statement
+ {% include "@components/territorial-statement/territorial-statement.twig" with {
+ "modifier_classes": modifier_classes
+ } %}
</div>
{% endif %}
</div>
diff --git a/src/patterns/03-layouts/site-footer/site-footer.twig b/src/patterns/03-layouts/site-footer/site-footer.twig
index 4bd6fccd9a9310e6c2a4539080736f99be96555e..66489b4c340f0a820b879d650c1d2dccf8bfee00 100644
--- a/src/patterns/03-layouts/site-footer/site-footer.twig
+++ b/src/patterns/03-layouts/site-footer/site-footer.twig
@@ -22,6 +22,9 @@
</div>
<div class="uw-site-footer__content">
{{ body }}
+{# {% if is_demo_site_container %}#}
+{# {% include "@base/typography/typography.twig" %}#}
+{# {% endif %}#}
</div>
</div>
</div>
diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index 8f5bdd4260023fd1eb051eb0dae6dd143c32ca18..c1d6f31cec9d5855d6281c112d788a71856d1646 100644
--- a/src/patterns/04-components/_index.scss
+++ b/src/patterns/04-components/_index.scss
@@ -1,10 +1,13 @@
@forward 'blockquote/blockquote';
@forward 'button/button';
@forward 'card/card';
+@forward 'contact-info/contact-info';
@forward 'image/image';
@forward 'menu/menu';
+@forward 'menu/menu--footer/menu--footer';
@forward 'menu/menu--social/menu--social';
@forward 'social-media/social-media--icon/social-media--icon';
@forward 'svg/svg';
-@forward 'tag-list/tag-list';
@forward 'tag/tag';
+@forward 'tag-list/tag-list';
+@forward 'territorial-statement/territorial-statement';
diff --git a/src/patterns/04-components/contact-info/_contact-info.scss b/src/patterns/04-components/contact-info/_contact-info.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0aeaa034bf551975863c68dca11481faf18027dd
--- /dev/null
+++ b/src/patterns/04-components/contact-info/_contact-info.scss
@@ -0,0 +1,13 @@
+.uw-footer-address {
+ color: var(--uw-white);
+
+ .uw-footer-phone {
+ a {
+ color: var(--uw-gold);
+ text-decoration: none;
+ }
+ a:hover {
+ text-decoration: underline;
+ }
+ }
+}
diff --git a/src/patterns/04-components/contact-info/contact-info.twig b/src/patterns/04-components/contact-info/contact-info.twig
new file mode 100644
index 0000000000000000000000000000000000000000..5cf32dc0d2505274be3864aed11ec33153432096
--- /dev/null
+++ b/src/patterns/04-components/contact-info/contact-info.twig
@@ -0,0 +1,24 @@
+<div class="uw-footer-address" about="//uwaterloo.ca/" typeof="v:VCard">
+ <div class="hidden">
+ <div property="v:fn">University of Waterloo</div>
+ <div rel="v:org">
+ <div property="v:organisation-name">University of Waterloo</div>
+ </div>
+ <div rel="v:geo">
+ <div property="v:latitude">43.471468</div>
+ <div property="v:longitude">-80.544205</div>
+ </div>
+ </div>
+ <div rel="v:adr">
+ <div property="v:street-address">200 University Avenue West</div>
+ <div>
+ <span property="v:locality">Waterloo</span>,
+ <span property="v:region">ON</span>,
+ <span property="v:country-name">Canada</span>
+ <span property="v:postal-code">N2L 3G1</span>
+ </div>
+ </div>
+ <div class="uw-footer-phone" rel="v:tel">
+ <a href="tel:+1-519-888-4567" property="rdf:value">+1 519 888 4567</a>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/patterns/04-components/menu/menu--footer/_menu--footer.scss b/src/patterns/04-components/menu/menu--footer/_menu--footer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8c7456ad114d6d9d55c6ae4a1f711f2e5839d968
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--footer/_menu--footer.scss
@@ -0,0 +1,109 @@
+// @file
+// Styles for the footer menu
+
+@use '../../../01-core' as *;
+
+.menu--uw-footer {
+ align-items:flex-start;
+ display:flex;
+ flex-direction:row;
+ flex-wrap:wrap;
+ justify-content: flex-start;
+ list-style-type: none;
+ padding-bottom: var(--size-2);
+ text-align: center;
+ text-transform: uppercase;
+ li {
+ border-color: var(--gray-6);
+ border-style: solid;
+ box-sizing: inherit;
+ display: inline-block;
+ flex: 1 0 50%;
+ margin: 0;
+ padding: 1rem;
+ text-align: center;
+ &:nth-child(1) {
+ border-width: var(--size-xs) 0 0 var(--size-xs);
+ }
+ &:nth-child(2) {
+ border-width: var(--size-xs) var(--size-xs) 0;
+ }
+ &:nth-child(3) {
+ border-width: var(--size-xs) 0 0 var(--size-xs);
+ }
+ &:nth-child(4) {
+ border-width: var(--size-xs) var(--size-xs) 0;
+ }
+ &:nth-child(5) {
+ border-width: var(--size-xs) 0 0 var(--size-xs);
+ }
+ &:nth-child(6) {
+ border-width: var(--size-xs) var(--size-xs) 0;
+ }
+ &:nth-child(7) {
+ border-width: var(--size-xs) 0 0 var(--size-xs);
+ }
+ &:nth-child(8) {
+ border-width: var(--size-xs) var(--size-xs) 0;
+ }
+ &:nth-child(9) {
+ border-width: var(--size-xs);
+ }
+ @media(min-width: $screen-xs) {
+ padding: 0 0 0 var(--size-1);
+ text-align:left;
+ &:nth-child(1) {
+ border-width: 0 var(--size-xs) 0 0;
+ }
+ &:nth-child(2) {
+ border-width: 0 var(--size-xs) 0 0;
+ }
+ &:nth-child(3) {
+ border-width: 0 var(--size-xs) 0 0;
+ }
+ &:nth-child(4) {
+ border-width: 0 var(--size-xs) 0 0;
+ }
+ &:nth-child(5) {
+ border-width: 0 var(--size-xs) 0 0;
+ }
+ &:nth-child(6) {
+ border-width: 0 var(--size-xs) 0 0;
+ }
+ &:nth-child(7) {
+ border-width: 0 var(--size-xs) 0 0;
+ }
+ &:nth-child(8) {
+ border-width: 0 var(--size-xs) 0 0;
+ }
+
+ &:nth-child(9) {
+ border-width: 0 var(--size-xs) 0 0;
+ }
+ }
+ @media(min-width: $screen-md) {
+ flex: 1 0 33%;
+ padding: 0 0.25rem 0 var(--size-2);
+ &:nth-child(1),
+ &:nth-child(4),
+ &:nth-child(7){
+ border-width: 0 var(--size-xs);
+ }
+ }
+ a {
+ color: var(--uw-white);
+ display: block;
+ font-family: var(--font-condensedbook);
+ font-size: var(--font-size-00);
+ font-weight: 300;
+ line-height: 1.50;
+ outline: none;
+ text-decoration: none;
+ &:hover,
+ &:focus {
+ color: var(--uw-gold);
+ text-decoration: underline;
+ }
+ }
+ }
+}
diff --git a/src/patterns/04-components/menu/menu--footer/menu--footer.twig b/src/patterns/04-components/menu/menu--footer/menu--footer.twig
new file mode 100644
index 0000000000000000000000000000000000000000..0d457f9630efecf15d9e1340cb9719c41e26ff50
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--footer/menu--footer.twig
@@ -0,0 +1,4 @@
+{% include '@components/menu/menu.twig' with {
+ 'menu_name': 'uw-footer',
+ 'items': items
+} %}
diff --git a/src/patterns/04-components/menu/menu--footer/menu--footer.yml b/src/patterns/04-components/menu/menu--footer/menu--footer.yml
new file mode 100644
index 0000000000000000000000000000000000000000..c596664683b5cb5a3c813e809e2cb3a7730b1e67
--- /dev/null
+++ b/src/patterns/04-components/menu/menu--footer/menu--footer.yml
@@ -0,0 +1,66 @@
+---
+menu_name: 'uw-footer'
+items:
+ - title: 'Contact Waterloo'
+ url: 'https://uwaterloo.ca/about/contact-us'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Maps & Directions'
+ url: 'https://uwaterloo.ca/map/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Watsafe'
+ url: 'https://uwaterloo.ca/watsafe/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Accessibility'
+ url: 'https://uwaterloo.ca/human-resources/accessibility'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Privacy'
+ url: 'https://uwaterloo.ca/privacy/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Copyright'
+ url: 'https://uwaterloo.ca/copyright'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'News'
+ url: 'https://uwaterloo.ca/news/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Careers'
+ url: 'https://uwaterloo.ca/careers/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Careers'
+ url: 'https://uwaterloo.ca/about/contact-us/contact-form'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
diff --git a/src/patterns/04-components/territorial-statement/_territorial-statement.scss b/src/patterns/04-components/territorial-statement/_territorial-statement.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6f5dee1e24dbdddaeb20efda4154f66308dc9219
--- /dev/null
+++ b/src/patterns/04-components/territorial-statement/_territorial-statement.scss
@@ -0,0 +1,32 @@
+@use '../../01-core' as *;
+
+.uw-bg--black{
+ background-color:gesso-brand(org-default,uw-black,lvl4);
+}
+.uw-bg--white{
+ background-color:gesso-brand(org-default,uw-white,lvl1);
+}
+.uw-territorial{
+ text-align:center;
+ p{
+ color: var(--uw-white);
+ font-family: var(--font-system);
+ font-size: var(--font-size-000);
+ font-weight:200;
+ letter-spacing:0.5px;
+ line-height:1.7;
+ padding: var(--size-2) 0;
+ .uw-bg--black &{
+ color: var(--uw-white);
+ }
+ .uw-bg--white &{
+ color: var(--uw-black);
+ }
+ }
+ @media(min-width: $screen-md) {
+ text-align:left;
+ p{
+ line-height:1.5;
+ }
+ }
+}
diff --git a/src/patterns/04-components/territorial-statement/territorial-statement.twig b/src/patterns/04-components/territorial-statement/territorial-statement.twig
new file mode 100644
index 0000000000000000000000000000000000000000..56a8e6718f961704520827f001fe17975608eabe
--- /dev/null
+++ b/src/patterns/04-components/territorial-statement/territorial-statement.twig
@@ -0,0 +1,5 @@
+<div class="uw-bg--{{ modifier_classes }}">
+ <div class="uw-territorial">
+ <p>The University of Waterloo acknowledges that much of our work takes place on the traditional territory of the Neutral, Anishinaabeg and Haudenosaunee peoples. Our main campus is situated on the Haldimand Tract, the land granted to the Six Nations that includes six miles on each side of the Grand River. Our active work toward reconciliation takes place across our campuses through research, learning, teaching, and community building, and is centralized within our <a href="https://uwaterloo.ca/indigenous" >Office of Indigenous Relations</a>.</p>
+ </div>
+</div>
diff --git a/src/patterns/04-components/territorial-statement/territorial-statement.yml b/src/patterns/04-components/territorial-statement/territorial-statement.yml
new file mode 100644
index 0000000000000000000000000000000000000000..1690c39ea804ac580d7c3a2ca6fd8c4ac78dbf6f
--- /dev/null
+++ b/src/patterns/04-components/territorial-statement/territorial-statement.yml
@@ -0,0 +1,2 @@
+---
+modifier_classes: 'black'