diff --git a/css/styles.css b/css/styles.css
index 5bb39d909eb5e7acbadf1e06d965036e53411cc3..3c7536ef448a1308df5114974b51db714db983ab 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1494,6 +1494,112 @@ svg:not(:root) {
padding-left: 0;
padding-right: 0; }
+.cuba-bod-person {
+ display: block;
+ width: 100%; }
+ .cuba-bod-person__wrapper {
+ display: grid;
+ grid-gap: 1rem;
+ grid-template-columns: 50% 50%; }
+ .cuba-bod-person__picture {
+ grid-column: 1 / 2;
+ grid-row: 1 / 2; }
+ .cuba-bod-person__picture img {
+ float: right; }
+ .cuba-bod-person__titles {
+ grid-column: 2 / 3;
+ grid-row: 1 / 2; }
+ .cuba-bod-person__bio {
+ grid-column: 1 / 3;
+ grid-row: 2 / 3;
+ padding: 0 2rem; }
+
+.cuba-bod-view {
+ display: block;
+ width: 100%; }
+ @media screen and (min-width: 48em) {
+ .cuba-bod-view {
+ display: flex;
+ flex-wrap: wrap; } }
+ .cuba-bod-view__profile {
+ padding: 1rem 0; }
+ .cuba-bod-view__profile .button {
+ border-radius: 0;
+ width: 75%; }
+ .cuba-bod-view__row {
+ display: block;
+ flex: 1 1 100%;
+ margin-bottom: 1.5rem; }
+ @media screen and (min-width: 48em) {
+ .cuba-bod-view__row {
+ display: flex;
+ flex: 1 1 51%;
+ flex-wrap: wrap; } }
+ @media screen and (min-width: 64em) {
+ .cuba-bod-view__row {
+ flex: 1 1 50%;
+ max-width: 50%; } }
+ .cuba-bod-view__row:first-child {
+ flex: 1 1 100%;
+ margin: 4.5rem auto; }
+ .cuba-bod-view__row:first-child .cuba-bod-view__card {
+ margin-left: auto;
+ margin-right: auto; }
+ @media screen and (min-width: 64em) {
+ .cuba-bod-view__row:first-child {
+ max-width: inherit; }
+ .cuba-bod-view__row:first-child .cuba-bod-view__card {
+ max-width: 40rem; } }
+ .cuba-bod-view__row:last-of-type {
+ margin-left: auto;
+ margin-right: auto; }
+ .cuba-bod-view__card {
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+ display: grid;
+ grid-template-columns: 100%;
+ margin: 0 1rem;
+ width: calc(100% - 2rem); }
+ @media screen and (min-width: 48em) {
+ .cuba-bod-view__card {
+ grid-gap: 2rem;
+ grid-template-columns: 30% 70%; } }
+ .cuba-bod-view__picture {
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ margin-left: auto;
+ margin-right: auto; }
+ @media screen and (min-width: 48em) {
+ .cuba-bod-view__picture {
+ margin-left: initial;
+ margin-right: initial; } }
+ .cuba-bod-view__picture img {
+ margin: 0;
+ padding: 0; }
+ @media screen and (min-width: 48em) {
+ .cuba-bod-view__picture img {
+ float: right; } }
+ .cuba-bod-view__titles {
+ grid-column: 1 / 2;
+ grid-row: 2 / 3;
+ padding: 0 1rem;
+ text-align: center; }
+ @media screen and (min-width: 48em) {
+ .cuba-bod-view__titles {
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
+ text-align: left; } }
+ .cuba-bod-view__titles a {
+ text-decoration: none; }
+
+.cuba-bod-page-title h1 {
+ font-size: 2rem;
+ margin: 0;
+ padding: 0;
+ text-align: center; }
+ @media screen and (min-width: 48em) {
+ .cuba-bod-page-title h1 {
+ font-size: 3rem; } }
+
.uw-footer {
background-color: #000;
margin-top: 0;
@@ -1840,7 +1946,7 @@ svg:not(:root) {
padding-right: 0; } }
@media (min-width: 48.06rem) {
.uw-header__wrapper {
- grid-template-columns: auto 10rem; } }
+ grid-template-columns: auto 8rem; } }
.uw-header__wrapper .uw-site-logo {
grid-column: 1 / 3;
grid-row: 1 / 2; }
@@ -1855,24 +1961,15 @@ svg:not(:root) {
.uw-header__wrapper .uw-header-menu {
grid-column: 2 / 3;
grid-row: 1 / 2; } }
- .uw-header__wrapper .uw-colour-bar {
- padding-top: 1rem;
- width: 100%; }
- .uw-header__wrapper .uw-main-nav {
- display: none;
- grid-column: 1 / 5;
- grid-row: 4 / 5; }
- @media (min-width: 48.06rem) {
- .uw-header__wrapper .uw-main-nav {
- grid-column: 1 / 5;
- grid-row: 3 / 4; } }
- .uw-header__wrapper .messages-list {
- background-color: #fff;
- grid-column: 1 / 5;
- grid-row: 4 / 5;
- margin-bottom: 0;
- margin-top: 0;
- padding: 0 1rem; }
+ .uw-header .uw-site-name {
+ background-color: #eee; }
+ .uw-header .messages-list {
+ background-color: #fff;
+ grid-column: 1 / 5;
+ grid-row: 4 / 5;
+ margin-bottom: 0;
+ margin-top: 0;
+ padding: 0 1rem; }
.layout {
margin-left: auto;
@@ -5268,8 +5365,23 @@ picture {
text-indent: -999rem;
width: 100%; }
-.site-name {
- padding: 1rem; }
+.uw-site-name__wrapper {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 75rem;
+ padding: 0 16px; }
+ @media (min-width: 75rem) {
+ .uw-site-name__wrapper {
+ padding-left: 0;
+ padding-right: 0; } }
+
+.uw-site-name__link {
+ text-decoration: none; }
+
+.uw-site-name__text {
+ font-size: 28.832px;
+ margin: 0;
+ padding: 0.5rem 0; }
.skiplinks {
display: flex;
diff --git a/js/component_scripts.min.js b/js/component_scripts.min.js
index c36cf177e6528bcebb328f9edea4f549cdcc240c..a7773da4e3de3c2a4f345a7af1efeb35b398d0bb 100644
--- a/js/component_scripts.min.js
+++ b/js/component_scripts.min.js
@@ -261,6 +261,25 @@
attach: function (context, settings) {
$(document).ready(function(){
+ // $(document, context).once('horizontal_menu').each( function() {
+ //
+ // acc = document.getElementsByClassName('menu--horizontal');
+ //
+ // for (i = 0; i < acc.length; i++) {
+ //
+ // acc[i].addEventListener('click', function (acc_clicked) {
+ //
+ // /* Toggle between adding and removing the "active" class,
+ // to highlight the button that controls the panel */
+ // this.classList.toggle('active');
+ // });
+ // }
+ // });
+
+
+
+
+
// const toggle = document.querySelector(".toggle");
const menu = document.querySelector(".menu--horizontal");
diff --git a/source/_patterns/03-layouts/content/_content.scss b/source/_patterns/03-layouts/content/_content.scss
index 16ec3a2aceba264be6a34e0b04d74c32ae7f8fd2..5d2f9a2229076ee917953c6979eb9789b795dc2b 100644
--- a/source/_patterns/03-layouts/content/_content.scss
+++ b/source/_patterns/03-layouts/content/_content.scss
@@ -2,3 +2,160 @@
// Styles for Content Layout.
// .l-content {}
+.cuba-bod-person {
+ display: block;
+ width: 100%;
+
+ &__wrapper {
+ display: grid;
+ grid-gap: 1rem;
+ grid-template-columns: 50% 50%;
+
+ }
+
+ &__picture {
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+
+ img {
+ float: right;
+ }
+ }
+
+ &__titles {
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
+ }
+
+ &__bio {
+
+ grid-column: 1 / 3;
+ grid-row: 2 / 3;
+ padding: 0 2rem;
+ }
+}
+
+.cuba-bod-view {
+ display: block;
+ width: 100%;
+
+ @media screen and (min-width: 48em) {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ &__profile {
+ padding: 1rem 0;
+
+ .button {
+ border-radius: 0;
+ width: 75%;
+ }
+ }
+
+ &__row {
+ display: block;
+ flex: 1 1 100%;
+ margin-bottom: 1.5rem;
+
+ @media screen and (min-width: 48em) {
+ display: flex;
+ flex: 1 1 51%;
+ flex-wrap: wrap;
+
+ }
+ @media screen and (min-width: 64em) {
+ flex: 1 1 50%;
+ max-width:50%;
+ }
+ }
+
+ &__row:first-child {
+ flex: 1 1 100%;
+ margin:4.5rem auto;
+ .cuba-bod-view__card {
+ margin-left: auto;
+ margin-right: auto;
+ }
+ @media screen and (min-width: 64em) {
+ max-width:inherit;
+ .cuba-bod-view__card {
+ max-width:40rem;
+ }
+ }
+
+ }
+ &__row:last-of-type {
+ margin-left: auto;
+ margin-right: auto;
+ }
+ &__card {
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+ display: grid;
+ grid-template-columns: 100%;
+ margin: 0 1rem;
+ width:calc(100% - 2rem);
+ @media screen and (min-width: 48em) {
+ grid-gap: 2rem;
+ grid-template-columns: 30% 70%;
+ }
+ }
+
+ &__picture {
+
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
+ margin-left: auto;
+ margin-right: auto;
+
+ @media screen and (min-width: 48em) {
+
+ margin-left: initial;
+ margin-right: initial;
+ }
+
+ img {
+
+ margin: 0;
+ padding: 0;
+
+ @media screen and (min-width: 48em) {
+ float: right;
+ }
+ }
+ }
+
+ &__titles {
+
+ grid-column: 1 / 2;
+ grid-row: 2 / 3;
+ padding: 0 1rem;
+ text-align: center;
+
+ @media screen and (min-width: 48em) {
+
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
+ text-align: left;
+ }
+
+ a {
+ text-decoration: none;
+ }
+ }
+}
+
+.cuba-bod-page-title {
+ h1 {
+
+ font-size: 2rem;
+ margin: 0;
+ padding: 0;
+ text-align: center;
+
+
+ @media screen and (min-width: 48em) {
+ font-size: 3rem;
+ }
+ }
+}
\ No newline at end of file
diff --git a/source/_patterns/03-layouts/content/content.twig b/source/_patterns/03-layouts/content/content.twig
index c98be1bdfb455f61f9ebb48b2e66c5b485d04d80..cef496553885d455b645917c302d28c874c3c4fd 100644
--- a/source/_patterns/03-layouts/content/content.twig
+++ b/source/_patterns/03-layouts/content/content.twig
@@ -1,5 +1,237 @@
<main id="main" class="uw-main" role="main" tabindex="-1">
{% block content %}
- Content Region Content
+ {#<div class="view view-cuba-view-bod view-id-cuba_view_bod view-display-id-page_1 js-view-dom-id-68027caf5b0907a4a3377d5f79a06e13ef238b89dbd208e7fdecfc9531a492c5">#}
+
+
+
+ {#<div class="view-content">#}
+ {#<div class="cuba-bod-page-title">#}
+ {#<h1>Board of Directors</h1>#}
+ {#</div>#}
+ {#<div class="cuba-bod-description">#}
+ {#The board of directors is elected annually by the association’s members. Members of the CUBA Board of Directors are shown below. Click on their names or photos to read more about each of them.#}
+ {#</div>#}
+
+ {#<div class="cuba-bod-view">#}
+
+
+
+ {#<div class="cuba-bod-view__row">#}
+ {#<div class="cuba-bod-view__card">#}
+ {#<div class="cuba-bod-view__picture">#}
+ {#<a href="/node/12">#}
+ {#<img src="https://dev.cuba-accau.ca/profiles/cuba_base_profile/themes/cuba_theme/images/default_board_member.jpg" alt="Member does not have picture">#}
+ {#</a>#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__titles">#}
+ {#<h2><a href="/node/12">Vacant(President)</a></h2>#}
+ {#<div class="cuba-bod-view__university-position">#}
+
+ {#</div>#}
+
+ {#<div class="cuba-bod-view__university-position">#}
+
+ {#</div>#}
+ {#<div class="cuba-bod-view__profile">#}
+ {#<button class="button"><a href="/node/12">View Profile</a></button>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+
+
+
+ {#<div class="cuba-bod-view__row">#}
+ {#<div class="cuba-bod-view__card">#}
+ {#<div class="cuba-bod-view__picture">#}
+ {#<a href="/node/11">#}
+ {#<article class="media media--type-board-of-directors media--view-mode-default">#}
+
+
+ {#<div class="field field--name-field-media-image-1 field--type-image field--label-hidden field__item"> <img src="https://dev.cuba-accau.ca/sites/default/files/styles/cuba_is_bod/public/2020-11/jcrawford-%281%29.jpg?itok=Fb99iQPP" width="256" height="300" alt="as" typeof="foaf:Image" class="image-style-cuba-is-bod">#}
+
+
+ {#</div>#}
+
+ {#</article>#}
+
+ {#</a>#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__titles">#}
+ {#<h2><a href="/node/11">Joy Crawford(Vice Chair)</a></h2>#}
+ {#<div class="cuba-bod-view__university-position">#}
+ {#Vice-Chair of the Board of Governors#}
+ {#</div>#}
+
+ {#<div class="cuba-bod-view__university-position">#}
+ {#University of Saskatchewan#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__profile">#}
+ {#<button class="button"><a href="/node/11">View Profile</a></button>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+
+
+
+ {#<div class="cuba-bod-view__row">#}
+ {#<div class="cuba-bod-view__card">#}
+ {#<div class="cuba-bod-view__picture">#}
+ {#<a href="/node/10">#}
+ {#<article class="media media--type-board-of-directors media--view-mode-default">#}
+
+
+ {#<div class="field field--name-field-media-image-1 field--type-image field--label-hidden field__item"> <img src="https://dev.cuba-accau.ca/sites/default/files/styles/cuba_is_bod/public/2020-11/Mike-Grivicic-2.jpg?itok=4Wsjqrs7" width="240" height="300" alt="MG" typeof="foaf:Image" class="image-style-cuba-is-bod">#}
+
+
+ {#</div>#}
+
+ {#</article>#}
+
+ {#</a>#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__titles">#}
+ {#<h2><a href="/node/10">Mike Grivicic(Secretary)</a></h2>#}
+ {#<div class="cuba-bod-view__university-position">#}
+ {#Associate University Secretary#}
+ {#</div>#}
+
+ {#<div class="cuba-bod-view__university-position">#}
+ {#University of Waterloo#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__profile">#}
+ {#<button class="button"><a href="/node/10">View Profile</a></button>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+
+
+
+ {#<div class="cuba-bod-view__row">#}
+ {#<div class="cuba-bod-view__card">#}
+ {#<div class="cuba-bod-view__picture">#}
+ {#<a href="/node/13">#}
+ {#<article class="media media--type-board-of-directors media--view-mode-default">#}
+
+
+ {#<div class="field field--name-field-media-image-1 field--type-image field--label-hidden field__item"> <img src="https://dev.cuba-accau.ca/sites/default/files/styles/cuba_is_bod/public/2020-11/Carrie-Andersen_0.jpg?itok=wDVpBECR" width="214" height="300" alt="asdg" typeof="foaf:Image" class="image-style-cuba-is-bod">#}
+
+
+ {#</div>#}
+
+ {#</article>#}
+
+ {#</a>#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__titles">#}
+ {#<h2><a href="/node/13">Carrie Anderson</a></h2>#}
+ {#<div class="cuba-bod-view__university-position">#}
+ {#University Secretary#}
+ {#</div>#}
+
+ {#<div class="cuba-bod-view__university-position">#}
+ {#University of Victoria#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__profile">#}
+ {#<button class="button"><a href="/node/13">View Profile</a></button>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+
+ {#<div class="cuba-bod-view__row">#}
+ {#<div class="cuba-bod-view__card">#}
+ {#<div class="cuba-bod-view__picture">#}
+ {#<a href="/node/14">#}
+ {#<article class="media media--type-board-of-directors media--view-mode-default">#}
+
+
+ {#<div class="field field--name-field-media-image-1 field--type-image field--label-hidden field__item"> <img src="https://dev.cuba-accau.ca/sites/default/files/styles/cuba_is_bod/public/2020-11/Lynn_castonguy.jpg?itok=m2ILIAfr" width="259" height="300" alt="asdg" typeof="foaf:Image" class="image-style-cuba-is-bod">#}
+
+
+ {#</div>#}
+
+ {#</article>#}
+
+ {#</a>#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__titles">#}
+ {#<h2><a href="/node/14">Lynne Castonguay</a></h2>#}
+ {#<div class="cuba-bod-view__university-position">#}
+ {#Secretary-General#}
+ {#</div>#}
+
+ {#<div class="cuba-bod-view__university-position">#}
+ {#University of Moncton#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__profile">#}
+ {#<button class="button"><a href="/node/14">View Profile</a></button>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+
+ {#<div class="cuba-bod-view__row">#}
+ {#<div class="cuba-bod-view__card">#}
+ {#<div class="cuba-bod-view__picture">#}
+ {#<a href="/node/14">#}
+ {#<article class="media media--type-board-of-directors media--view-mode-default">#}
+
+
+ {#<div class="field field--name-field-media-image-1 field--type-image field--label-hidden field__item"> <img src="https://dev.cuba-accau.ca/sites/default/files/styles/cuba_is_bod/public/2020-11/Lynn_castonguy.jpg?itok=m2ILIAfr" width="259" height="300" alt="asdg" typeof="foaf:Image" class="image-style-cuba-is-bod">#}
+
+
+ {#</div>#}
+
+ {#</article>#}
+
+ {#</a>#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__titles">#}
+ {#<h2><a href="/node/14">Lynne Castonguay</a></h2>#}
+ {#<div class="cuba-bod-view__university-position">#}
+ {#Secretary-General#}
+ {#</div>#}
+
+ {#<div class="cuba-bod-view__university-position">#}
+ {#University of Moncton#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__profile">#}
+ {#<button class="button"><a href="/node/14">View Profile</a></button>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+
+
+
+ {#<div class="cuba-bod-view__row">#}
+ {#<div class="cuba-bod-view__card">#}
+ {#<div class="cuba-bod-view__picture">#}
+ {#<a href="/node/19">#}
+ {#<img src="https://dev.cuba-accau.ca/profiles/cuba_base_profile/themes/cuba_theme/images/default_board_member.jpg" alt="Member does not have picture">#}
+ {#</a>#}
+ {#</div>#}
+ {#<div class="cuba-bod-view__titles">#}
+ {#<h2><a href="/node/19">Vacant(New position)</a></h2>#}
+ {#<div class="cuba-bod-view__university-position">#}
+
+ {#</div>#}
+
+ {#<div class="cuba-bod-view__university-position">#}
+
+ {#</div>#}
+ {#<div class="cuba-bod-view__profile">#}
+ {#<button class="button"><a href="/node/19">View Profile</a></button>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+ {#</div>#}
+
+ {#</div>#}
{% endblock %}
</main>
diff --git a/source/_patterns/03-layouts/header/_header.scss b/source/_patterns/03-layouts/header/_header.scss
index b6babb8d9adb139984318c29d20d734bb0b6a24c..9ed265ba7dccbbf863d30dc91a28af16b034284e 100644
--- a/source/_patterns/03-layouts/header/_header.scss
+++ b/source/_patterns/03-layouts/header/_header.scss
@@ -1,5 +1,6 @@
// @file
// Styles for Header Layout.
+$site-name-bg: gesso-grayscale(gray-2);
.uw-header {
@include uw-full-width;
@@ -13,7 +14,7 @@
padding:gesso-spacing(sm);
position: relative;
@include medium {
- grid-template-columns: auto 10rem;
+ grid-template-columns: auto 8rem;
}
.uw-site-logo {
@@ -35,29 +36,19 @@
}
}
- .uw-colour-bar {
- padding-top: 1rem;
- width:100%;
- }
- .uw-main-nav {
- display:none;
- grid-column: 1 / 5;
- grid-row: 4 / 5;
+ }
- @include medium{
- grid-column: 1 / 5;
- grid-row: 3 / 4;
- }
- }
+ .uw-site-name{
+ background-color: $site-name-bg;
- .messages-list {
- background-color: $uw-white;
- grid-column: 1 / 5;
- grid-row: 4 / 5;
- margin-bottom: 0;
- margin-top: 0;
- padding: 0 1rem;
- }
+ }
+ .messages-list {
+ background-color: $uw-white;
+ grid-column: 1 / 5;
+ grid-row: 4 / 5;
+ margin-bottom: 0;
+ margin-top: 0;
+ padding: 0 1rem;
}
}
diff --git a/source/_patterns/03-layouts/header/header.twig b/source/_patterns/03-layouts/header/header.twig
index b20d89844a4545072c9f4467d8c1e0241f35b93f..16222ae5f16b9c58cd5c1d6acd7490f458f42e30 100644
--- a/source/_patterns/03-layouts/header/header.twig
+++ b/source/_patterns/03-layouts/header/header.twig
@@ -6,23 +6,34 @@
<div class="uw-header__wrapper">
{% include '@components/site-logo/site-logo.twig' %}
- {% block content %}
-
- {% endblock %}
{% include "@components/menu/menu--header/menu--header.twig" with {
'modifier_classes': header_modifier_classes,
'items': header_items
} %}
+ {% block content %}
+
+ {% endblock %}
+
</div>
+
{% include '@components/color-bar/color-bar.twig' with {
'faculty': faculty
}%}
- {% include "@components/menu/menu--horizontal/menu--horizontal.twig" with {
- 'modifier_classes': main_modifier_classes,
- 'items': nav_items
- }%}
- {% include "@components/menu/menu--secondary/menu--secondary.twig" with {
- 'modifier_classes': secondary_modifier_classes,
- 'items': secondary_items
- }%}
+
+
+ <div class="uw-header__site-name">
+ {% include '@components/site-name/site-name.twig' with {
+ 'site_name': 'PSYCHOLOGY'
+ } %}
+ </div>
+ <div class="uw-header__navigation">
+ {% include "@components/menu/menu--horizontal/menu--horizontal.twig" with {
+ 'modifier_classes': main_modifier_classes,
+ 'items': nav_items
+ }%}
+ {% include "@components/menu/menu--secondary/menu--secondary.twig" with {
+ 'modifier_classes': secondary_modifier_classes,
+ 'items': secondary_items
+ }%}
+ </div>
</header>
diff --git a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js
index 96347c0b5a4f4ec2160f95667a06c8b3eba29c43..3b8cb60dec30cdf6228f7a8fcd0b8dbeb34450cc 100644
--- a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js
+++ b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js
@@ -37,7 +37,7 @@
}
}
-
+
/* Close Submenu From Anywhere */
function closeSubmenu(e) {
diff --git a/source/_patterns/04-components/menu/menu--secondary/menu--secondary.yml b/source/_patterns/04-components/menu/menu--secondary/menu--secondary.yml
index 6b7470210fe018d45ea6305570a38c7febdfdaac..006313691f0f98efd95367b52916987a10f44de9 100644
--- a/source/_patterns/04-components/menu/menu--secondary/menu--secondary.yml
+++ b/source/_patterns/04-components/menu/menu--secondary/menu--secondary.yml
@@ -1,5 +1,5 @@
---
-secondary_modifier_classes: 'secondary'
+modifier_classes: 'secondary'
menu_name: 'horizontal'
is_demo: true
items:
diff --git a/source/_patterns/04-components/site-name/_site-name.scss b/source/_patterns/04-components/site-name/_site-name.scss
index 8323335c794855bf841d14e7cdd4ed4b5b83d7df..c5e86ccf83ad9bbb2e46b025e2942c7ea9871de9 100644
--- a/source/_patterns/04-components/site-name/_site-name.scss
+++ b/source/_patterns/04-components/site-name/_site-name.scss
@@ -1,6 +1,21 @@
// @file
// Styles for Site name.
- .site-name {
- padding:1rem;
- }
+$site-name-font-family: gesso-grayscale(gray-2);
+$site-name-font-size: gesso-font-size(5);
+
+.uw-site-name {
+
+ &__wrapper{
+ @include uw-contained-width();
+ }
+ &__link{
+ text-decoration:none;
+ }
+ &__text{
+ font-size:$site-name-font-size;
+ margin:0;
+ padding:0.5rem 0;
+
+ }
+}
\ No newline at end of file
diff --git a/source/_patterns/04-components/site-name/site-name.twig b/source/_patterns/04-components/site-name/site-name.twig
index 154cfd94beabaea775dd9b44234a0d006de61616..08e87dee0af53dc3b1414b961dc9672d289e1881 100644
--- a/source/_patterns/04-components/site-name/site-name.twig
+++ b/source/_patterns/04-components/site-name/site-name.twig
@@ -1,3 +1,9 @@
-<a class="site-name" href="{{ url }}" title="{{ 'Home'|t }}" rel="home">
- <h1 class="site-name__text">{{ site_name }}</h1>
-</a>
+<div class="uw-site-name">
+ <div class="uw-site-name__wrapper">
+ <a class="uw-site-name__link" href="{{ url }}" title="{{ 'Home'|t }}" rel="home">
+ <h1 class="uw-site-name__text">{{ site_name }}</h1>
+ </a>
+ </div>
+
+</div>
+