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;
+  }
+}