diff --git a/src/patterns/01-core/elements/_inline-elements.scss b/src/patterns/01-core/elements/_inline-elements.scss
index 23c49b445c38abf59abe2f5405621cbdb23b53de..edebf0fdd7962a1355fc2a8e98995a64f2b984c5 100644
--- a/src/patterns/01-core/elements/_inline-elements.scss
+++ b/src/patterns/01-core/elements/_inline-elements.scss
@@ -5,6 +5,7 @@
:where(a) {
background-color: transparent;
+ cursor: pointer;
transition-duration: 200ms;
transition-property: background-color, border-color, color, outline-color, text-decoration-color;
transition-timing-function: var(--ease-in-out-2);
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 6c31e6978802936e804727898a59fcd4082072ac..10ac81900f2527d268193abd2a82160bafddb2b7 100644
--- a/src/patterns/01-core/props/_fonts.scss
+++ b/src/patterns/01-core/props/_fonts.scss
@@ -36,6 +36,7 @@
--font-size-000000: 8.88px;
--font-size-00000: 9.984px;
--font-size-0000: 11.232px;
+ --font-size-min: 12px;
--font-size-000: 12.64px;
--font-size-00: 14.22224px;
--font-size-0: 16px;
@@ -45,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 f516baf75f70882ed59dc3d06394562ea5615f74..f925aeb747f2a8e9efeecd28f212ae0657d30391 100644
--- a/src/patterns/01-core/props/_sizes.scss
+++ b/src/patterns/01-core/props/_sizes.scss
@@ -15,9 +15,11 @@
--size-4: 2rem; // 32px lg
--size-405: 2.125rem;
--size-5: 2.5rem; // 40px
+ --size-505: 2.75rem; // 44px
--size-6: 3rem; // 48px
--size-7: 3.5rem; // 56px xl
--size-8: 4rem; // 64px
+ --size-805: 4.1875rem; // 67px
--size-9: 4.5rem; // 72px
--size-10: 5rem; // 80px
--size-11: 5.5rem; // 88px
diff --git a/src/patterns/03-layouts/footer/_footer.scss b/src/patterns/03-layouts/footer/_footer.scss
index ee137dae8190c8d45a1a11881f833a8c21944c9b..8c853a4e5f27952fcbf82a2a228b21b7b20b4c4e 100644
--- a/src/patterns/03-layouts/footer/_footer.scss
+++ b/src/patterns/03-layouts/footer/_footer.scss
@@ -4,37 +4,25 @@
@use '../../01-core' as *;
.uw-footer {
- background-color: #000;
+ color: var(--uw-white);
+ background-color: var(--uw-black);
padding: 0;
width: 100%;
- &__wrapper {
- @include uw-contained-width();
- padding: var(--size-2);
- text-size-adjust: none;
- @media(min-width: $screen-sm) {
- display: grid;
- grid-template-columns: 50% 50%;
- }
- @media(min-width: $screen-md) {
- grid-template-columns: 12.25rem auto 12rem;
- }
- @media(min-width: $screen-lg) {
- grid-template-columns: 25% auto 17rem;
- }
- @media(min-width: $screen-xl) {
- padding: var(--size-2) 0;
- }
- }
&__address {
- font-family: var(--font-systemmedium);
- font-size: var(--font-size-00);
- -webkit-font-smoothing: antialiased;
grid-column: 1 / 3;
grid-row: 1 / 2;
margin-left: auto;
margin-right: auto;
padding: var(--size-1) 0 var(--size-4);
text-align: center;
+ * {
+ font-family: var(--font-sans);
+ font-size: var(--font-size-00);
+ font-weight: var(--font-weight-100) !important;
+ letter-spacing: var(--font-letterspacing-1);
+ color: var(--uw-white);
+ background-color: var(--uw-black);
+ }
@media(min-width: $screen-md) {
font-size: var(--font-size-000);
grid-column: 1 / 2;
@@ -47,21 +35,159 @@
font-size: var(--font-size-00);
}
}
- &__menu {
- -webkit-font-smoothing: antialiased;
+ &__bottom {
+ 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;
+ }
+ }
+ }
+ &__marketing {
+ margin: var(--size-3) auto 0 auto;
grid-column: 1 / 3;
- padding-bottom: var(--size-1);
+ max-width: 15rem;
+ width: 80%;
+ @media(min-width: $screen-md) {
+ grid-column: 1 / 4;
+ }
+ @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-305) * -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: center;
+ 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%;
+ 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;
}
@media(min-width: $screen-md) {
- grid-column: 2 / 3;
+ grid-column: 2 / 4;
grid-row: 1 / 2;
}
}
&__social {
- grid-column: 1 / 3;
+ grid-column: 1 / 2;
grid-row: 3 / 4;
margin: 0 auto;
text-align: center;
@@ -72,9 +198,8 @@
}
@media(min-width: $screen-md) {
grid-column: 3 / 4;
- grid-row: 1 / 2;
+ grid-row: 2 / 3;
margin: 0;
- padding-left: var(--size-1);
text-align: left;
}
}
@@ -83,15 +208,19 @@
@media(min-width: $screen-md) {
text-align: right;
}
-
+ @media(min-width: $screen-lg) {
+ text-align: left;
+ }
a {
- font-family: var(--font-system);
- font-size: var(--font-size-000);
+ font-family: var(--font-sans);
+ font-size: var(--font-size-00);
+ font-weight: var(--font-weight-100) !important;
+ letter-spacing: var(--font-letterspacing-1);
text-decoration: none;
- }
-
- a:hover {
- text-decoration: underline;
+ &:hover,
+ &:focus{
+ text-decoration: underline;
+ }
}
}
&__territorial {
@@ -101,10 +230,38 @@
a:hover {
text-decoration: underline;
}
- grid-column: 1 / 4;
- grid-row: 4 / 5;
+ grid-column: 1 / 2;
+ @media(min-width: $screen-sm) {
+ grid-column: 1 / 3;
+ }
@media(min-width: $screen-md) {
- grid-row: 3 / 4;
+ 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) {
+ 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.twig b/src/patterns/03-layouts/footer/footer.twig
index 98bff682dfc2510e7edd4b4adc765b9d7332b13c..7159bcf659cf981c3f4c22b084bbce7e0aac2e50 100644
--- a/src/patterns/03-layouts/footer/footer.twig
+++ b/src/patterns/03-layouts/footer/footer.twig
@@ -1,46 +1,62 @@
-<footer class="uw-footer"{% if branding_level == 'full' %} role="contentinfo"{% endif %}>
- <div class="uw-site-footer__block">
- {% block content %}
- {% include "@layouts/site-footer/site-footer.twig" with {
- body: "The standard Lorem Ipsum passage, used since the 1500s<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
- site_name: "Faculty of Environment",
- logo_link: "https://uwaterloo.ca/environment",
- logo_url: "/images/uwaterloo-logo.svg",
- logo_alt_text: "Faculty of Environment",
- social_media: sf_social_media,
- facebook: "https://www.facebook.com/University.Waterloo"
- } %}
- {% endblock %}
- </div>
- {% if pattern_lab %}
- {% set faculty = faculty ? faculty : 'org-default' %}
- {% set branding_level = branding_level ? branding_level : 'full' %}
- {% endif %}
- <div class="uw-footer__wrapper" lang="en">
- {% if branding_level == 'full'%}
+{% if pattern_lab %}
+ {% set faculty = faculty ? faculty : 'org-default' %}
+ {% set branding_level = branding_level ? branding_level : 'full' %}
+{% endif %}
+<footer class="uw-footer{% if pattern_lab %} {{ faculty }}{% endif %}"{% if branding_level == 'full' %} role="contentinfo"{% endif %}>
+ <div class="uw-site-footer__block">
+ {% block content %}
+ {% include "@layouts/site-footer/site-footer.twig" with {
+ body: "The standard Lorem Ipsum passage, used since the 1500s<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+ site_name: "Faculty of Environment",
+ logo_link: "https://uwaterloo.ca/environment",
+ logo_url: "/images/uwaterloo-logo.svg",
+ logo_alt_text: "Faculty of Environment",
+ social_media: sf_social_media,
+ facebook: "https://www.facebook.com/University.Waterloo"
+ } %}
+ {% endblock %}
+ </div>
+ <div class="uw-footer__wrapper" lang="en">
+ {% if branding_level == 'full'%}
<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__menu">
- {% include "@components/menu/menu--footer/menu--footer.twig" with {
- 'items': footer_menu
- } %}
+ </div>
+ <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>
- <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>
- <div class="uw-footer__territorial">
- {% include "@components/territorial-statement/territorial-statement.twig" with {
- "modifier_classes": modifier_classes
- } %}
- </div>
- {% endif %}
- </div>
+ </div>
+ <div class="uw-footer__bottom">
+ ©{{ 'now' | date('Y') }} All rights reserved
+ </div>
+ {% endif %}
+ </div>
</footer>
diff --git a/src/patterns/03-layouts/footer/footer.yml b/src/patterns/03-layouts/footer/footer.yml
index 141e27ee16110d7040515028a7401a9e4a93cd2a..415065cdc41aa1b19786395ba1dfc521b88f8a95 100644
--- a/src/patterns/03-layouts/footer/footer.yml
+++ b/src/patterns/03-layouts/footer/footer.yml
@@ -13,7 +13,7 @@ footer_menu:
attributes:
class: ''
in_active_trail: false
- - title: 'Watsafe'
+ - title: 'WatSAFE'
url: 'https://uwaterloo.ca/watsafe/'
original_link:
options:
@@ -66,8 +66,6 @@ social_media:
menu_tree:
- text: "Instagram"
url: "https://www.instagram.com/uofwaterloo/"
- - text: "Tiktok"
- url: "https://www.tiktok.com"
- text: "Twitter"
url: "https://twitter.com/uWaterloo"
- text: "LinkedIn"
diff --git a/src/patterns/03-layouts/footer/stuff.html b/src/patterns/03-layouts/footer/stuff.html
new file mode 100644
index 0000000000000000000000000000000000000000..1d0574bb91a1c237b11f188e24d4cfb25f95d04c
--- /dev/null
+++ b/src/patterns/03-layouts/footer/stuff.html
@@ -0,0 +1,260 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Title</title>
+</head>
+<body>
+<div class="uw-ff--with-bubbles__gold">
+ <h2 class="black uw-ff--fact"><a id="a" name="a"></a>University of Waterloo</h2>
+</div>
+<h3>University of Waterloo</h3>
+<ul>
+ <li><a href="https://www.facebook.com/university.waterloo">on Facebook</a></li>
+ <li><a href="https://instagram.com/uofwaterloo/">on Instagram @UofWaterloo</a></li>
+ <li><a href="https://www.linkedin.com/school/uwaterloo">on LinkedIn</a></li>
+ <li><a href="https://twitter.com/uWaterloo">on X @uWaterloo</a></li>
+ <li><a href="https://www.youtube.com/uwaterloo">YouTube channel</a></li>
+</ul>
+<p> </p>
+<h3>News</h3>
+<ul>
+ <li><a href="https://twitter.com/uwdailybulletin">Daily Bulletin @uwdailybulletin</a></li>
+</ul>
+<p> </p>
+<h3>Stratford School of Interaction Design and Business</h3>
+<ul>
+ <li><a href="https://twitter.com/uwstratford">on X @uwstratford</a></li>
+ <li><a href="https://www.facebook.com/uwstratford">on Facebook</a></li>
+ <li><a href="https://www.youtube.com/user/UWStratford">YouTube channel</a></li>
+ <li><a href="https://instagram.com/uwstratford/">on Instagram @UWStratford</a></li>
+</ul>
+<p> </p>
+<div class="uw-ff--with-bubbles__gold">
+ <h2 class="black uw-ff--fact"><a id="a" name="a"></a>Offices & Services</h2>
+</div>
+<h3>Academic Integrity Office</h3>
+<ul>
+ <li><a href="https://www.youtube.com/playlist?list=PL8762B473D4E8CE7E">YouTube playlist</a></li>
+</ul>
+<p> </p>
+<h3>Alumni Relations</h3>
+<ul>
+ <li><a href="https://www.facebook.com/uwaterlooalumni">on Facebook</a></li>
+ <li><a href="https://www.instagram.com/uwaterlooalumni/">on Instagram @uwaterlooalumni</a></li>
+ <li><a href="https://twitter.com/uwaterlooalumni">on X @uwaterlooalumni</a></li>
+ <li><a href="https://www.linkedin.com/showcase/uwaterlooalumni/">LinkedIn Alumni Page</a></li>
+ <li><a href="https://www.linkedin.com/groups/36346/">LinkedIn Alumni Group</a></li>
+ <li><a href="https://www.buzzsprout.com/2037227">Podcast</a></li>
+ <li><a href="https://www.youtube.com/channel/UCEr0Pi6IKHnY1Fe9GxP393A">UWaterloo Alumni and Friends YouTube channel</a></li>
+</ul>
+<p> </p>
+<h3>Art Gallery</h3>
+<ul>
+ <li><a href="https://www.facebook.com/uwag.waterloo">on Facebook</a></li>
+ <li><a href="https://www.instagram.com/uwartgallery/">on Instagram</a></li>
+</ul>
+<p> </p>
+<h3>Athletics and Recreation</h3>
+<ul>
+ <li><a href="https://www.facebook.com/waterloowarriors">on Facebook</a></li>
+ <li><a href="https://www.instagram.com/wloowarriors">on Instagram @wloowarriors</a></li>
+ <li><a href="https://twitter.com/WlooWarriors">on X @WlooWarriors</a></li>
+ <li><a href="https://www.instagram.com/wloorec">Waterloo Recreation Instagram</a></li>
+ <li><a href="https://athletics.uwaterloo.ca/sports/2014/10/6/Social_Media.aspx">Varsity teams social media</a></li>
+</ul>
+<p> </p>
+<h3>Campus Housing</h3>
+<ul>
+ <li><a href="https://twitter.com/UWHousing">on X @UWHousing</a></li>
+ <li><a href="https://www.instagram.com/uwhousing/">on Instagram @UWHousing</a></li>
+ <li><a href="https://www.youtube.com/user/WaterlooResidences">Youtube channel</a></li>
+ <li><a href="https://www.facebook.com/uwhousing">on Facebook</a></li>
+ <li><a href="https://www.instagram.com/clvhousing">CLV Housing Community on Instagram</a></li>
+</ul>
+<p> </p>
+<h3>Campus Response Team</h3>
+<ul>
+ <li><a href="https://www.facebook.com/uwcrt">on Facebook</a></li>
+</ul>
+<p> </p>
+<h3>Campus Wellness</h3>
+<ul>
+ <li><a href="https://www.facebook.com/UWaterlooWellness/">on Facebook</a></li>
+ <li><a href="https://twitter.com/UW_Wellness">on X @UW_Wellness</a></li>
+</ul>
+<p> </p>
+<h3>Centre for Career Development</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Centre for Extended Learning</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Centre for Teaching Excellence</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Co-operative Education and Experiential Education</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>EDGE</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Faculty Association</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Food Services</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Graduate Student Association</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Graduate Studies and Postdoctoral Affairs</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Human Resources</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Indigenous Relations</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Information Systems & Technology</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>International Student Office</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Master of Public Service</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Off Campus Dons</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Parking Services</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Plant Operations</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Print + Retail Solutions</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Research, Office of</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Staff Association</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Student Success Office</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Sustainability Office</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>The Women's Centre</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Waterloo Indigenous Student Centre</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Waterloo International</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Work-Learn Institute</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Writing and Communication Centre</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+<p> </p>
+<h3>Velocity</h3>
+<ul>
+ <li></li>
+ <li></li>
+</ul>
+
+
+
+<p class="align-right"><a href="#top">Back to top ⇧</a></p>
+
+</body>
+</html>
diff --git a/src/patterns/03-layouts/layout/_layout.scss b/src/patterns/03-layouts/layout/_layout.scss
index af4c279db58b4cd6b16dde014caaef2bbdfbfab5..6c5d9bc4e67590963703995c872aef60c6b19005 100644
--- a/src/patterns/03-layouts/layout/_layout.scss
+++ b/src/patterns/03-layouts/layout/_layout.scss
@@ -13,10 +13,6 @@
padding-top: 0;
}
-/* Only apply bottom padding to the last section when there's a background or a separator. */
-.card__content section.layout:last-child:not(.uw-section__background-color,.uw-section__background-image,.uw-section-separator--bottom,.uw-section-separator--narrow) {
- padding-bottom: 0;
-}
@media(min-width: $screen-md) {
.card__content section.layout:last-child.uw-section-separator--narrow {
padding-bottom: unset;
diff --git a/src/patterns/03-layouts/site-container/_site-container.scss b/src/patterns/03-layouts/site-container/_site-container.scss
index 6ae509108beaf72a4c0be78c079d165fa66d0086..1abdf2db00f4fe66a291f9a6ccae2eb016c61ffb 100644
--- a/src/patterns/03-layouts/site-container/_site-container.scss
+++ b/src/patterns/03-layouts/site-container/_site-container.scss
@@ -60,21 +60,6 @@
position: relative;
// Puts the footer at z-index 2
z-index: var(--layer-footer);
- .menu--item{
- a{
- color: #fff;
- }
- }
- .uw-footer__social-directory{
- a{
- color: #fff;
- }
- }
- .uw-footer__territorial{
- a{
- color: var(--uw-gold);
- }
- }
}
}
diff --git a/src/patterns/03-layouts/site-container/site-container.yml b/src/patterns/03-layouts/site-container/site-container.yml
index 23b314e311e9587dd938efde349c97ac23232355..24bffc1a812e60a7b6a694d81c96548a08b4edb4 100644
--- a/src/patterns/03-layouts/site-container/site-container.yml
+++ b/src/patterns/03-layouts/site-container/site-container.yml
@@ -67,7 +67,7 @@ footer_menu:
attributes:
class: ''
in_active_trail: false
- - title: 'Watsafe'
+ - title: 'WatSAFE'
url: 'https://uwaterloo.ca/watsafe/'
original_link:
options:
diff --git a/src/patterns/04-components/card/_card.scss b/src/patterns/04-components/card/_card.scss
index cb11aa55c764aca329fa4c71753fa0de5a222e5e..63d7ede023eab50b2e25a7b10f5c3a095f449835 100644
--- a/src/patterns/04-components/card/_card.scss
+++ b/src/patterns/04-components/card/_card.scss
@@ -142,7 +142,9 @@ $card-padding: var(--size-2) !default;
}
.card__content {
- margin-bottom: var(--size-4);
+ .card__teaser & {
+ margin-bottom: var(--size-4);
+ }
width: 100%;
.card__node--expand-collapse-group &{
margin-bottom: 0;
diff --git a/src/patterns/04-components/contact-info/_contact-info.scss b/src/patterns/04-components/contact-info/_contact-info.scss
index 0aeaa034bf551975863c68dca11481faf18027dd..ed57a2fb00eb7213a8f3582389259695c46a3af2 100644
--- a/src/patterns/04-components/contact-info/_contact-info.scss
+++ b/src/patterns/04-components/contact-info/_contact-info.scss
@@ -1,13 +1,45 @@
.uw-footer-address {
+ background-color: var(--uw-black);
color: var(--uw-white);
-
- .uw-footer-phone {
- a {
- color: var(--uw-gold);
- text-decoration: none;
- }
- a:hover {
- text-decoration: underline;
+ .uw-footer-address--show {
+ display: grid;
+ column-gap: var(--size-05);
+ grid-template-columns: var(--size-3) auto;
+ font-family: var(--font-sans);
+ letter-spacing: var(--font-letterspacing-1);
+ place-content: center;
+ margin: 0 auto;
+ max-width: 14rem;
+ .uw-icon {
+ display: inline;
+ align-items: center;
+ grid-row: 1 / 2;
+ grid-column: 1 / 2;
+ svg{
+ fill: var(--neutral-3);
+ }
+ }
+ .uw-icon-link {
+ grid-row: 1 / 4;
+ }
+ .uw-footer-address__street {
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
+ }
+ .uw-footer-address__region {
+ grid-column: 2 / 3;
+ grid-row: 2 / 3;
+ }
+ .uw-footer-phone {
+ grid-column: 2 / 3;
+ grid-row: 3 / 4;
+ 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
index 5cf32dc0d2505274be3864aed11ec33153432096..fce7e38e77b3d56d8453b42d5400af59918ad578 100644
--- a/src/patterns/04-components/contact-info/contact-info.twig
+++ b/src/patterns/04-components/contact-info/contact-info.twig
@@ -9,16 +9,22 @@
<div property="v:longitude">-80.544205</div>
</div>
</div>
- <div rel="v:adr">
- <div property="v:street-address">200 University Avenue West</div>
- <div>
+ <div class="uw-footer-address--show" rel="v:adr">
+ {% include '@components/icon/icon--button/icon--button.twig' with {
+ 'url': 'https://uwaterloo.ca/map/',
+ 'text': 'Campus map',
+ 'name': 'pin',
+ 'is_hidden': true,
+ } %}
+ <div class="uw-footer-address__street" property="v:street-address">200 University Avenue West</div>
+ <div class="uw-footer-address__region">
<span property="v:locality">Waterloo</span>,
<span property="v:region">ON</span>,
- <span property="v:country-name">Canada</span>
+ <span property="v:country-name">Canada</span>
<span property="v:postal-code">N2L 3G1</span>
</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>
- <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
+</div>
diff --git a/src/patterns/04-components/links/_links.scss b/src/patterns/04-components/links/_links.scss
index 6886819e0b9215905cbab11c28e03cdc4e053ff7..f68004acbf5b25c4b6e28a3cfbdb8adcb6b0efdd 100644
--- a/src/patterns/04-components/links/_links.scss
+++ b/src/patterns/04-components/links/_links.scss
@@ -63,7 +63,7 @@
var(--uw-black)
);
}
- .card__title a{
+ .card__title a {
@include link-reverse(
var(--uw-black),
var(--uw-black)
@@ -87,33 +87,34 @@
);
}
}
- .menu--uw-footer li a{
+ .menu--uw-footer li a {
@include link-reverse(
var(--uw-white),
var(--uw-gold)
);
}
.uw-site-footer__content a,
- .uw-site-footer__title a{
+ .uw-site-footer__title a {
@include link(
var(--uw-white),
var(--uw-white)
);
}
- .uw-site-footer__content table a{
+ .uw-site-footer__content table a {
@include link(
var(--uw-black),
var(--uw-black)
);
}
- //.uw-site-footer__social-media a {
- // @include link(
- // var(--uw-gray),
- // var(--uw-gray)
- // );
- //}
- .uw-footer__social-directory a{
- @include link-reverse(
+ .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),
var(--uw-white)
);
@@ -126,27 +127,27 @@
.ui-dialog-content a,
.messages--status a,
.uw-content-moderation a,
- .view-interact a{
+ .view-interact a {
@include link-no-underline(
var(--uw-black),
var(--uw-black)
);
text-shadow: none;
}
- .toolbar-tray a{
+ .toolbar-tray a {
@include link-reverse(
var(--uw-black),
var(--uw-black)
);
}
.uw-footer-phone a,
- .uw-territorial a{
- @include link-reverse(
+ .uw-territorial a {
+ @include link(
var(--uw-gold),
var(--uw-gold)
);
}
- .tabs a{
+ .tabs a {
@include link-no-underline(
var(--uw-black),
var(--uw-black)
@@ -183,9 +184,6 @@
var(--gray-5)
);
}
- //&.pager__link {
- // color: var(--uw-black);
- //}
&.uw-site-name__link {
@include link-reverse(
var(--uw-black),
@@ -200,8 +198,6 @@
}
}
// Reset to white.
- //[class^="uw-section__background--"] a,
- //[class^="uw-section__text-color--white"] a
.uw-section__background--org-default-b a,
.uw-section__background--org-ahs a,
.uw-section__background--org-eng a,
@@ -266,25 +262,32 @@
);
}
}
- .uw-details{
- &:hover{
- .uw-contact__h2 a{
+ .uw-details {
+ &:hover {
+ .uw-contact__h2 a {
color: var(--uw-black);
}
}
}
- .uw-contact__h2 a{
+ .uw-contact__h2 a {
@include link-reverse(
var(--#{$colour}-primary),
var(--uw-black)
);
}
- .menu--uw-footer li a{
+ .menu--uw-footer li a {
@include link-reverse(
var(--uw-white),
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(
@@ -292,21 +295,16 @@
var(--uw-white)
);
}
- .uw-site-footer__content table a{
+ .uw-site-footer__content table a {
@include link(
var(--uw-black),
var(--uw-black)
);
}
- .uw-footer__social-directory a{
- @include link-reverse(
- var(--uw-gold),
- var(--uw-white)
- );
- }
+ .uw-footer__social-directory a,
.uw-footer-phone a,
.uw-territorial a{
- @include link-reverse(
+ @include link(
var(--uw-gold),
var(--uw-gold)
);
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 c348690540991591211bbdd9c9784757283efd52..b9b000c460772eec686e5cc319f86f8f66cea87e 100644
--- a/src/patterns/04-components/menu/menu--footer/_menu--footer.scss
+++ b/src/patterns/04-components/menu/menu--footer/_menu--footer.scss
@@ -12,17 +12,14 @@
list-style-type: none;
margin-left: 0 !important;
padding-bottom: var(--size-2);
- text-align: center;
- text-transform: uppercase;
-
li {
- border-color: var(--gray-6);
+ border-color: var(--neutral-3);
border-style: solid;
box-sizing: inherit;
display: inline-block;
flex: 1 0 50%;
margin: 0;
- padding: 1rem;
+ padding: var(--size-2);
text-align: center;
&:nth-child(1) {
border-width: var(--size-xs) 0 0 var(--size-xs);
@@ -78,33 +75,33 @@
&: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) {
+ border-width: 0 !important;
flex: 1 0 33%;
- padding: 0 0.125rem 0 var(--size-105);
- &:nth-child(1),
- &:nth-child(4),
- &:nth-child(7){
- border-width: 0 var(--size-xs);
- }
+ padding: 0 var(--size-sm) var(--size-1) var(--size-105);
+ text-align: right;
+ }
+ @media(min-width: $screen-lg) {
+ text-align: left;
}
a {
- color: var(--uw-white);
display: block;
- font-family: var(--font-condensedbook);
+ font-family: var(--font-sans);
font-size: var(--font-size-00);
- font-weight: 300;
+ font-weight: var(--font-weight-100);
+ letter-spacing: var(--font-letterspacing-1);
line-height: 1.5;
outline: none;
text-decoration: none;
- &:hover,
- &:focus {
- color: var(--uw-gold);
- text-decoration: underline;
+ a {
+ @include link (
+ var(--uw-white),
+ var(--uw-gold)
+ );
}
}
}
diff --git a/src/patterns/04-components/menu/menu--footer/menu--footer.yml b/src/patterns/04-components/menu/menu--footer/menu--footer.yml
index c596664683b5cb5a3c813e809e2cb3a7730b1e67..c6f5f8ef7da4db48174b01b05573cb19402f6341 100644
--- a/src/patterns/04-components/menu/menu--footer/menu--footer.yml
+++ b/src/patterns/04-components/menu/menu--footer/menu--footer.yml
@@ -15,7 +15,7 @@ items:
attributes:
class: ''
in_active_trail: false
- - title: 'Watsafe'
+ - title: 'WatSAFE'
url: 'https://uwaterloo.ca/watsafe/'
original_link:
options:
diff --git a/src/patterns/04-components/menu/menu--social/_menu--social.scss b/src/patterns/04-components/menu/menu--social/_menu--social.scss
index b549451c001d25e552c240eb9b95a7feb99b293e..73d5c2b96d0ba687a67abd3183a02c24911e1964 100644
--- a/src/patterns/04-components/menu/menu--social/_menu--social.scss
+++ b/src/patterns/04-components/menu/menu--social/_menu--social.scss
@@ -3,7 +3,7 @@
.social-media-list {
align-items: center;
display: inline-flex;
- gap: var(--size-1);
+ gap: var(--size-075);
justify-content: center;
list-style-type: none;
margin: 0 auto;
@@ -15,8 +15,12 @@
max-width: inherit;
}
@media(min-width: $screen-md) {
+ padding: var(--size-2) 0 0 0;
justify-content: flex-end;
}
+ @media(min-width: $screen-lg) {
+ justify-content: center;
+ }
li {
margin: 0;
padding: 0;
diff --git a/src/patterns/04-components/svg/icons/_facebook.svg.twig b/src/patterns/04-components/svg/icons/_facebook.svg.twig
index 3c5c6b1d26dda5024bccec02b3d9830d5c51516d..1dfdf983532aed4a44dedc24b6de20e958ed6cd7 100644
--- a/src/patterns/04-components/svg/icons/_facebook.svg.twig
+++ b/src/patterns/04-components/svg/icons/_facebook.svg.twig
@@ -1,5 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 40 30" style="enable-background:new 0 0 40 30;">
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="30" viewBox="0 0 40 30">
<title>Facebook</title>
<path d="M26.4,16l0.6-4.9h-4.9v-3c0-1.4,0.4-2.3,2.5-2.3h2.6V1.5c-0.5-0.1-2-0.2-3.8-0.2c-3.8,0-6.4,2.2-6.4,6.3v3.6h-4.3v4.9H17
v12.4h5.1V16H26.4L26.4,16z"/>
diff --git a/src/patterns/04-components/svg/icons/_instagram.svg.twig b/src/patterns/04-components/svg/icons/_instagram.svg.twig
index 1125c6f4b16bfb314f38c144f0c17fb3a905ea03..bde5e0d0629b4a9a72967cb87f1c8e62bacb4752 100644
--- a/src/patterns/04-components/svg/icons/_instagram.svg.twig
+++ b/src/patterns/04-components/svg/icons/_instagram.svg.twig
@@ -1,5 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 40 30" style="enable-background:new 0 0 40 30;">
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="30" viewBox="0 0 40 30">
<title>Instagram</title>
<path d="M14.3,1.2c-1.5,0.1-2.5,0.3-3.4,0.7C10,2.2,9.2,2.7,8.5,3.5C7.7,4.3,7.3,5.1,6.9,6C6.6,6.9,6.3,7.9,6.3,9.4
c-0.1,1.5-0.1,2-0.1,5.7c0,3.8,0,4.2,0.1,5.7s0.3,2.5,0.6,3.4c0.4,0.9,0.8,1.7,1.6,2.4c0.8,0.8,1.5,1.2,2.5,1.6
diff --git a/src/patterns/04-components/svg/icons/_linkedin.svg.twig b/src/patterns/04-components/svg/icons/_linkedin.svg.twig
index ca02254b8ab013226868e8160a980cf3b1bca9fc..c48c331e375500425436e7b838f0c013763b3fe1 100644
--- a/src/patterns/04-components/svg/icons/_linkedin.svg.twig
+++ b/src/patterns/04-components/svg/icons/_linkedin.svg.twig
@@ -1,6 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 40 30" style="enable-background:new 0 0 40 30;">
-<title>linkedin</title>
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="30" viewBox="0 0 40 30">
+<title>LinkedIn</title>
<path d="M12,29V10.1H5.7v18.8H12V29z M8.9,7.5c2.2,0,3.5-1.4,3.5-3.3S11.1,1,8.9,1C6.8,1,5.4,2.4,5.4,4.3S6.7,7.5,8.9,7.5L8.9,7.5
L8.9,7.5z M15.5,29h6.3V18.4c0-0.5,0-1.1,0.2-1.5c0.4-1.1,1.4-2.3,3.2-2.3c2.3,0,3.2,1.8,3.2,4.3V29h6.3V18.2c0-5.8-3.1-8.5-7.2-8.5
c-3.4,0-4.8,1.9-5.7,3.2l0,0V10h-6.3C15.5,11.8,15.5,29,15.5,29L15.5,29L15.5,29z"/>
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/icons/_pin.svg.twig b/src/patterns/04-components/svg/icons/_pin.svg.twig
new file mode 100644
index 0000000000000000000000000000000000000000..515d6863bfe98df918dce5ea8c4708ead8edf9e1
--- /dev/null
+++ b/src/patterns/04-components/svg/icons/_pin.svg.twig
@@ -0,0 +1,7 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+ <title>Campus map</title>
+ <g transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)">
+ <path d="M5.2,0.2C3,0.2,1.3,2,1.3,4.1c0,1,0.3,1.8,0.9,2.5l3,3.5l3-3.5C8.7,6,9.1,5.1,9.1,4.1C9.1,2,7.3,0.2,5.2,0.2z M5.2,5.6
+ C4.3,5.6,3.6,4.9,3.6,4s0.7-1.6,1.6-1.6S6.8,3.1,6.8,4S6.1,5.6,5.2,5.6z"/>
+ </g>
+</svg>
diff --git a/src/patterns/04-components/svg/icons/_tiktok.svg.twig b/src/patterns/04-components/svg/icons/_tiktok.svg.twig
index bb1a1566768b947d466afd00254f37587623cb2a..54616e6cb11967c3a1492f344f7ec36eedc26142 100644
--- a/src/patterns/04-components/svg/icons/_tiktok.svg.twig
+++ b/src/patterns/04-components/svg/icons/_tiktok.svg.twig
@@ -1,5 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 40 30" style="enable-background:new 0 0 40 30;">
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="30" viewBox="0 0 40 30">
<title>Tiktok</title>
<path d="M23.7,21.5c-0.1,2.1-1.9,3.9-4.1,3.9c-0.5,0-1-0.1-1.4-0.3c0.5,0.2,0.9,0.3,1.4,0.3C21.8,25.4,23.6,23.6,23.7,21.5V2.3h3.6
c0.3,1.8,1.5,3.4,3,4.4l0,0c1.1,0.7,2.4,1.1,3.7,1.1v1.1l0,0v3.7c-2.5,0-4.9-0.8-6.8-2.1v9.8c0,4.9-4.1,8.8-9,8.8
diff --git a/src/patterns/04-components/svg/icons/_youtube.svg.twig b/src/patterns/04-components/svg/icons/_youtube.svg.twig
index ffc15866443257a8945d8b515f1c1a75e3ce55dc..ccfd220c3ac746fca6ee4509102b685fcce16ec3 100644
--- a/src/patterns/04-components/svg/icons/_youtube.svg.twig
+++ b/src/patterns/04-components/svg/icons/_youtube.svg.twig
@@ -1,5 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 40 30" style="enable-background:new 0 0 40 30;">
+<svg xmlns="http://www.w3.org/2000/svg" width="40" height="30" viewBox="0 0 40 30">
<title>YouTube</title>
<path d="M39.1,5.4c-0.4-1.7-1.8-3.1-3.5-3.5C32.5,1,20,1,20,1S7.5,1,4.4,1.8c-1.7,0.5-3,1.9-3.5,3.6C0.1,8.5,0.1,15,0.1,15
s0,6.5,0.8,9.6c0.4,1.7,1.8,3.1,3.5,3.5C7.5,29,20,29,20,29s12.5,0,15.6-0.8c1.7-0.4,3.1-1.8,3.5-3.5c0.8-3.1,0.8-9.6,0.8-9.6
diff --git a/src/patterns/04-components/svg/svgs.yml b/src/patterns/04-components/svg/svgs.yml
index c7ed05016835c2c458296270ae478e09c0248bd6..f5bbb2bfd928ba449c7705f460ec8f80facedad7 100644
--- a/src/patterns/04-components/svg/svgs.yml
+++ b/src/patterns/04-components/svg/svgs.yml
@@ -53,8 +53,10 @@ svg_names:
- mobile-arrow-up-y
- mobile-close
- mobile-menu
+ - onit_check
- opera
- pencil
+ - pin
- play
- plus
- podcast
diff --git a/src/patterns/04-components/territorial-statement/_territorial-statement.scss b/src/patterns/04-components/territorial-statement/_territorial-statement.scss
index 883758d505d6079d20aec062d58594874cc1f0bc..4f9c54d68fccfdd70ff67e2eacf1691dcfd156b5 100644
--- a/src/patterns/04-components/territorial-statement/_territorial-statement.scss
+++ b/src/patterns/04-components/territorial-statement/_territorial-statement.scss
@@ -10,12 +10,11 @@
text-align: center;
p{
color: var(--uw-white);
- font-family: var(--font-system);
- font-size: var(--font-size-000);
+ font-family: var(--font-systemmedium);
+ font-size: var(--font-size-min);
font-weight: 200;
- letter-spacing: 0.5px;
line-height: 1.7;
- padding: var(--size-2) 0;
+ padding: var(--size-2) 0 0 0;
.uw-bg--black &{
color: var(--uw-white);
}