Adds error handling to z index function, set-color to retrieve color from color-scheme. Mixins for full-screen and flexbox centering, variables and maps for global variables. Base styles. hero component, and dropdown and navbar overrides for bootstrap styles. Updates footer component

wherehows-web/app/styles/abstracts/_all.scss

@@ -1,2 +1,3 @@
+@import "functions";
 @import "variables";
 @import "mixins";

wherehows-web/app/styles/abstracts/_functions.scss

@@ -33,7 +33,12 @@
 /// @return {Number}
 /// @require $z-indexes
 @function z($layer) {
-  @return map-get($z-indexes, $layer);
+  @if map-has-key($z-indexes, $layer) {
+    @return map-get($z-indexes, $layer);
+  }
+
+  @warn '#{$layer} not found in `$z-indexes`';
+  @return null;
 }
 
 /// Progressively add black as you decrease the proportion of the color
@@ -52,4 +57,13 @@
 /// @return {Color}
 @function tint($color, $percentage) {
   @return mix(white, $color, $percentage);
-}
+}
+
+/// Retrieves a color from the map $color-sheme
+/// @param {Color} $color - the color to get from the map
+/// @param {Hue} $hue - the hue to get from the specified color map
+/// @return {Color}
+/// @require $color-scheme
+@function set-color($color, $hue) {
+  @return map-get(map-get($color-scheme, $color), $hue);
+}

wherehows-web/app/styles/abstracts/_mixins.scss

@@ -36,3 +36,50 @@
   max-width: 100%;
   border-radius: 50%;
 }
+
+/// Breakpoint manager
+/// @param {String} $breakpoint - a string that maps to a breakpoint key in $breakpoints
+/// @requires $breakpoints
+@mixin respond-to($breakpoint) {
+  $breakpoint-query: map-get($breakpoints, $breakpoint);
+
+  @if $breakpoint-query {
+    $query: if(
+                    type-of($breakpoint-query) == 'string',
+                    unquote($breakpoint-query),
+                    inspect($breakpoint-query)
+    );
+
+    @media #{$query} {
+      @content;
+    }
+  } @else {
+    @error 'Could not find `#{$breakpoint}` in `$breakpoints`';
+  }
+}
+
+/// Applies flex styles that center an elements contents  on the main and cross axes
+///   i.e. vertically and horizontally
+@mixin flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/// Applies flex box centering using the flex-center mixin,
+///   but sets the main axis to column
+@mixin flex-column-center {
+  @include flex-center;
+  flex-direction: column;
+}
+
+/// Applies full -screen dimensions to the specified element
+@mixin full-screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  overflow-y: auto;
+}

wherehows-web/app/styles/abstracts/_variables.scss

@@ -2,35 +2,82 @@
 
 /// Regular font family
 /// @type List
-$text-font-stack: 'Source Sans Pro', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !default;
+$text-font-stack: (
+  'Source Sans Pro',
+  'Helvetica',
+  'Arial',
+  sans-serif
+) !default;
+
+/// Color Scheme
+/// @type Map
+/// @prop {String} key - Scheme name
+/// @prop {Map} hue - a qualifying hue for the enclosing color
+$color-scheme: (
+  red: (
+    red5: rgb(255, 44, 51)
+  ),
+  green: (
+    green5: rgb(70, 154, 31)
+  ),
+  blue: (
+    oxford: rgb(53, 75, 87),
+    curious: rgb(26, 161, 217)
+  ),
+  grey: (
+    light: rgb(237, 237, 237),
+    dark: rgb(68, 68, 68),
+    mid: rgb(153, 153, 153)
+  ),
+  black: (
+    dune: rgb(41, 39, 36)
+  ),
+  white: (
+    base: rgb(255, 255, 255),
+    catskill: rgb(243, 247, 249)
+  )
+);
 
 //===============
-/// Colors
+/// Theming Colors
 //===============
 
 /// Main brand color
 /// @type Color
-$brand-color: rgb(53, 75, 87) !default;
+$brand-color: set-color(blue, oxford);
+
+/// Secondary color
+/// @type Color
+$secondary-color: set-color(white, catskill);
 
 /// Copy text color
 /// @type Color
-$text-color: rgb(34, 34, 34) !default;
+$text-color: set-color(black, dune);
+
+/// Copy text color
+/// @type Color
+$text-invert-color: tint($text-color, 90%);
 
 /// Copy link color
 /// @type Color
-$link-color: rgb(26, 161, 217) !default;
+$link-color: set-color(blue, curious);
 
 /// Container's maximum width
 /// @type Length
 $max-width: 1180px !default;
 
