ISTWCMS-2286: completing grid lay, fixing colour variables and spacing

components/_patterns/00-base/_global.scss

@@ -2,7 +2,7 @@
   display: none;
 }
 
-html.uw_html {
+html.uw-html {
   background-color: black;
 }
 
@@ -31,6 +31,7 @@ body {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
+  padding-top: 2rem;
 }
 
 .layout-container .block-site-footer-block {

components/_patterns/00-base/global/01-colors/_color-vars.scss

@@ -11,3 +11,7 @@ $uw-black: #000;
 $uw-gold: #fdd54f;
 $uw-white: #fff;
 $uw-grey: #787878;
+$uw-main-menu-hover: #dfdfdf;
+$uw-main-menu-border: #eee;
+$uw-main-menu-active: #eee;
+$uw-main-menu-active-border: #4e4e4e;

components/_patterns/00-base/global/01-colors/colors.yml

@@ -25,6 +25,14 @@ items:
     value: '#fff'
   - name: $uw-grey
     value: '#787878'
+  - name: $uw-main-menu-hover
+    value: '#dfdfdf'
+  - name: $uw-main-menu-border
+    value: '#eee'
+  - name: $uw-main-menu-active
+    value: '#eee'
+  - name: $uw-main-menu-active-border
+    value: '#4e4e4e'
 meta:
   description: >-
     To add to these items, use Sass variables that start with <code>$</code> in

components/_patterns/02-molecules/menus/main-menu/_00-main-menu.scss → components/_patterns/02-molecules/menus/main-menu/_main-menu.scss

 .nav-main {
   max-width: 93%;
-  background-color: #fff;
+  background-color: $uw-white;
 }
 
 ul.main-menu {
@@ -16,27 +16,27 @@ ul.main-menu {
     position: relative;
 
     a {
-      border-right: solid 5px #eee;
-      border-bottom: solid 1px #eee;
+      border-right: solid 5px $uw-main-menu-border;
+      border-bottom: solid 1px $uw-main-menu-border;
       display: block;
       text-decoration: none;
-      padding: .5rem;
+      padding: 0.5rem;
       overflow: hidden;
       text-overflow: ellipsis;
-      font-family: "BureauGrot Book",impact,"avenir next condensed heavy","Droid Sans",sans-serif;
-      font-size: .79012rem;
+      font-family: "BureauGrot Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
+      font-size: 0.8rem;
       color: $uw-black;
     }
 
     a:active {
-      background-color: #eee;
-      border-color: #4e4e4e;
-      color: #000;
+      background-color: $uw-main-menu-active;
+      border-color: $uw-main-menu-active-border;
+      color: $uw-white;
     }
 
     a:hover {
-      background-color: #DFDFDF;
-      border-color: #000;
+      background-color: $uw-main-menu-hover;
+      border-color: $uw-black;
     }
   }
 }
@@ -45,6 +45,6 @@ ul.main-menu li::after {
   content: "";
   display: block;
   position: absolute;
-  right: .8rem;
-  top: .9rem;
+  right: 0.8rem;
+  top: 0.9rem;
 }