From fe2db35cd08dfaee8471dbd8af8dafd5fc2b399f Mon Sep 17 00:00:00 2001
From: ebremner <ebremner@uwaterloo.ca>
Date: Wed, 15 Nov 2017 14:28:48 -0500
Subject: [PATCH] ISTWCMS-2289: Completing footer and tweaks to the header
---
components/_patterns/00-base/_global.scss | 6 +++-
.../00-base/global/01-colors/_color-vars.scss | 2 +-
.../00-base/global/01-colors/colors.yml | 4 +--
.../09-menu/social-media/_social-media.scss | 9 +++---
.../_global-footer-menu.scss | 14 ++++++++-
.../_global-header-menu.scss | 4 +--
...edia-menu.scss => _social-media-menu.scss} | 2 +-
.../social-media-menu/social-media-menu.twig | 3 --
.../search-button/_search-button.scss | 16 ++--------
.../search-button/search-button.twig | 2 +-
.../site/site-footer/_site-footer.scss | 30 +++++++++++++------
.../site/site-footer/site-footer.twig | 3 ++
.../site/site-header/_site-header.scss | 14 ++++-----
13 files changed, 63 insertions(+), 46 deletions(-)
rename components/_patterns/02-molecules/menus/social-media-menu/{social-media-menu.scss => _social-media-menu.scss} (91%)
diff --git a/components/_patterns/00-base/_global.scss b/components/_patterns/00-base/_global.scss
index ab0dd175..0cd9c421 100644
--- a/components/_patterns/00-base/_global.scss
+++ b/components/_patterns/00-base/_global.scss
@@ -5,7 +5,7 @@
.layout-container {
display: grid;
grid-template-columns: auto;
- grid-template-rows: auto minmax(451.5px, auto) auto;
+ grid-template-rows: minmax(60px, auto) minmax(451.5px, auto) minmax(100px, auto);
}
.layout-container header {
@@ -23,6 +23,10 @@
grid-row: 3;
}
+html {
+ background-color: black;
+}
+
body {
font-family: georgia, "droid serif", "Times New Roman", Times, serif;
font-size: 1rem;
diff --git a/components/_patterns/00-base/global/01-colors/_color-vars.scss b/components/_patterns/00-base/global/01-colors/_color-vars.scss
index 067205f3..c8652d50 100644
--- a/components/_patterns/00-base/global/01-colors/_color-vars.scss
+++ b/components/_patterns/00-base/global/01-colors/_color-vars.scss
@@ -8,6 +8,6 @@ $gray-dark: #4c4c4c;
$gray-darker: #333;
$black: black;
$uw-black: #000;
-$uw-gray: #757575;
$uw-gold: #fdd54f;
$uw-white: #fff;
+$uw-grey: #787878;
diff --git a/components/_patterns/00-base/global/01-colors/colors.yml b/components/_patterns/00-base/global/01-colors/colors.yml
index e2081232..6fd832b6 100644
--- a/components/_patterns/00-base/global/01-colors/colors.yml
+++ b/components/_patterns/00-base/global/01-colors/colors.yml
@@ -19,12 +19,12 @@ items:
value: black
- name: $uw-black
value: '#000'
- - name: $uw-gray
- value: '#757575'
- name: $uw-gold
value: '#fdd54f'
- name: $uw-white
value: '#fff'
+ - name: $uw-grey
+ value: '#787878'
meta:
description: >-
To add to these items, use Sass variables that start with <code>$</code> in
diff --git a/components/_patterns/01-atoms/09-menu/social-media/_social-media.scss b/components/_patterns/01-atoms/09-menu/social-media/_social-media.scss
index 5d9f616e..f36a04c3 100644
--- a/components/_patterns/01-atoms/09-menu/social-media/_social-media.scss
+++ b/components/_patterns/01-atoms/09-menu/social-media/_social-media.scss
@@ -23,25 +23,23 @@ i.fdsu-snapchat::before {
}
i.social-media-i {
+ font-size: 2rem;
padding: 0.2rem;
- font-size: 2.02729rem;
border-radius: 3px;
color: #000;
+ font-style: normal;
background-color: $uw-white;
}
i.social-media-i:hover {
color: $uw-gold;
background-color: $uw-black;
- transition-property: color, background-color;
- transition-duration: 0.2s;
- transition-delay: 0s;
}
a.social-media-link {
color: black;
text-decoration: none;
- background-color: $uw-white;
+ background-color: $uw-black;
}
a.social-media-link:hover {
@@ -54,4 +52,5 @@ li.social-media-list-item {
list-style-type: none;
background-color: $uw-black;
margin: 0;
+ padding-top: 0.4rem;
}
diff --git a/components/_patterns/02-molecules/menus/global-footer-menu/_global-footer-menu.scss b/components/_patterns/02-molecules/menus/global-footer-menu/_global-footer-menu.scss
index 6d493d0a..969f2ac5 100644
--- a/components/_patterns/02-molecules/menus/global-footer-menu/_global-footer-menu.scss
+++ b/components/_patterns/02-molecules/menus/global-footer-menu/_global-footer-menu.scss
@@ -3,14 +3,26 @@
font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
}
+ul.global-footer-menu {
+ margin: 0;
+}
+
.global-footer-menu {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto;
- padding: 1rem 0;
list-style-type: none;
}
+.global-footer-menu li:nth-child(3n+1) {
+ border-left: 1px solid $uw-grey;
+}
+
+.global-footer-menu li:nth-child(n) {
+ padding-left: 0.8rem;
+ border-right: 1px solid grey;
+}
+
.global-footer-menu li:nth-child(1) {
grid-column: 1;
grid-row: 1;
diff --git a/components/_patterns/02-molecules/menus/global-header-menu/_global-header-menu.scss b/components/_patterns/02-molecules/menus/global-header-menu/_global-header-menu.scss
index c41cfa3d..5e584a12 100644
--- a/components/_patterns/02-molecules/menus/global-header-menu/_global-header-menu.scss
+++ b/components/_patterns/02-molecules/menus/global-header-menu/_global-header-menu.scss
@@ -5,8 +5,8 @@
font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
text-transform: uppercase;
letter-spacing: 0.045rem;
- font-size: 0.88889rem;
- margin-top: 1.2rem;
+ font-size: 1rem;
+ margin-top: 1rem;
}
.global-menu li {
diff --git a/components/_patterns/02-molecules/menus/social-media-menu/social-media-menu.scss b/components/_patterns/02-molecules/menus/social-media-menu/_social-media-menu.scss
similarity index 91%
rename from components/_patterns/02-molecules/menus/social-media-menu/social-media-menu.scss
rename to components/_patterns/02-molecules/menus/social-media-menu/_social-media-menu.scss
index e03dcefc..a0aff9b4 100644
--- a/components/_patterns/02-molecules/menus/social-media-menu/social-media-menu.scss
+++ b/components/_patterns/02-molecules/menus/social-media-menu/_social-media-menu.scss
@@ -11,7 +11,7 @@ ul.social-media-list {
flex-wrap: wrap;
width: 100%;
max-width: 95%;
- padding: 1rem 0;
+ padding-bottom: 0.5rem;
}
.uw-footer-social-media {
diff --git a/components/_patterns/02-molecules/menus/social-media-menu/social-media-menu.twig b/components/_patterns/02-molecules/menus/social-media-menu/social-media-menu.twig
index e70ea6fa..0714ae4a 100644
--- a/components/_patterns/02-molecules/menus/social-media-menu/social-media-menu.twig
+++ b/components/_patterns/02-molecules/menus/social-media-menu/social-media-menu.twig
@@ -7,7 +7,4 @@
}%}
{% endfor %}
</ul>
- <div class="uw-footer-social-directory">
- <a href="https://uwaterloo.ca/social-media/">@uwaterloo social directory</a>
- </div>
</div>
\ No newline at end of file
diff --git a/components/_patterns/02-molecules/search-button/_search-button.scss b/components/_patterns/02-molecules/search-button/_search-button.scss
index 02c46467..908d3659 100644
--- a/components/_patterns/02-molecules/search-button/_search-button.scss
+++ b/components/_patterns/02-molecules/search-button/_search-button.scss
@@ -1,20 +1,10 @@
-#uw-header-search-button {
- background-color: $uw-black;
-}
-
-.uw-header--buttons {
- border: none;
- display: block;
- width: 100%;
- height: 100%;
- background-color: $uw-black;
-}
-
.uw-header--buttons__search {
display: block;
border: none;
text-transform: uppercase;
text-align: center;
+ background-color: $uw-black;
+ padding-top: 0.4rem;
}
a.search-button {
@@ -32,5 +22,5 @@ a.search-button:hover {
.uw-header--buttons__search a.search-button .ifdsu {
display: block;
- font-size: 1.26562rem;
+ font-size: 1.3rem;
}
diff --git a/components/_patterns/02-molecules/search-button/search-button.twig b/components/_patterns/02-molecules/search-button/search-button.twig
index c1d5a1a4..1c844c66 100644
--- a/components/_patterns/02-molecules/search-button/search-button.twig
+++ b/components/_patterns/02-molecules/search-button/search-button.twig
@@ -1,4 +1,4 @@
<div id="uw-header-search-button" class="uw-header--buttons__search">
- <a href="/search_modal/nojs" title="" class="ctools-use-modal search-button ctools-use-modal-processed" aria-label="search" aria-expanded="false">
+ <a href="/search_modal/nojs" title="" class="search-button" aria-label="search" aria-expanded="false">
<span class="ifdsu fdsu-search-2"></span>search</a>
</div>
\ No newline at end of file
diff --git a/components/_patterns/03-organisms/site/site-footer/_site-footer.scss b/components/_patterns/03-organisms/site/site-footer/_site-footer.scss
index 73a22b9c..5a475e67 100644
--- a/components/_patterns/03-organisms/site/site-footer/_site-footer.scss
+++ b/components/_patterns/03-organisms/site/site-footer/_site-footer.scss
@@ -11,21 +11,33 @@ footer {
margin-left: auto;
margin-right: auto;
display: grid;
- grid-template-columns: auto auto auto;
+ grid-template-columns: 25% auto 30%;
grid-template-rows: auto;
+ padding: 1rem;
}
.uw-footer-grid .footer-1 {
- grid-column: 1;
- grid-row: 1;
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
}
-.uw-footer-flex .footer-2 {
- grid-column: 2;
- grid-row: 1;
+.uw-footer-grid .footer-2 {
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
}
-.uw-footer-flex .footer-3 {
- grid-column: 3;
- grid-row: 1;
+.uw-footer-grid .footer-3 {
+ grid-column: 3 / 4;
+ grid-row: 1 / 2;
+ text-align: right;
+}
+
+.uw-footer-social-directory a {
+ color: $uw-white;
+ text-decoration: none;
+}
+
+.uw-footer-social-directory a:hover {
+ color: $uw-gold;
+ text-decoration: underline;
}
diff --git a/components/_patterns/03-organisms/site/site-footer/site-footer.twig b/components/_patterns/03-organisms/site/site-footer/site-footer.twig
index 6e0d185e..208fab1e 100644
--- a/components/_patterns/03-organisms/site/site-footer/site-footer.twig
+++ b/components/_patterns/03-organisms/site/site-footer/site-footer.twig
@@ -13,6 +13,9 @@
{% include "@molecules/menus/social-media-menu/social-media-menu.twig" with {
"social_media": social_media
} %}
+ <div class="uw-footer-social-directory">
+ <a href="https://uwaterloo.ca/social-media/">@uwaterloo social directory</a>
+ </div>
</div>
</div>
</footer>
diff --git a/components/_patterns/03-organisms/site/site-header/_site-header.scss b/components/_patterns/03-organisms/site/site-header/_site-header.scss
index 9d060d54..5937a953 100644
--- a/components/_patterns/03-organisms/site/site-header/_site-header.scss
+++ b/components/_patterns/03-organisms/site/site-header/_site-header.scss
@@ -20,23 +20,23 @@
.uw-header-grid {
display: grid;
- grid-template-columns: auto auto auto;
+ grid-template-columns: 17% auto 10%;
grid-template-rows: auto;
}
.uw-header-grid .header-1 {
- grid-column: 1;
- grid-row: 1;
+ grid-column: 1 / 2;
+ grid-row: 1 / 2;
}
.uw-header-grid .header-2 {
- grid-column: 2;
- grid-row: 1;
+ grid-column: 2 / 3;
+ grid-row: 1 / 2;
}
.uw-header-grid .header-3 {
- grid-column: 3;
- grid-row: 1;
+ grid-column: 3 / 4;
+ grid-row: 1 / 2;
}
.uw-header--content {
--
GitLab