+/// Navigation minimum height
+/// @type Length
+$nav-min-height: 50px !default;
+
 /// Breakpoints map
 /// @prop {String} keys - Keys are identifiers mapped to a given length
 /// @prop {Map} values - Values are actual breakpoints expressed in pixels
 $breakpoints: (
-        'small': 320px,
-        'medium': 768px,
-        'large': 1024px,
+  'small': (min-width: 320px),
+  'medium': (min-width: 768px),
+  'large': (min-width: 979px),
+  'huge': (min-width: 1024px)
 ) !default;
 
 /// Z-indexes map, gathering all Z layers of the application
@@ -38,12 +85,13 @@ $breakpoints: (
 /// @prop {String} key - Layer’s name
 /// @prop {Number} value - Z value mapped to the key
 $z-indexes: (
-        'modal': 5000,
-        'dropdown': 4000,
-        'default': 1,
-        'below': -1,
+  'toast': 6000,
+  'modal': 5000,
+  'dropdown': 4000,
+  'default': 0,
+  'below': -1
 ) !default;
 
 /// Absolute URL where all assets are served from
 /// @type String
-$base-url: '/assets/' !default;
+$base-url: '/assets/' !default;

wherehows-web/app/styles/base/_base.scss

@@ -7,9 +7,13 @@ html {
   box-sizing: border-box;
 }
 
+/**
+ * Apply padding to top and bottom to account for navigation and footer
+ */
 body {
-  padding-top: 54px;
-  padding-bottom: 50px;
+  padding-top: $nav-min-height;
+  padding-bottom: $nav-min-height;
+  background-color: set-color(white, catskill);
 }
 
 /**
@@ -26,10 +30,10 @@ body {
  * Basic styles for links
  */
 a {
-  color: $brand-color;
+  color: $link-color;
   text-decoration: none;
 
-  @include on-event {
+  @include on-event() {
     color: $text-color;
     text-decoration: none;
   }

wherehows-web/app/styles/base/_typography.scss

@@ -3,5 +3,9 @@
  */
 body {
   color: $text-color;
-  font: normal 150% / 1.4 $text-font-stack;
+  font: normal 100 150% / 1.4 $text-font-stack;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 100;
 }

wherehows-web/app/styles/components/_all.scss

@@ -1 +1,7 @@
-@import "avatar";
+@import "avatar";
+@import "navbar";
+@import "hero";
+
+@import "nacho-button";
+@import "nacho-global-search";
+@import "nacho-filter-rail";

wherehows-web/app/styles/components/_avatar.scss

@@ -1,6 +1,5 @@
-$avatar-size: 24px;
+$avatar-size: 18px;
 
 .user-avatar {
-  width: $avatar-size;
-  height: $avatar-size;
+  @include round-image($avatar-size);
 }

wherehows-web/app/styles/components/_hero.scss

@@ -0,0 +1,29 @@
+$height: 200px;
+$font-size: 36px;
+
+/**
+ * A hero Jumbotron like component that acts as a visual container for sub-components.
+ *   Sub-components will be visually centered along either axis
+ */
+.nacho-hero {
+  @include flex-column-center;
+  height: $height;
+  background-color: $brand-color;
+  color: $text-invert-color;
+
+  /**
+   * The contained element or body of the hero
+   */
+  &__content {
+    width: 40%;
+  }
+
+  /**
+ * The header element of the hero
+ */
+  &__header {
+    font-size: $font-size;
+    line-height: $font-size;
+    margin: 20px 0;
+  }
+}

wherehows-web/app/styles/components/_navbar.scss

@@ -1,9 +1,42 @@
+/**
+ * Override Bootstrap navigation class, .navbar, ruleset
+ */
+.navbar {
+  /**
+   * Explicitly sets the .navbar min-height to a shared value
+   */
+  min-height: $nav-min-height;
+  &-inverse {
+    /**
+     * Overrides the styling for navbar
+     */
+    background-color: $brand-color;
+    border-color: $brand-color;
+  }
+  .navbar-nav {
+    > .active {
+      /**
+       * Overrides the navbar styles on anchor elements
+       */
+      > a {
+        @include on-event(true) {
+          background-color: inherit;
+        }
+      }
+    }
+  }
+}
+
 /**
  * Allow bootstrap dropdown items to be rendered when the mouse hovers over
  * the .dropdown trigger
  */
-@media (min-width: 979px) {
-  .dropdown:hover > .dropdown-menu {
-    display: block;
+.dropdown {
+  @include respond-to('large') {
+    &:hover {
+      > .dropdown-menu {
+        display: block;
+      }
+    }
   }
 }

wherehows-web/app/templates/footer.hbs

@@ -2,7 +2,7 @@
   <div class="container">
     <ul class="nav navbar-nav navbar-left">
       <li>
-        <p class="navbar-text">WhereHows &copy;LinkedIn</p>
+        <p class="navbar-text">WhereHows by LinkedIn &reg;</p>
       </li>
       <li>
         <a class="navbar-link" href="https://www.github.com/linkedin/WhereHows/wiki">Help</a>