styling

dev/scss/components/_global-head.scss

@@ -0,0 +1,62 @@
+.global-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+  align-items: center;
+  margin: 0 auto $gutter;
+  width: 83%;
+
+  > * { flex: 0 0 auto; }
+
+  .social-menu {
+    order: 1;
+    width: 100%;
+  }
+
+  .search-form  {
+    order: 2;
+    width: 100%;
+  }
+
+  .logo-banner {
+    order: 3;
+    width: 100%;
+  }
+
+  .header-menu {
+    order: 4;
+    width: 100%;
+  }
+
+}
+
+@media screen and (min-width: #{$screen-tablet}) {
+  .global-head {
+    width: $container-tablet;
+
+    .social-menu,
+    .search-form  {
+      flex: 1 1 auto;
+      width: auto;
+    }
+
+  }
+}
+
+@media screen and (min-width: #{$screen-tablet-lg}) {
+  .global-head {
+    width: $container-tablet-lg;
+  }
+}
+
+@media screen and (min-width: #{$screen-desktop}) {
+  .global-head {
+    width: $container-desktop;
+  }
+}
+
+@media screen and (min-width: #{$screen-desktop-lg}) {
+  .global-head {
+    width: $container-desktop-lg;
+  }
+}

dev/scss/components/_header-menu.scss

@@ -0,0 +1,15 @@
+.header-menu {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  line-height: 1;
+
+  li {
+    margin: 0;
+    padding: 5px 10px;
+  }
+}

dev/scss/components/_home-loop.scss

@@ -9,8 +9,9 @@
   }
 
   h1 {
-    margin: $gutter;
+    margin: 0;
     background-color: rgba($black, 0.15);
+    padding: $gutter;
     color: $white;
   }
 
@@ -23,7 +24,6 @@
     z-index: -1;
     width: 100%;
     height: auto;
-    object-fit: cover;
   }
 
 }

dev/scss/components/_search-form.scss

@@ -0,0 +1,24 @@
+.search-form {
+  [type="search"],
+  [type="text"] {
+    border-radius: 0;
+  }
+}
+
+@media screen and (min-width: #{$screen-tablet}) {
+  .search-form {
+    display: flex;
+    align-content: center;
+    align-items: center;
+    justify-content: flex-end;
+
+    [type="submit"] {
+      flex: 0 0 auto;
+    }
+
+    label {
+      flex: 1 1 auto;
+      max-width: 250px;
+    }
+  }
+}

dev/scss/components/_social-menu.scss

@@ -0,0 +1,16 @@
+.social-menu {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  line-height: 1;
+
+  li {
+    flex: 0 0 auto;
+    margin: 0;
+    padding: 2px 8px;
+  }
+}

dev/scss/elements/_header.scss

@@ -0,0 +1 @@
+// .global-head { }

dev/scss/main.scss

@@ -42,8 +42,11 @@
 // Components
 //     specific UI components. This is where majority of our work takes place
 //     and our UI components are often composed of Objects and Components
-@import 'components/main-nav';
+@import 'components/header-menu';
 @import 'components/home-loop';
+@import 'components/global-head';
+@import 'components/search-form';
+@import 'components/social-menu';
 
 // Utilities
 //     utilities and helper classes with ability to override anything which

dev/scss/tools/_mixins.scss

@@ -11,3 +11,26 @@
     }
   }
 }
+
+@mixin sr-only {
+  position: absolute;
+  border: 0;
+  padding: 0;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+  clip: rect(0, 0, 0, 0);
+
+  &.with-focus {
+    &:active,
+    &:focus {
+      position: static;
+      width: auto;
+      height: auto;
+      overflow: visible;
+      white-space: normal;
+      clip: auto;
+    }
+  }
+}

dev/scss/utilities/_helpers.scss

@@ -1,22 +1,4 @@
+.screen-reader-text,
 .sr-only {
-  position: absolute;
+  @include sr-only;
-  border: 0;
-  padding: 0;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  white-space: nowrap;
-  clip: rect(0, 0, 0, 0);
-
-  &.with-focus {
-    &:active,
-    &:focus {
-      position: static;
-      width: auto;
-      height: auto;
-      overflow: visible;
-      white-space: normal;
-      clip: auto;
-    }
-  }
 }

functions.php

@@ -20,6 +20,7 @@ if (function_exists('add_theme_support')) {
     'header-text'            => true,
   );
   add_theme_support( 'custom-header', $customHeaderArgs );
+  add_theme_support( 'html5', array( 'search-form' ) );
 }
 
 function ildi_nav($location='header-menu') {

global-head.php

@@ -1,4 +1,4 @@
-<header class="container">
+<header class="global-head">
   <a class="logo-banner" href="<?php echo home_url(); ?>">
     <img src="<?php header_image(); ?>" alt="<?php echo get_custom_header()->text; ?>">
   </a>

home.php

@@ -3,7 +3,7 @@
   <?php get_header(); ?>
   <body>
     <a class="skip-nav sr-only" href="#main-content">Skip to main</a>
-    <?php get_template_part('globalHead'); ?>
+    <?php get_template_part('global-head'); ?>
 
     <main id="main-content" class="container" role="main">
       <?php get_template_part('home-loop'); ?>

index.php

@@ -3,7 +3,7 @@
   <?php get_header(); ?>
   <body>
     <a class="skip-nav sr-only" href="#main-content">Skip to main</a>
-    <?php get_template_part('globalHead'); ?>
+    <?php get_template_part('global-head'); ?>
 
     <main id="main-content" class="container" role="main">