updates header

_includes/header.html

@@ -18,7 +18,7 @@
       <div class="trigger">
         {% for my_page in site.pages %}
           {% if my_page.title %}
-          <a class="page-link" href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a>
+          <a class="page-link{% if page.url == my_page.url %} page-link-active{% endif %}" href="{{ my_page.url | prepend: site.baseurl }}">{{ my_page.title }}</a>
           {% endif %}
         {% endfor %}
       </div>

_sass/_layout.scss

@@ -2,8 +2,9 @@
  * Site header
  */
 .site-header {
-    border-top: 5px solid $grey-color-dark;
-    border-bottom: 1px solid $grey-color-light;
+    background-color: $brand-yellow;
+    border-bottom: 3px solid #000;
+    padding: 5px 0;
     min-height: 56px;
 
     // Positioning context for the mobile navigation icon
@@ -20,7 +21,7 @@
 
     &,
     &:visited {
-        color: $grey-color-dark;
+        color: #000;
     }
 }
 
@@ -41,8 +42,14 @@
         &:not(:last-child) {
             margin-right: 20px;
         }
+        &:hover,
+        &.page-link-active {
+            border-bottom: 3px solid;
+            text-decoration: none;
+        }
     }
 
+
     @include media-query($on-palm) {
         position: absolute;
         top: 9px;