diff --git a/source/_patterns/01-global/00-colors/_color_vars.scss b/source/_patterns/01-global/00-colors/_color_vars.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5b2d53214211b013d1db5cb522a93687953bab31
--- /dev/null
+++ b/source/_patterns/01-global/00-colors/_color_vars.scss
@@ -0,0 +1,18 @@
+$white: #fff;
+$near-white: #f2f2f2;
+$gray-lightest: #e5e5e5;
+$gray-lighter: #ccc;
+$gray-light: #999;
+$gray: #666;
+$gray-dark: #4c4c4c;
+$gray-darker: #333;
+$black: #000;
+$uw-black: #000;
+$uw-gold: #fdd54f;
+$uw-white: #fff;
+$uw-grey: #787878;
+$uw-main-menu-hover: #dfdfdf;
+$uw-main-menu-border: #eee;
+$uw-main-menu-active: #eee;
+$uw-main-menu-active-border: #4e4e4e;
+$uw-local-site-footer-background-color: #757575;
diff --git a/source/_patterns/03-layouts/footer/_footer.scss b/source/_patterns/03-layouts/footer/_footer.scss
index a21e21480961c47a721963adb5e99f1e6c0c16d1..a750b28fd454f170cd521945e54e60c5fcfcac45 100644
--- a/source/_patterns/03-layouts/footer/_footer.scss
+++ b/source/_patterns/03-layouts/footer/_footer.scss
@@ -16,17 +16,80 @@
max-width: 63rem;
padding: 1rem;
+ @include medium {
+ grid-template-columns: 60% 40%;
+ grid-template-rows: auto auto;
+ }
+
@include large {
grid-template-columns: 25% auto 30%;
grid-template-rows: auto;
}
+ }
+
+ &__address {
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ margin-left: auto;
+ margin-right: auto;
+ padding-bottom: 1rem;
+
+ @include medium {
+ grid-column: 1 / 3;
+ grid-row: 1 / 2;
+ }
- .uw-footer-address {
+ @include large {
grid-column: 1 / 2;
grid-row: 1 / 2;
- margin-left: auto;
- margin-right: auto;
- padding-bottom: 1rem;
+ }
+ }
+
+ &__menu {
+ grid-column: 1 / 2;
+ grid-row: 2 / 3;
+
+ @include medium {
+ grid-column: 1 / 2;
+ grid-row: 2 / 3;
+ }
+
+ @include large {
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
+ }
+ }
+
+ &__social {
+ grid-column: 1 / 2;
+ grid-row: 3 / 4;
+
+ @include medium {
+ grid-column: 2 / 3;
+ grid-row: 2 / 3;
+ }
+
+ @include large {
+ grid-column: 3 / 4;
+ grid-row: 1 / 2;
+ }
+ }
+
+ &__social-directory {
+ text-align: center;
+
+ @include medium {
+ text-align: right;
+ }
+
+ a {
+ color: #fff;
+ text-decoration: none;
+ }
+
+ a:hover {
+ color: #fdd54f;
+ text-decoration: underline;
}
}
}
diff --git a/source/_patterns/03-layouts/footer/footer.twig b/source/_patterns/03-layouts/footer/footer.twig
index f848ba82d13bc6e538dd0c0a98314604fd26edf5..362cc5e53c1cd127ceb8dbaf0cd5dfe302eb69d4 100644
--- a/source/_patterns/03-layouts/footer/footer.twig
+++ b/source/_patterns/03-layouts/footer/footer.twig
@@ -3,8 +3,18 @@
<div class="uw-footer__address">
{% include "@components/contact-info/contact-info.twig" %}
</div>
- {% block content %}
- I AM THE FOOTER
- {% endblock %}
+ <div class="uw-footer__menu">
+ {% block content %}
+ {% include "@components/menu/menu--footer/menu--footer.twig" with {
+ 'items': items
+ } %}
+ {% endblock %}
+ </div>
+ <div class="uw-footer__social">
+ SOCIAL MEDIA
+ <div class="uw-footer__social-directory">
+ <a href="https://uwaterloo.ca/social-media/">@uwaterloo social directory</a>
+ </div>
+ </div>
</div>
</footer>
\ No newline at end of file
diff --git a/source/_patterns/03-layouts/footer/footer.yml b/source/_patterns/03-layouts/footer/footer.yml
new file mode 100644
index 0000000000000000000000000000000000000000..7cbb4aaf474b4af99ebaef6d7748e3cf66a4f32b
--- /dev/null
+++ b/source/_patterns/03-layouts/footer/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: 'Media'
+ 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
\ No newline at end of file
diff --git a/source/_patterns/04-components/menu/menu--footer/_menu--footer.scss b/source/_patterns/04-components/menu/menu--footer/_menu--footer.scss
index d314158f21656d03a5282c276ca2d058155de38f..a87294c04494b7c3fb8cc2c4462d978914c93a07 100644
--- a/source/_patterns/04-components/menu/menu--footer/_menu--footer.scss
+++ b/source/_patterns/04-components/menu/menu--footer/_menu--footer.scss
@@ -1,6 +1,84 @@
// @file
// Styles for the footer menu.
-.menu--footer {
- @include list-inline;
-}
+.menu--uw-footer {
+ background-color: #000;
+ display: grid;
+ font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
+ font-size: 0.7rem;
+ grid-template-columns: auto auto auto;
+ grid-template-rows: auto auto auto;
+ letter-spacing: 0.045rem;
+ list-style-type: none;
+ padding-bottom: 1rem;
+ text-align: center;
+ text-transform: uppercase;
+
+ @include medium {
+ grid-template-columns: auto auto;
+ grid-template-rows: auto auto auto auto auto;
+ }
+
+ @include large {
+ font-size: 0.8rem;
+ grid-template-columns: auto auto auto;
+ grid-template-rows: auto auto auto;
+ }
+
+ @include xl {
+ font-size: 1rem;
+ }
+
+ li {
+ box-sizing: inherit;
+ display: inline-block;
+ margin: 0;
+ padding: 0 0.5rem;
+ }
+
+ li a {
+ color: #fff;
+ text-decoration: none;
+ }
+
+ li a:hover {
+ text-decoration: underline;
+ }
+
+ li:nth-child(3n+1) {
+ border: 0;
+
+ @include large {
+ border-left: 1px solid $uw-grey;
+ }
+ }
+
+ li:nth-child(n) {
+ border: 1px solid $uw-grey;
+ padding-left: 0.8rem;
+ text-align: center;
+
+ @include medium {
+ border: 0;
+ border-right: 1px solid $uw-grey;
+ text-align: left;
+ }
+ }
+
+ li:nth-child(1) {
+ grid-column: 1;
+ grid-row: 1;
+ }
+
+ li:nth-child(2) {
+ grid-column: 2;
+ grid-row: 1;
+ }
+
+ li:nth-child(3) {
+ @include large {
+ grid-column: 3;
+ grid-row: 1;
+ }
+ }
+}
\ No newline at end of file
diff --git a/source/_patterns/04-components/menu/menu--footer/menu--footer.yml b/source/_patterns/04-components/menu/menu--footer/menu--footer.yml
index b999dee3269445d9b2d426c2775ad36f76390bd4..7d4246cf1b50406e4d144a4a16291b0529355158 100644
--- a/source/_patterns/04-components/menu/menu--footer/menu--footer.yml
+++ b/source/_patterns/04-components/menu/menu--footer/menu--footer.yml
@@ -1,31 +1,66 @@
---
-menu_name: 'footer'
+menu_name: 'uw-footer'
items:
- - title: 'Footer Link 1'
- url: '#'
+ - title: 'Contact Waterloo'
+ url: 'https://uwaterloo.ca/about/contact-us'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- - title: 'Footer Link 2'
- url: '#'
+ - title: 'Maps & Directions'
+ url: 'https://uwaterloo.ca/map/'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- - title: 'Footer Link 3'
- url: '#'
+ - title: 'Watsafe'
+ url: 'https://uwaterloo.ca/watsafe/'
original_link:
options:
attributes:
class: ''
in_active_trail: false
- - title: 'Footer Link 4'
- url: '#'
+ - 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: 'Media'
+ 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
\ No newline at end of file