ISTWCMS-2289: Completing footer and tweaks to the header

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;

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;

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

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;
 }

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;

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 {

components/_patterns/02-molecules/menus/social-media-menu/social-media-menu.scss → 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 {

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

components/_patterns/02-molecules/search-button/_search-button.scss

-#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;
 }

components/_patterns/02-molecules/search-button/search-button.twig

 <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

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;
 }

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>

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 {