From b67630eb89b9944619eda61d0fc37ac49e4e9a14 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Thu, 2 Jun 2022 14:53:35 -0400
Subject: [PATCH] ISTWCMS-5595:site container css intial blocks
---
src/patterns/01-core/props/_colors.scss | 3 +
src/patterns/01-core/props/_fonts.scss | 40 +-
src/patterns/01-core/props/_zindex.scss | 14 +
src/patterns/03-layouts/_index.scss | 12 +
src/patterns/03-layouts/content/_content.scss | 36 +
src/patterns/03-layouts/content/content.md | 12 +
src/patterns/03-layouts/content/content.twig | 10 +
src/patterns/03-layouts/footer/_footer.scss | 113 +++
src/patterns/03-layouts/footer/footer.md | 12 +
src/patterns/03-layouts/footer/footer.twig | 26 +
src/patterns/03-layouts/footer/footer.yml | 82 ++
src/patterns/03-layouts/header/_header.scss | 88 ++
src/patterns/03-layouts/header/header.md | 12 +
src/patterns/03-layouts/header/header.twig | 36 +
src/patterns/03-layouts/header/header.yml | 862 ++++++++++++++++
src/patterns/03-layouts/layout/_layout.scss | 1 -
.../region/{region.scss => _region.scss} | 0
.../site-container/_site-container.scss | 83 ++
.../site-container/site-container.md | 7 +
.../site-container/site-container.twig | 27 +
.../site-container/site-container.yml | 949 ++++++++++++++++++
.../03-layouts/site-footer/_site-footer.scss | 113 +++
.../03-layouts/site-footer/site-footer.twig | 26 +
.../03-layouts/site-footer/site-footer.yml | 22 +
.../04-components/color-bar/_color-bar.scss | 53 +
.../04-components/color-bar/color-bar.md | 7 +
.../04-components/color-bar/color-bar.twig | 14 +
.../04-components/color-bar/color-bar.yml | 1 +
src/patterns/global.scss | 4 +-
29 files changed, 2644 insertions(+), 21 deletions(-)
create mode 100644 src/patterns/03-layouts/_index.scss
create mode 100644 src/patterns/03-layouts/content/_content.scss
create mode 100644 src/patterns/03-layouts/content/content.md
create mode 100644 src/patterns/03-layouts/content/content.twig
create mode 100644 src/patterns/03-layouts/footer/_footer.scss
create mode 100644 src/patterns/03-layouts/footer/footer.md
create mode 100644 src/patterns/03-layouts/footer/footer.twig
create mode 100644 src/patterns/03-layouts/footer/footer.yml
create mode 100644 src/patterns/03-layouts/header/_header.scss
create mode 100644 src/patterns/03-layouts/header/header.md
create mode 100644 src/patterns/03-layouts/header/header.twig
create mode 100644 src/patterns/03-layouts/header/header.yml
rename src/patterns/03-layouts/region/{region.scss => _region.scss} (100%)
create mode 100644 src/patterns/03-layouts/site-container/_site-container.scss
create mode 100644 src/patterns/03-layouts/site-container/site-container.md
create mode 100644 src/patterns/03-layouts/site-container/site-container.twig
create mode 100644 src/patterns/03-layouts/site-container/site-container.yml
create mode 100644 src/patterns/03-layouts/site-footer/_site-footer.scss
create mode 100644 src/patterns/03-layouts/site-footer/site-footer.twig
create mode 100644 src/patterns/03-layouts/site-footer/site-footer.yml
create mode 100644 src/patterns/04-components/color-bar/_color-bar.scss
create mode 100644 src/patterns/04-components/color-bar/color-bar.md
create mode 100644 src/patterns/04-components/color-bar/color-bar.twig
create mode 100644 src/patterns/04-components/color-bar/color-bar.yml
diff --git a/src/patterns/01-core/props/_colors.scss b/src/patterns/01-core/props/_colors.scss
index e12344b2..bdbaa1b0 100644
--- a/src/patterns/01-core/props/_colors.scss
+++ b/src/patterns/01-core/props/_colors.scss
@@ -81,16 +81,19 @@
--ren-green: #01573e;
--ren-light: #92B7AC;
--ren-primary: #01573e;
+ --uw-black: #000;
--uw-black-1: #dfdfdf;
--uw-black-2: #a2a2a2;
--uw-black-3: #787878;
--uw-black-4: #000;
--uw-black-primary: #000;
+ --uw-gold: #fdd54f;
--uw-gold-1: #fffaaa;
--uw-gold-2: #ffea30;
--uw-gold-3: #fdd54f;
--uw-gold-4: #e4b429;
--uw-gold-primary: #fffaaa;
+ --uw-white: #fff;
--uw-white-1: #fff;
--uw-white-primary: #fff;
// Default Ohana follows:
diff --git a/src/patterns/01-core/props/_fonts.scss b/src/patterns/01-core/props/_fonts.scss
index 62f8cec7..fef85f4b 100644
--- a/src/patterns/01-core/props/_fonts.scss
+++ b/src/patterns/01-core/props/_fonts.scss
@@ -12,23 +12,29 @@
--font-weight-700: 700;
--font-weight-800: 800;
--font-weight-900: 900;
- --font-size-000: 0.625rem; // 10px
- --font-size-00: 0.75rem; // 12px
- --font-size-0: 0.875rem; // 14px
- --font-size-1: 1rem; // 16px
- --font-size-2: 1.125rem; // 18px
- --font-size-3: 1.25rem; // 20px
- --font-size-4: 1.375rem; // 22px
- --font-size-5: 1.5rem; // 24px
- --font-size-6: 1.75rem; // 28px
- --font-size-7: 2rem; // 32px
- --font-size-8: 2.25rem; // 36px
- --font-size-9: 2.5rem; // 40px
- --font-size-10: 3rem; // 48px
- --font-size-11: 3.5rem; // 56px
- --font-size-12: 4rem; // 64px
- --font-size-13: 5rem; // 80px
- --font-size-14: 7.5rem; // 120px
+ --font-size-0000000: 7.888px;
+ --font-size-000000: 8.88px;
+ --font-size-00000: 9.984px;
+ --font-size-0000: 11.232px;
+ --font-size-000: 12.64px;
+ --font-size-00: 14.22224px;
+ --font-size-0: 16px;
+ --font-size-1: 18px;
+ --font-size-2: 20.256px;
+ --font-size-3: 22.784px;
+ --font-size-4: 25.632px;
+ --font-size-5: 28.832px;
+ --font-size-6: 32.432px;
+ --font-size-7: 36.496px;
+ --font-size-8: 41.056px;
+ --font-size-9: 46.192px;
+ --font-size-10: 51.952px;
+ --font-size-11: 58.448px;
+ --font-size-12: 65.76px;
+ --font-size-13: 73.984px;
+ --font-size-14: 83.232px;
+ --font-size-15: 93.632px;
+ --font-size-16: 105.328px;
--font-lineheight-00: .95;
--font-lineheight-1: 1.1;
--font-lineheight-2: 1.25;
diff --git a/src/patterns/01-core/props/_zindex.scss b/src/patterns/01-core/props/_zindex.scss
index d6b869c9..18940d8a 100644
--- a/src/patterns/01-core/props/_zindex.scss
+++ b/src/patterns/01-core/props/_zindex.scss
@@ -4,5 +4,19 @@
--layer-3: 3;
--layer-4: 4;
--layer-5: 5;
+ --layer-background: 1;
+ --layer-wrapper: 2;
+ --layer-slides: 2;
+ --layer-footer: 2;
+ --layer-content: 3;
+ --layer-header: 4;
+ --layer-interact: 5;
+ --layer-mobilemenu: 6;
+ --layer-dropdown: 7;
+ --layer-logo: 8;
+ --layer-nav: 8;
+ --layer-drawer: 9;
+ --layer-overlay: 9;
+ --layer-modal: 10;
--layer-important: 2147483647;
}
diff --git a/src/patterns/03-layouts/_index.scss b/src/patterns/03-layouts/_index.scss
new file mode 100644
index 00000000..2cb5f83a
--- /dev/null
+++ b/src/patterns/03-layouts/_index.scss
@@ -0,0 +1,12 @@
+// @file
+// Styles layouts
+@use '../01-core' as *;
+@use 'content/content' as *;
+@use 'footer/footer' as *;
+@use 'grid/grid' as *;
+@use 'header/header' as *;
+@use 'region/region' as *;
+@use 'layout/layout-base' as *;
+@use 'layout/layout' as *;
+@use 'site-container/site-container' as *;
+@use 'site-footer/site-footer' as *;
diff --git a/src/patterns/03-layouts/content/_content.scss b/src/patterns/03-layouts/content/_content.scss
new file mode 100644
index 00000000..c21482ea
--- /dev/null
+++ b/src/patterns/03-layouts/content/_content.scss
@@ -0,0 +1,36 @@
+// @file
+// Styles for Content Layout.
+.uw-main{
+ &.layout.uw-contained-width{
+ padding: 0 0 1rem;
+ }
+}
+
+// Tabs in admin
+.tabs{
+ z-index: var(--layer-wrapper);
+}
+.is-collapse-enabled .tabs__trigger{
+ z-index: var(--layer-content);
+}
+// Code for show hide revision/tabs
+.uw-show-hide{
+ background-color: var(--uw-white-1);
+ bottom: 4rem;
+ color: rgb(150, 23, 46);
+ cursor: pointer;
+ display: none;
+ font-size: 2rem;
+ height: auto;
+ padding: 0;
+ position: fixed;
+ right: 1rem;
+ text-decoration: none;
+ width: 2rem;
+ z-index: var(--layer-overlay);
+}
+.block-local-tasks-block,
+.uw-content-moderation{
+ display: block;
+}
+// end.
diff --git a/src/patterns/03-layouts/content/content.md b/src/patterns/03-layouts/content/content.md
new file mode 100644
index 00000000..26d99bd7
--- /dev/null
+++ b/src/patterns/03-layouts/content/content.md
@@ -0,0 +1,12 @@
+---
+el: .l-content
+title: Content Layout
+---
+
+__Variables:__
+* has_constrain: [boolean] Whether to add a constrain wrapper.
+* constrain_modifier_classes: [string] Additional constrain classes used to
+control layout.
+
+__Blocks:__
+* content: Twig block for content.
diff --git a/src/patterns/03-layouts/content/content.twig b/src/patterns/03-layouts/content/content.twig
new file mode 100644
index 00000000..6bc42415
--- /dev/null
+++ b/src/patterns/03-layouts/content/content.twig
@@ -0,0 +1,10 @@
+{% set main_classes = 'uw-main' %}
+<button class="uw-show-hide" id="revision-show-hide" title="Show/hide revision elements">±</button>
+{% for class in classes %}
+ {% set main_classes = main_classes ~ ' ' ~ class %}
+{% endfor %}
+<main id="main" class="{{ main_classes }}" role="main" tabindex="-1">
+ {% block content %}
+ Main content
+ {% endblock %}
+</main>
diff --git a/src/patterns/03-layouts/footer/_footer.scss b/src/patterns/03-layouts/footer/_footer.scss
new file mode 100644
index 00000000..7524bf50
--- /dev/null
+++ b/src/patterns/03-layouts/footer/_footer.scss
@@ -0,0 +1,113 @@
+// @file
+// Styles for Footer Layout.
+
+@use '../../01-core' as *;
+
+.uw-footer {
+ background-color: #000;
+ padding: 0;
+ width: 100%;
+ &__wrapper {
+ @include layout-constrain;
+ display: grid;
+ grid-template-columns: 100%;
+ padding-top: var(--size-1);
+ text-size-adjust: none;
+ @media(min-width: $screen-xs) {
+ grid-template-columns: 50% 50%;
+ }
+ @media(min-width: $screen-md) {
+ grid-template-columns: 28% auto 14rem;
+ }
+ @media(min-width: $screen-lg) {
+ grid-template-columns: 28% auto 16rem;
+ }
+ }
+ &__address {
+ //font-family: gesso-font-family(systemmedium);
+ //font-size: gesso-font-size(-1);
+ -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;
+ @media(min-width: $screen-md) {
+ //font-size: gesso-font-size(-2);
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ margin: 0;
+ padding: 0;
+ text-align: left;
+ }
+ @media(min-width: $screen-lg) {
+ //font-size: gesso-font-size(-1);
+ }
+ }
+
+ &__menu {
+ -webkit-font-smoothing: antialiased;
+ grid-column: 1 / 3;
+ padding-bottom: var(--size-1);
+ @media(min-width: $screen-xs) {
+ grid-column: 1 / 2;
+ grid-row: 2 / 3;
+ }
+ @media(min-width: $screen-md) {
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
+ }
+ }
+
+ &__social {
+ //background:$test-color-2;
+ grid-column: 1 / 3;
+ grid-row: 3 / 4;
+ margin: 0 auto;
+ max-width: 13rem;
+ text-align: center;
+ width: 100%;
+ @media(min-width: $screen-xs) {
+ grid-column: 2 / 3;
+ grid-row: 2 / 3;
+ }
+ @media(min-width: $screen-md) {
+ grid-column: 3 / 4;
+ grid-row: 1 / 2;
+ margin: 0;
+ max-width: 16rem;
+ padding-left: var(--size-1);
+ text-align: left;
+ }
+ }
+ &__social-directory {
+ text-align: center;
+ @media(min-width: $screen-md) {
+ text-align: right;
+ }
+
+ a {
+ //font-family: gesso-font-family(system);
+ //font-size: gesso-font-size(-2);
+ text-decoration: none;
+ }
+
+ a:hover {
+ text-decoration: underline;
+ }
+ }
+ &__territorial {
+ a{
+ text-decoration: none;
+ }
+ a:hover {
+ text-decoration: underline;
+ }
+ grid-column: 1 / 4;
+ grid-row: 4 / 5;
+ @media(min-width: $screen-md) {
+ grid-row: 3 / 4;
+ }
+ }
+}
diff --git a/src/patterns/03-layouts/footer/footer.md b/src/patterns/03-layouts/footer/footer.md
new file mode 100644
index 00000000..da06d301
--- /dev/null
+++ b/src/patterns/03-layouts/footer/footer.md
@@ -0,0 +1,12 @@
+---
+el: .l-footer
+title: Footer Layout
+---
+
+__Variables:__
+* has_constrain: [boolean] Whether to add a constrain wrapper.
+* constrain_modifier_classes: [string] Additional constrain classes used to
+control layout.
+
+__Blocks:__
+* content: Twig block for content.
diff --git a/src/patterns/03-layouts/footer/footer.twig b/src/patterns/03-layouts/footer/footer.twig
new file mode 100644
index 00000000..b11bfaa3
--- /dev/null
+++ b/src/patterns/03-layouts/footer/footer.twig
@@ -0,0 +1,26 @@
+<footer class="uw-footer"{% if branding_level == 'full' %} role="contentinfo"{% endif %}>
+ <div class="uw-site-footer__block">
+ {% block content %}
+
+ {% endblock %}
+ </div>
+ <div class="uw-footer__wrapper">
+ {% if branding_level == 'full' %}
+ <div class="uw-footer__address">
+ address
+ </div>
+ <div class="uw-footer__menu">
+ menu
+ </div>
+ <div class="uw-footer__social">
+ social
+ <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
+ </div>
+ {% endif %}
+ </div>
+</footer>
diff --git a/src/patterns/03-layouts/footer/footer.yml b/src/patterns/03-layouts/footer/footer.yml
new file mode 100644
index 00000000..cb497eff
--- /dev/null
+++ b/src/patterns/03-layouts/footer/footer.yml
@@ -0,0 +1,82 @@
+footer_menu:
+ - 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
+social_media:
+ menu_tree:
+ - text: "Facebook"
+ url: "https://www.facebook.com/university.waterloo"
+ - text: "Twitter"
+ url: "https://twitter.com/uWaterloo"
+ - text: "YouTube"
+ url: "https://www.youtube.com/user/uwaterloo"
+ - text: "Instagram"
+ url: "https://www.instagram.com/uofwaterloo/"
+ - text: "LinkedIn"
+ url: "https://www.linkedin.com/edu/school?id=10875"
+social_media_placement: "global-site-footer"
+modifier_classes: 'black'
+territorial_text: '<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>'
+is_demo_footer: true
+cookie:
+ text: '<h2>We use cookies on this site to enhance the user experience.</h2><p>Select "Accept all" to agree and continue. You consent to our cookies if you continue to use this website.</p>'
diff --git a/src/patterns/03-layouts/header/_header.scss b/src/patterns/03-layouts/header/_header.scss
new file mode 100644
index 00000000..cd71ae72
--- /dev/null
+++ b/src/patterns/03-layouts/header/_header.scss
@@ -0,0 +1,88 @@
+@use '../../01-core' as *;
+
+$site-name-bg: var(--gray-2);
+
+.uw-header {
+ @include uw-full-width;
+ background-color: #000;
+ &__masthead {
+ display: flex;
+ //font-family:gesso-font-family(condensedbook);
+ margin-bottom: 0;
+ min-height: 3.5rem;
+ padding: var(--size-1);
+ position: relative;
+ transition: margin 300ms;
+ &.open{
+ margin-bottom: 4rem;
+ transition: margin 300ms;
+ }
+ @media(min-width: $screen-md) {
+ @include layout-constrain;
+ min-height: inherit;
+ padding: var(--size-2);
+ }
+ .uw-site-logo {
+ align-self: flex-start;
+ flex: 1;
+ }
+ .uw-header-menu {
+ align-self: flex-end;
+ margin-right: 2.75rem;
+ @media(min-width: $screen-md) {
+ margin-right: 1rem;
+ }
+ }
+ .uw-header-search {
+ align-self: flex-end;
+ }
+ .uw-header-searchbar{
+ @include layout-constrain;
+ display: block;
+ left: 0;
+ padding: 0;
+ position: absolute;
+ top: 100%;
+ width: 100%;
+ @media(min-width: $screen-md) {
+ display: none;
+ }
+ }
+ }
+
+ .uw-header__nav{
+ @include uw-full-width;
+ background-color: $site-name-bg;
+ }
+ .uw-header__center{
+ @include layout-constrain;
+ border-bottom: 1px solid var(--gray-3);
+ @media(min-width: $screen-md) {
+ border-bottom: inherit;
+ }
+ display: grid;
+ grid-template-columns: auto 4rem;
+ padding: 0;
+ }
+ .uw-header__site-name{
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ }
+ .uw-navigation-button{
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
+ }
+ .uw-header__navigation{
+ grid-column: 1 / 3;
+ grid-row: 2 / 3;
+ }
+
+ .messages-list {
+ background-color: var(--uw-white);
+ grid-column: 1 / 3;
+ grid-row: 2 / 3;
+ margin-bottom: 0;
+ margin-top: 0;
+ padding: 0 1rem;
+ }
+}
diff --git a/src/patterns/03-layouts/header/header.md b/src/patterns/03-layouts/header/header.md
new file mode 100644
index 00000000..698134a1
--- /dev/null
+++ b/src/patterns/03-layouts/header/header.md
@@ -0,0 +1,12 @@
+---
+el: .l-header
+title: Header Layout
+---
+
+__Variables:__
+* has_constrain: [boolean] Whether to add a constrain wrapper.
+* constrain_modifier_classes: [string] Additional constrain classes used to
+control layout.
+
+__Blocks:__
+* content: Twig block for content.
diff --git a/src/patterns/03-layouts/header/header.twig b/src/patterns/03-layouts/header/header.twig
new file mode 100644
index 00000000..ab8155c7
--- /dev/null
+++ b/src/patterns/03-layouts/header/header.twig
@@ -0,0 +1,36 @@
+{% if is_demo_header %}
+ {% set branding_level = 'full' %}
+ {% set faculty = faculty ? faculty : 'org-art' %}
+{% endif %}
+
+<header class="uw-header {{ faculty }}" role="banner">
+ {% if global_message %}
+ <div id="global-message">
+ {{ global_message|render }}
+ </div>
+ {% endif %}
+ <div class="uw-header__masthead">
+
+ </div>
+ <!-- Branding colour bar. -->
+ {% if branding_level == 'full' %}
+ {% include '@components/color-bar/color-bar.twig' with {
+ 'faculty': faculty
+ }%}
+ {% endif %}
+ <!-- Main header horizontal navigation -->
+ <nav class="uw-header__nav">
+ <div class="uw-header__center">
+ <div class="uw-header__site-name">
+ Site Name
+ </div>
+ <button class="uw-navigation-button" aria-controls="uw-header__navigation" aria-expanded="false">
+ <span class="uw-navigation-button__text">Menu</span>
+ <span class="uw-navigation-button__lines"></span>
+ </button>
+ </div>
+ <div id="uw-header__navigation" class="uw-header__navigation">
+
+ </div>
+ </nav>
+</header>
diff --git a/src/patterns/03-layouts/header/header.yml b/src/patterns/03-layouts/header/header.yml
new file mode 100644
index 00000000..e2b641c3
--- /dev/null
+++ b/src/patterns/03-layouts/header/header.yml
@@ -0,0 +1,862 @@
+---
+is_demo_header: true
+header_modifier_classes: 'header'
+menu_name: 'horizontal'
+global_message:
+header_items:
+ - title: 'Jump To'
+ url: 'Parent'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ submenu:
+ - title: 'Admissions'
+ url: 'https://uwaterloo.ca/admissions/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'About Waterloo'
+ url: 'https://uwaterloo.ca/about/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Faculties & Academics'
+ url: 'https://uwaterloo.ca/faculties-academics/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Offices & Services'
+ url: 'https://uwaterloo.ca/offices-services/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Support Waterloo'
+ url: 'https://uwaterloo.ca/support/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+classes:
+nav_items:
+ - text: 'About Psychology'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: '2'
+ submenu:
+ - text: 'Our mission & vision'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Our People'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Research'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: true
+ menu_items_count: '10'
+ submenu:
+ - text: 'Research areas'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Research Chair and Awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: true
+ submenu:
+ - text: 'Clinical'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Cognitive'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Cognitive Neuroscience'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Developmental'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Industrial-Organizational'
+ url: '#'
+ original_link:
+ options:
+ attributtes:
+ class: ''
+ active-trial: true
+ submenu:
+ - text: 'Academic Program for Graduate Study in Industrial-Organizational Psychology'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: true
+ active: true
+ - text: 'Social Psychology'
+ url: '#'
+ original_link:
+ options:
+ attributtes:
+ class: ''
+ active-trial: false
+ - text: 'Teaching excellence'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: '2'
+ submenu:
+ - text: 'Experiential learning'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'News'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Events'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Centre for Mental Health Research and Treatment'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Early Childhood Education Centre'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: '8'
+ submenu:
+ - text: 'Programs offered | Fees'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'FAQs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Enrollment Process | Registration'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Research and academic programs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Volunteer program'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Contact us'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Resources and links'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Celebrating the Class of 2020'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: '3'
+ submenu:
+ - text: 'Convocation Award Winners 2020'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Student Memories 2020'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Community Partners'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Department Profiles Sherman Kwok'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+secondary_modifier_classes: 'secondary'
+secondary_items:
+ - text: 'Undergraduate students '
+ url: '#Parent'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: true
+ menu_items_count: 39
+ submenu:
+ - text: 'Degree Options and Specializations'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'How to become a Psychology Student'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Prospective student'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Courses'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: true
+ submenu:
+ - text: 'Future course offerings'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Courses requiring an application'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Honours Thesis (Psych 499)'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: true
+ submenu:
+ - text: 'Conference opportunities '
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: true
+ submenu:
+ - text: 'Annual Ontario Psychology Undergraduate Thesis Conference'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: true
+ active: true
+ - text: 'Publishing opportunities'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Course overrides'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Special Topics and Honours Seminars'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Syllabus Archive'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Experiential Learning'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Psychology co-op'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Research Assistant (RA) positions'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Student success'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Academic standing'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Policies'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'University policies'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Psychology Department policies'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Awards '
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Convocation and thesis awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Psychology Memorial Awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Other research awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Distinguished Teacher Awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Psychology Undergraduate Society '
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'About to graduate'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'FAQs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Career Options'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Career advising'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'College programs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Employment after Bachelors'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Employment after Masters or PhD'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Graduate studies in Psychology'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Letters of recommendation'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Other programs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Who can I ask?'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Human Resources Management program '
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 10
+ submenu:
+ - text: 'Meet your lecturers'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Minor & Diploma'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Courses'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Meet Our Students'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Student success'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Get involved'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'News'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Alumni | Friends'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'HRM Opportunities'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Graduate students'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 19
+ submenu:
+ - text: 'Programs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Minimum admission requirements'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Application procedures'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Degree requirements'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Submission of the Masters Thesis'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Submission of the Masters Research Paper (MASc students)'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Forming a PhD Committee'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Guideline for PhD Thesis Defense'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Submission of the PhD thesis following the defense'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Forms'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Funding & Awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Careers of Alumni'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'GASP (Graduate Association of Students in Psychology)'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Graduate courses'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Orientation guide'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Policies and procedures'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Showcasing graduate student research'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Teaching assistantships'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Faculty & Staff'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
+ - text: 'Alumni & Friends'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 4
+ submenu:
+ - text: 'Share your story'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Profiles & Achievements'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Make a gift'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Positions available'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
+form_action: 'https://uwaterloo.ca/search'
+form_autocomplete: 'off'
+form_classes: 'uw-search--form'
+form_id: '12345'
+form_method: 'get'
+form_target: ''
+form_accept-charset : 'UTF-8'
+form_role: 'search'
+form_items:
+ - classes: 'uw-input--search'
+ id: '1text'
+ name: 'search-input'
+ type: 'text'
+ placeholder: 'Search'
+ label:
+ text: 'Search'
+ class: 'uw-search--label hidden'
+ - is_button_tag: true
+ form_item_wrapper: false
+ is_demo: false
+ is_disabled: false
+ type: ''
+ classes: button_modifier_classes
+ modifier_classes: button_modifier_classes
+ formaction: ''
+ form: 'uw-search'
+ name: ''
+ formenctype: ''
+ value: 'submit'
+ formmethod: ''
+ formtarget: ''
+ text: ''
+ btnclick: |
+ # alert('Hello World!');
+# - classes: 'uw-input--submit'
+# id: 'submit'
+# name: 'Search'
+# type: 'submit'
diff --git a/src/patterns/03-layouts/layout/_layout.scss b/src/patterns/03-layouts/layout/_layout.scss
index 8916c64e..447689f2 100644
--- a/src/patterns/03-layouts/layout/_layout.scss
+++ b/src/patterns/03-layouts/layout/_layout.scss
@@ -1,5 +1,4 @@
@use '../../01-core' as *;
-
.layout {
@include layout-constrain;
diff --git a/src/patterns/03-layouts/region/region.scss b/src/patterns/03-layouts/region/_region.scss
similarity index 100%
rename from src/patterns/03-layouts/region/region.scss
rename to src/patterns/03-layouts/region/_region.scss
diff --git a/src/patterns/03-layouts/site-container/_site-container.scss b/src/patterns/03-layouts/site-container/_site-container.scss
new file mode 100644
index 00000000..6cca3390
--- /dev/null
+++ b/src/patterns/03-layouts/site-container/_site-container.scss
@@ -0,0 +1,83 @@
+@use '../../01-core' as *;
+
+.uw-site-container {
+ display: grid;
+ grid-template-columns: 100%;
+ position: relative;
+ // Puts the site container at z-index 2
+ z-index: var(--layer-wrapper);
+ .uw-header {
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ position: relative;
+ // Puts the header at z-index 4
+ z-index: var(--layer-header);
+ }
+ .uw-highlighted {
+ @include layout-constrain;
+ grid-column: 1 / 2;
+ grid-row: 2 / 3;
+ position: relative;
+ width: 100%;
+ // Puts the content at z-index 3
+ z-index: var(--layer-content);
+ @media(min-width: $screen-xl) {
+ padding: 0;
+ }
+ }
+
+ .block-uw-cbl-special-alert {
+ background: #f0f0f0;
+ border: 2px solid #96172e;
+ margin: 1em 0;
+ padding: 1em;
+
+ // Prevent excess space at top from elements that have a margin-top.
+ > *:first-child {
+ margin-top: 0;
+ }
+
+ // Prevent excess space at bottom from elements that have a margin-bottom.
+ > *:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ .uw-main {
+ grid-column: 1 / 2;
+ grid-row: 3 / 4;
+ min-height: 60vh;
+ position: relative;
+ width: 100%;
+ // Puts the content at z-index 3
+ //z-index: gesso-z-index(content);
+ }
+
+ .uw-footer {
+ grid-column: 1 / 2;
+ grid-row: 4 / 5;
+ 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);
+ }
+ }
+ }
+}
+
+.mobile-menu,
+.mobile-menu-button{
+ display: none !important;
+}
diff --git a/src/patterns/03-layouts/site-container/site-container.md b/src/patterns/03-layouts/site-container/site-container.md
new file mode 100644
index 00000000..aed7f597
--- /dev/null
+++ b/src/patterns/03-layouts/site-container/site-container.md
@@ -0,0 +1,7 @@
+---
+el: .l-site-container
+title: Site Container Layout
+---
+
+__Blocks:__
+* site_content: Twig block for content.
diff --git a/src/patterns/03-layouts/site-container/site-container.twig b/src/patterns/03-layouts/site-container/site-container.twig
new file mode 100644
index 00000000..47dbf410
--- /dev/null
+++ b/src/patterns/03-layouts/site-container/site-container.twig
@@ -0,0 +1,27 @@
+{% if is_demo_site_container %}
+ {% set faculty = faculty ? faculty : 'org-art' %}
+ {% set branding_level = branding_level ? branding_level : 'full' %}
+{% endif %}
+<div class="uw-site-container">
+ {% block header %}
+ {% include "@layouts/header/header.twig"%}
+ {% endblock %}
+
+ {% block highlighted %}
+{# {% include '@global/06-break-hints/break-hints.twig' %}#}
+ {% endblock %}
+
+ {% block main %}
+ {% include '@layouts/content/content.twig' %}
+ {% endblock %}
+
+ {% block footer %}
+ {% include "@layouts/footer/footer.twig" with {
+ 'menu_name': footer_menu_name,
+ 'items': footer_menu
+ }%}
+ {% if pattern_lab %}
+{# {% include "@components/eu-cookie-compliance/eu-cookie-compliance.twig" %}#}
+ {% endif %}
+ {% endblock %}
+</div>
diff --git a/src/patterns/03-layouts/site-container/site-container.yml b/src/patterns/03-layouts/site-container/site-container.yml
new file mode 100644
index 00000000..f67d72c3
--- /dev/null
+++ b/src/patterns/03-layouts/site-container/site-container.yml
@@ -0,0 +1,949 @@
+---
+site_name: 'Psychology'
+is_demo_site_container: true
+is_demo_footer: true
+header_modifier_classes: 'header'
+menu_name: 'horizontal'
+cookie:
+ text: '<h2>We use cookies on this site to enhance the user experience.</h2><p>Select "Accept all" to agree and continue. You consent to our cookies if you continue to use this website.</p>'
+header_items:
+ - title: 'Jump To'
+ url: 'Parent'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ submenu:
+ - title: 'Admissions'
+ url: 'https://uwaterloo.ca/admissions/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'About Waterloo'
+ url: 'https://uwaterloo.ca/about/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Faculties & Academics'
+ url: 'https://uwaterloo.ca/faculties-academics/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Offices & Services'
+ url: 'https://uwaterloo.ca/offices-services/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+ - title: 'Support Waterloo'
+ url: 'https://uwaterloo.ca/support/'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ in_active_trail: false
+classes:
+footer_menu_name: 'uw-footer'
+footer_menu:
+ - 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
+social_media:
+ menu_tree:
+ - text: "Facebook"
+ url: "https://www.facebook.com/university.waterloo"
+ - text: "Twitter"
+ url: "https://twitter.com/uWaterloo"
+ - text: "YouTube"
+ url: "https://www.youtube.com/user/uwaterloo"
+ - text: "Instagram"
+ url: "https://www.instagram.com/uofwaterloo/"
+ - text: "LinkedIn"
+ url: "https://www.linkedin.com/edu/school?id=10875"
+social_media_placement: "global-site-footer"
+nav_items:
+ - text: 'About Psychology'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 2
+ submenu:
+ - text: 'Our mission & vision'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Our People'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
+ - text: 'Research'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 10
+ submenu:
+ - text: 'Research areas'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Research Chair and Awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Clinical'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Cognitive'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Cognitive Neuroscience'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Developmental'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Industrial-Organizational'
+ url: '#'
+ original_link:
+ options:
+ attributtes:
+ class: ''
+ active-trial: false
+ submenu:
+ - text: 'Academic Program for Graduate Study in Industrial-Organizational Psychology'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Social Psychology'
+ url: '#'
+ original_link:
+ options:
+ attributtes:
+ class: ''
+ active-trial: false
+ - text: 'Teaching excellence'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 2
+ submenu:
+ - text: 'Experiential learning'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'News'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
+ - text: 'Events'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
+ - text: 'Centre for Mental Health Research and Treatment'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
+ - text: 'Early Childhood Education Centre'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 8
+ submenu:
+ - text: 'Programs offered | Fees'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'FAQs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Enrollment Process | Registration'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Research and academic programs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Volunteer program'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Contact us'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Resources and links'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Celebrating the Class of 2020'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 3
+ submenu:
+ - text: 'Convocation Award Winners 2020'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Student Memories 2020'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Community Partners'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
+ - text: 'Department Profiles Sherman Kwok'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
+secondary_modifier_classes: 'secondary'
+secondary_items:
+ - text: 'Undergraduate students '
+ url: '#Parent'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: true
+ active: true
+ menu_items_count: 39
+ submenu:
+ - text: 'Degree Options and Specializations'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'How to become a Psychology Student'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Prospective student'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Courses'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Future course offerings'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Courses requiring an application'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Honours Thesis (Psych 499)'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Conference opportunities '
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Annual Ontario Psychology Undergraduate Thesis Conference'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Publishing opportunities'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Course overrides'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Special Topics and Honours Seminars'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Syllabus Archive'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Experiential Learning'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Psychology co-op'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Research Assistant (RA) positions'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Student success'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Academic standing'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Policies'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'University policies'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Psychology Department policies'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Awards '
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Convocation and thesis awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Psychology Memorial Awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Other research awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Distinguished Teacher Awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Psychology Undergraduate Society '
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'About to graduate'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'FAQs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Career Options'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Career advising'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'College programs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Employment after Bachelors'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Employment after Masters or PhD'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Graduate studies in Psychology'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Letters of recommendation'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Other programs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Who can I ask?'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Human Resources Management program '
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 10
+ submenu:
+ - text: 'Meet your lecturers'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Minor & Diploma'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Courses'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Meet Our Students'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: true
+ active: true
+ - text: 'Student success'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Get involved'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'News'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Alumni | Friends'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'HRM Opportunities'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Graduate students'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 19
+ submenu:
+ - text: 'Programs'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Minimum admission requirements'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Application procedures'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Degree requirements'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ submenu:
+ - text: 'Submission of the Masters Thesis'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Submission of the Masters Research Paper (MASc students)'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Forming a PhD Committee'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Guideline for PhD Thesis Defense'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Submission of the PhD thesis following the defense'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Forms'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Funding & Awards'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Careers of Alumni'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'GASP (Graduate Association of Students in Psychology)'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Graduate courses'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Orientation guide'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Policies and procedures'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Showcasing graduate student research'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Teaching assistantships'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Faculty & Staff'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
+ - text: 'Alumni & Friends'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 4
+ submenu:
+ - text: 'Share your story'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Profiles & Achievements'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Make a gift'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ - text: 'Positions available'
+ url: '#'
+ original_link:
+ options:
+ attributes:
+ class: ''
+ active_trail: false
+ menu_items_count: 0
+form_action: 'https://uwaterloo.ca/search'
+form_autocomplete: 'off'
+form_classes: 'uw-search--form'
+form_id: '12345'
+form_method: 'get'
+form_target: ''
+form_accept-charset : 'UTF-8'
+form_role: 'search'
+form_items:
+ - classes: 'uw-input--search'
+ id: '1text'
+ name: 'search-input'
+ type: 'text'
+ placeholder: 'Search'
+ label:
+ text: 'Search'
+ class: 'uw-search--label hidden'
+ - is_button_tag: true
+ form_item_wrapper: false
+ is_demo: false
+ is_disabled: false
+ type: ''
+ classes: button_modifier_classes
+ modifier_classes: button_modifier_classes
+ formaction: ''
+ form: 'uw-search'
+ name: ''
+ formenctype: ''
+ value: 'submit'
+ formmethod: ''
+ formtarget: ''
+ text: ''
+ btnclick: |
+ # alert('Hello World!');
+# - classes: 'uw-input--submit'
+# id: 'submit'
+# name: 'Search'
+# type: 'submit'
diff --git a/src/patterns/03-layouts/site-footer/_site-footer.scss b/src/patterns/03-layouts/site-footer/_site-footer.scss
new file mode 100644
index 00000000..56770bc7
--- /dev/null
+++ b/src/patterns/03-layouts/site-footer/_site-footer.scss
@@ -0,0 +1,113 @@
+@use '../../01-core' as *;
+
+.uw-site-footer {
+ background-color: var(--gray-3);
+ &__wrapper {
+ @include layout-constrain;
+ display: grid;
+ grid-template-columns: 100%;
+ grid-template-rows: auto auto auto;
+ padding-bottom: var(--size-2);
+ padding-top: var(--size-2);
+ @media(min-width: $screen-md) {
+ grid-template-columns: auto 18rem;
+ }
+ @media(min-width: $screen-xl) {
+ padding: var(--size-2) 0;
+ }
+ }
+ &__title {
+ color: var(--uw-white-1);
+ a{
+ color: var(--uw-white-1);
+ text-decoration: underline;
+ &:hover,
+ &:focus
+ {
+ color: var(--uw-white-1);
+ text-decoration: none;
+ }
+ }
+ //font-family: gesso-font-family(condensedbook);
+ //font-size: rem(gesso-font-size(3));
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ padding-bottom: var(--size-2);
+ text-align: center;
+ text-transform: uppercase;
+ @media(min-width: $screen-md) {
+ grid-row: 1 / 2;
+ text-align: left;
+ }
+ }
+ &__logo {
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ padding-bottom: var(--size-2);
+ text-align: center;
+ @media(min-width: $screen-md) {
+ grid-row: 1 / 2;
+ text-align: left;
+ }
+ }
+ &__social-media {
+ grid-column: 1 / 2;
+ grid-row: 3 / 4;
+ margin: 0 auto;
+ padding-bottom: var(--size-4);
+ width: 100%;
+ @media(min-width: $screen-md) {
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
+ margin: 0;
+ }
+
+ @media(min-width: $screen-xl) {
+ //padding:0;
+ }
+ }
+
+ &__content {
+ h2,
+ h3,
+ h4,
+ h5,
+ h6{
+ color: var(--uw-white-1);
+ }
+ color: var(--uw-white-1);
+ grid-column: 1 / 2;
+ grid-row: 2 / 3;
+ padding-bottom: var(--size-2);
+ text-align: center;
+ @media(min-width: $screen-md) {
+ grid-column: 1 / 3;
+ grid-row: 2 / 3;
+ text-align: left;
+ }
+ @media(min-width: $screen-xl) {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ a{
+ color: var(--uw-white-1);
+ }
+ table {
+ caption{
+ color: var(--uw-white-1);
+ }
+ *{
+ color: var(--uw-white-1);
+ }
+ }
+ }
+
+ .uw-admin-label {
+ display: none;
+ }
+
+ .in-layout-builder {
+ border: 0;
+ margin: initial;
+ }
+}
diff --git a/src/patterns/03-layouts/site-footer/site-footer.twig b/src/patterns/03-layouts/site-footer/site-footer.twig
new file mode 100644
index 00000000..933881a7
--- /dev/null
+++ b/src/patterns/03-layouts/site-footer/site-footer.twig
@@ -0,0 +1,26 @@
+{% if site_name or logo_url %}
+<div class="uw-site-footer">
+ <div class="uw-site-footer__wrapper">
+
+ {% if logo_url %}
+ <div class="uw-site-footer__logo">
+ <a href="{{ logo_link }}">
+ <img src="{{ logo_url }}" alt="{{ logo_alt_text }}" />
+ </a>
+ </div>
+ {% else %}
+ <div class="uw-site-footer__title">
+ <a href="{{ home_link }}">
+ {{ site_name }}
+ </a>
+ </div>
+ {% endif %}
+ <div class="uw-site-footer__social-media">
+ social icons
+ </div>
+ <div class="uw-site-footer__content">
+ {{ body }}
+ </div>
+ </div>
+</div>
+{% endif %}
diff --git a/src/patterns/03-layouts/site-footer/site-footer.yml b/src/patterns/03-layouts/site-footer/site-footer.yml
new file mode 100644
index 00000000..96b1ebbd
--- /dev/null
+++ b/src/patterns/03-layouts/site-footer/site-footer.yml
@@ -0,0 +1,22 @@
+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"
+logo_url: "/uw_wcms_gesso/source/images/logos/uwaterloo-logo.svg"
+logo_alt_text: "Faculty of Health logo"
+home_link : "#"
+facebook: "https://www.facebook.com/University.Waterloo"
+social_media:
+ menu_tree:
+ - text: "Facebook"
+ url: "https://www.facebook.com/university.waterloo"
+ - text: "Twitter"
+ url: "https://twitter.com/uWaterloo"
+ - text: "YouTube"
+ url: "https://www.youtube.com/user/uwaterloo"
+ - text: "Instagram"
+ url: "https://www.instagram.com/uofwaterloo/"
+ - text: "LinkedIn"
+ url: "https://www.linkedin.com/edu/school?id=10875"
+ - text: "Snapchat"
+ url: "https://www.snapchat.com/add/uofwaterloo"
+social_media_placement: "local-site-footer"
diff --git a/src/patterns/04-components/color-bar/_color-bar.scss b/src/patterns/04-components/color-bar/_color-bar.scss
new file mode 100644
index 00000000..e1fbd817
--- /dev/null
+++ b/src/patterns/04-components/color-bar/_color-bar.scss
@@ -0,0 +1,53 @@
+$defaults: 'uw-gold';
+$faculties: 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school', 'org-stp', 'org-cgc', 'org-stj', 'org-ren';
+$lvls: 'lvl1', 'lvl2', 'lvl3', 'lvl4';
+
+@each $default in $defaults {
+ @each $lvl in $lvls {
+ .uw-colour-bar__cbar {
+ &org-default__#{$default}--#{$lvl} {
+ background-color: gesso-brand('org-default', $default, $lvl);
+ }
+ }
+ }
+}
+
+@each $faculty in $faculties {
+ @each $lvl in $lvls {
+ .uw-colour-bar__cbar {
+ &#{$faculty}--#{$lvl} {
+ background-color: gesso-brand($faculty, $lvl);
+ }
+ }
+ }
+}
+
+.uw-colour-bar__cbars {
+ display: flex;
+ flex-direction: row wrap;
+ justify-content: flex-start;
+ width: 100%;
+}
+
+.uw-colour-bar__cbar {
+ -webkit-box-flex: 1;
+ -moz-flex: 1;
+ -ms-flex: 1;
+ -webkit-flex: 1;
+ flex: 1;
+ height: 0.625rem;
+ margin: 0;
+ padding: 0;
+
+ @include medium {
+ height: 0.875rem;
+ }
+
+ @include large {
+ height: 1rem;
+ }
+
+ @include xl {
+ height: 1.125rem;
+ }
+}
diff --git a/src/patterns/04-components/color-bar/color-bar.md b/src/patterns/04-components/color-bar/color-bar.md
new file mode 100644
index 00000000..de2599b0
--- /dev/null
+++ b/src/patterns/04-components/color-bar/color-bar.md
@@ -0,0 +1,7 @@
+---
+el: .colour-bar
+title: Colour bar
+---
+
+__Variables:__
+* faculty: [string] The faculty of the colour bar (chooses the colour)
diff --git a/src/patterns/04-components/color-bar/color-bar.twig b/src/patterns/04-components/color-bar/color-bar.twig
new file mode 100644
index 00000000..1261808b
--- /dev/null
+++ b/src/patterns/04-components/color-bar/color-bar.twig
@@ -0,0 +1,14 @@
+{% set lvls = 4 %}
+<div class="uw-colour-bar">
+ <div class="uw-colour-bar__wrapper">
+ <div class="uw-colour-bar__cbars">
+ {% for lvl in range(1,lvls) %}
+ {% if faculty == 'org-default' %}
+ <div class="uw-colour-bar__cbar org-default__uw-gold--lvl{{ lvl }}"></div>
+ {% else %}
+ <div class="uw-colour-bar__cbar {{ faculty }}--lvl{{ lvl }}"></div>
+ {% endif %}
+ {% endfor %}
+ </div>
+ </div>
+</div>
diff --git a/src/patterns/04-components/color-bar/color-bar.yml b/src/patterns/04-components/color-bar/color-bar.yml
new file mode 100644
index 00000000..f2339857
--- /dev/null
+++ b/src/patterns/04-components/color-bar/color-bar.yml
@@ -0,0 +1 @@
+faculty: 'org-ahs'
diff --git a/src/patterns/global.scss b/src/patterns/global.scss
index 78f14f32..7948a515 100644
--- a/src/patterns/global.scss
+++ b/src/patterns/global.scss
@@ -5,6 +5,4 @@
@use '01-core/props' as *;
@use '01-core/utilities' as *;
@use '01-core/elements' as *;
-@use '03-layouts/grid/grid' as *;
-@use '03-layouts/layout/layout-base' as *;
-@use '03-layouts/layout/layout' as *;
+@use '03-layouts' as *;
--
GitLab