ISTWCMS-2304: Setting all breakpoints and ensuring that header is themed...

ISTWCMS-2304: Setting all breakpoints and ensuring that header is themed correctly at each breakpoint

components/_patterns/01-atoms/06-buttons/hamburger-button/_hamburger-button.scss

+.uw-header--buttons_hamburger {
+  border-left: 1px solid rgba(255, 255, 255, 0.2);
+  background-color: $uw-black;
+  font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
+  text-transform: uppercase;
+
+  .navigation-button {
+    height: auto;
+  }
+
+  span.navigation_toggle--text {
+    letter-spacing: 0.045rem;
+    font-size: 0.88889rem;
+    color: $uw-white;
+    text-decoration: none;
+    display: block;
+    padding: 2.25rem 0 0;
+    height: auto;
+    width: auto;
+    margin-top: -0.5rem
+  }
+
+  button {
+    background-color: inherit;
+    border-radius: none;
+    border: none;
+    cursor: pointer;
+    letter-spacing: 0.055rem;
+    padding: 0;
+    display: inline-block;
+    text-decoration: none;
+    user-select: none;
+    vertical-align: middle;
+    white-space: nowrap;
+    width: 100%;
+    height: 0;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    max-width: inherit;
+    margin: 0 auto;
+    color: $uw-white;
+    overflow: visible;
+  }
+
+  label {
+    display: block;
+    position: relative;
+    text-align: center;
+    margin-bottom: 0;
+    font-weight: 400;
+    font-size: 1.26562rem;
+  }
+
+  span.navigation-toggle--text {
+    text-decoration: none;
+    display: block;
+    padding: 2.25rem 0 0;
+    letter-spacing: 0.045rem;
+    font-size: 0.88889rem;
+  }
+
+  span.navigation-button--lines {
+    margin-left: -0.75rem;
+    position: absolute;
+    top: 33.5%;
+    left: 50%;
+    display: block;
+    text-shadow: rgba(0, 0, 0, 0.95) 1px 1px 2px;
+    height: 0.1rem;
+    width: 1.5rem;
+    background-color: #fff;
+    font-size: 0;
+  }
+
+  span.navigation-button--lines::before,
+  span.navigation-button--lines::after {
+    text-shadow: rgba(0, 0, 0, 0.95) 1px 1px 2px;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    content: '';
+    box-sizing: inherit;
+  }
+
+  span.navigation-button--lines::before {
+    transform: translateY(300%);
+  }
+
+  span.navigation-button--lines::after {
+    transform: translateY(-300%);
+  }
+}

components/_patterns/01-atoms/06-buttons/hamburger-button/hamburger-button.twig

+<div id="uw-header-hamburger-button" class="uw-header--buttons_hamburger">
+  <label for="responsive-nav-check" class="navigation-button" aria-label="navigation menu" aria-controls="navigation" aria-expanded="false" onclick title="Menu">
+    <span class="navigation_toggle--text">Menu</span>
+    <button tabindex="-1" class="navigation-button--toggle" aria-label="Navigation menu"> </button>
+    <span class="navigation-button--lines"></span>
+  </label>
+</div>
\ No newline at end of file

components/_patterns/01-atoms/09-menu/social-media/_social-media.scss

@@ -31,12 +31,12 @@ i.social-media-i {
 }
 
 i.social-media-i:hover {
-  .global-footer-social-media &{
+  .global-footer-social-media & {
     background-color: $uw-black;
     color: $uw-gold;
   }
 
-  .local-site-footer-social-media &{
+  .local-site-footer-social-media & {
     background-color: $uw-local-site-footer-background-color;
     color: $uw-white;
   }
@@ -45,11 +45,11 @@ i.social-media-i:hover {
 a.social-media-link {
   text-decoration: none;
 
-  .global-footer-social-media &{
+  .global-footer-social-media & {
     color: $uw-black;
   }
 
-  .local-site-footer-social-media &{
+  .local-site-footer-social-media & {
     color: $uw-local-site-footer-background-color;
   }
 }

components/_patterns/02-molecules/menus/social-media-menu/_social-media-menu.scss

@@ -14,6 +14,7 @@ ul.social-media-list {
 
 .uw-footer-social-media {
   text-align: right;
+
   .global-footer-social-media {
     background-color: $uw-black;
   }

components/_patterns/03-organisms/site/site-footer/_site-footer.scss

@@ -55,6 +55,7 @@ footer {
 
   grid-column: 3 / 4;
   grid-row: 1 / 2;
+
   .uw-footer-social-directory {
     text-align: right;
   }

components/_patterns/03-organisms/site/site-header/_site-header.scss

@@ -31,12 +31,11 @@
   }
 
   display: grid;
-  grid-template-columns: 90% 10%;
-  grid-template-rows: auto auto;
+  grid-template-columns: 60% 20% 20%;
+  grid-template-rows: auto;
 
-  @include medium {
+  @include large {
     grid-template-columns: 17% auto 10%;
-    grid-template-rows: auto;
   }
 }
 
@@ -46,10 +45,10 @@
     width: 17%;
   }
 
-  grid-column: 1 / 3;
+  grid-column: 1 / 2;
   grid-row: 1 / 2;
 
-  @include medium {
+  @include large {
     grid-column: 1 / 2;
     grid-row: 1 / 2;
   }
@@ -61,10 +60,14 @@
     width: 73%;
   }
 
-  grid-column: 1 / 2;
-  grid-row: 2 / 3;
+  visibility: hidden;
+  height: 0;
+  width: 0;
 
-  @include medium {
+  @include large {
+    visibility: visible;
+    width: 100%;
+    height: 100%;
     grid-column: 2 / 3;
     grid-row: 1 / 2;
   }
@@ -77,24 +80,44 @@
   }
 
   grid-column: 2 / 3;
-  grid-row: 2 / 3;
+  grid-row: 1 / 2;
 
-  @include medium {
+  @include large {
     grid-column: 3 / 4;
     grid-row: 1 / 2;
   }
 }
 
+.uw-header-grid .header-4 {
+  @supports not (display: grid) {
+    float: left;
+    width: 10%;
+  }
+
+  grid-column: 3 / 4;
+  grid-row: 1 / 2;
+
+  @include large {
+    display: none;
+  }
+}
+
 .uw-header--content {
   box-sizing: inherit;
 }
 
-.uw-header--buttons__search {
+.uw-header--search-button {
   text-transform: uppercase;
+  border-left: 1px solid rgba(255, 255, 255, 0.2);
+
+  @include large {
+    border-left: none;
+  }
 }
 
 .uw-header--logo {
   background-color: $uw-black;
+  padding-left: 1rem;
 }
 
 .uw-header-content ul {

components/_patterns/03-organisms/site/site-header/site-header.twig

@@ -9,8 +9,11 @@
           "menu_class": "global-menu"
         } %}
       </div>
-      <div id="uw-header-buttons" class="uw-header--buttons header-3">
-        {% include "@molecules/search-button/search-button.twig" %}
+      <div id="uw-header-search" class="uw-header--search-button header-3">
+        {% include "@atoms/06-buttons/search-button/search-button.twig" %}
+      </div>
+      <div id="uw-header-menu" class="uw-header--hamburger-button header-4">
+        {% include "@atoms/06-buttons/hamburger-button/hamburger-button.twig" %}
       </div>
   </div>
 </header>

templates/layout/page.html.twig

@@ -43,7 +43,6 @@
  * @see html.html.twig
  */
 #}
-<div class="breakpoint"></div>
 {% set main_nav = simplify_menu('main') %}
 
 {% include "@pages/_page.twig" with {