starting focused styling

dev/scss/components/_global-head.scss

@@ -3,40 +3,31 @@
   flex-wrap: wrap;
   align-content: center;
   align-items: center;
-  margin: 0 auto $gutter;
+  margin: 0 auto;
   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%;
+  > * {
+    flex: 0 0 auto;
   }
 
+  .logo-banner { order: 1; }
+  .search-form { order: 2; }
+  .header-menu { order: 3; }
+  .social-menu { order: 4; }
 }
 
 @media screen and (min-width: #{$screen-tablet}) {
   .global-head {
     width: $container-tablet;
 
+    .social-menu { order: 1; }
+    .search-form { order: 2; }
+    .logo-banner { order: 3; }
+    .header-menu { order: 4; }
+
     .social-menu,
     .search-form  {
-      flex: 1 1 auto;
+      flex: 1 0 auto;
       width: auto;
     }
 

dev/scss/components/_header-menu.scss

@@ -1,15 +1,63 @@
 .header-menu {
   display: flex;
-  align-content: center;
-  align-items: center;
-  justify-content: space-between;
-  margin: 0;
+  flex-direction: column;
+  align-content: flex-start;
+  align-items: flex-start;
+  justify-content: flex-start;
+  margin: 5px 0;
   padding: 0;
+  width: 100%;
   list-style: none;
   line-height: 1;
 
   li {
+    flex: 1 0 auto;
     margin: 0;
-    padding: 5px 10px;
+    padding: 0;
+    width: 100%;
+  }
+
+  a {
+    display: block;
+    padding: $gutter 0;
+    text-transform: uppercase;
+    text-decoration: none;
+    letter-spacing: 0.125ch;
+    color: $di-purple;
+    font-weight: 700;
+
+    &:hover,
+    &:active {
+      background-color: $di-purple;
+      color: $copy-light;
+    }
+  }
+}
+
+@media screen and (max-width: #{$screen-tablet - 1}) {
+  .header-menu {
+    margin-left: -$gutter;
+    width: calc(100% + #{$gutter * 2});
+
+    a {
+      padding-right: $gutter;
+      padding-left: $gutter;
+    }
+  }
+}
+
+@media screen and (min-width: $screen-tablet) {
+  .header-menu {
+    flex-direction: row;
+    align-content: center;
+    align-items: center;
+    justify-content: space-around;
+
+    li { width: auto; }
+
+    li,
+    a {
+      text-align: center;
+    }
   }
 }

dev/scss/components/_logo-banner.scss

@@ -0,0 +1,3 @@
+.logo-banner {
+  width: 100%;
+}

dev/scss/components/_search-form.scss

@@ -1,24 +1,25 @@
 .search-form {
-  [type="search"],
-  [type="text"] {
-    border-radius: 0;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  justify-content: flex-start;
+  margin: $gutter 0;
+  width: 100%;
+
+  [type="submit"] {
+    flex: 0 0 auto;
+    border-left-width: 0;
+  }
+
+  label {
+    flex: 1 1 auto;
+    width: 100%;
   }
 }
 
 @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;
-    }
+    label { max-width: 250px; }
   }
 }

dev/scss/components/_social-menu.scss

@@ -4,7 +4,8 @@
   align-items: center;
   justify-content: flex-start;
   margin: 0;
-  padding: 0;
+  padding: $gutter 0;
+  width: 100%;
   list-style: none;
   line-height: 1;
 
@@ -12,5 +13,32 @@
     flex: 0 0 auto;
     margin: 0;
     padding: 2px 8px;
+
+    &:first-of-type {
+      padding-left: 0;
+    }
+  }
+
+  a {
+    text-decoration: none;
+    color: $di-purple;
+    font-size: 14px;
+
+    &:hover,
+    &:active {
+      border-bottom: 1px solid $di-purple;
+      color: $di-purple;
+    }
+  }
+
+
+  footer & {
+    justify-content: flex-end;
+  }
+}
+
+@media screen and (max-width: #{$screen-tablet - 1}) {
+  .social-menu {
+    header & { display: none; }
   }
 }

dev/scss/elements/_inputs.scss

@@ -5,10 +5,21 @@ textarea,
 [type="search"],
 [type="tel"],
 [type="text"] {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 0;
+  border-color: $gray-dark;
+  background-color: $white;
   padding: 8px;
   width: 100%;
 }
 
+[type="submit"] {
+  border-color: $gray-dark;
+  background-color: $white;
+  padding: 8px;
+}
+
 .select-wrapper {
   padding: 7px 6px 6px;
   width: 100%;

dev/scss/main.scss

@@ -43,6 +43,7 @@
 //     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/header-menu';
+@import 'components/logo-banner';
 @import 'components/home-loop';
 @import 'components/global-head';
 @import 'components/search-form';

dev/scss/settings/_colors.scss

@@ -6,3 +6,9 @@ $black: #000;
 $copy-light: $white;
 $copy-gray: $gray-light;
 $copy-dark: $black;
+
+$di-purple: #561eae;
+$di-purple-light: #716f9f;
+
+$di-orange: #f60;
+$di-orange-light: #e68d48;

dev/scss/settings/_variables.scss

@@ -1,12 +1,12 @@
 $container-tablet: 90vw;
 $container-tablet-lg: 810px;
 $container-desktop: 1080px;
-$container-desktop-lg: 1680px;
+$container-desktop-lg: 1080px;
 
 $screen-tablet: 600px;
 $screen-tablet-lg: 900px;
 $screen-desktop: 1200px;
-$screen-desktop-lg: 1800px;
+$screen-desktop-lg: 1200px;
 
 $gutter: 15px;