ISTWCMS-3597: adding styling for responsive header and colour bar

source/_patterns/03-layouts/header/_header.scss

@@ -8,33 +8,58 @@
   &__wrapper {
     display: grid;
     font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
-    grid-template-columns: auto 12.5rem 50.5rem auto;
+    grid-template-columns: 100%;
     margin-left: auto;
     margin-right: auto;
     padding: 1rem 0 0;
     position: relative;
 
+    @include large {
+      grid-template-columns: auto 12.5rem 50.5rem auto;
+    }
+
     .uw-site-logo {
-      grid-column: 2 / 3;
+      grid-column: 1 / 5;
       grid-row: 1 / 2;
       padding: 1rem 0;
+      text-align: center;
+
+      @include large {
+        grid-column: 2 / 3;
+        grid-row: 1 / 2;
+      }
     }
 
     .uw-header-menu {
-      grid-column: 3 / 4;
-      grid-row: 1 / 2;
-      padding-top: 1.2rem;
+      grid-column: 1 / 5;
+      grid-row: 2 / 3;
+      padding: 1rem 0;
+
+      @include large {
+        grid-column: 3 / 4;
+        grid-row: 1 / 2;
+      }
     }
 
     .uw-colour-bar {
       grid-column: 1 / 5;
-      grid-row: 2 / 3;
+      grid-row: 3 / 4;
       padding-top: 1rem;
+
+      @include large {
+        grid-column: 1 / 5;
+        grid-row: 2 / 3;
+      }
     }
 
     .uw-main-nav {
       grid-column: 1 / 5;
-      grid-row: 3 / 4;
+      grid-row: 4 / 5;
+
+      @include large {
+        grid-column: 1 / 5;
+        grid-row: 3 / 4;
+      }
     }
 
     .messages-list {

source/_patterns/04-components/site-logo/site-logo.twig

 <div class="uw-site-logo">
   <a class="uw-site-logo__link" href="https://uwaterloo.ca" title="{{ 'Home'|t }}" rel="home"></a>
-</div>
\ No newline at end of file
+</div>