Redesign app navigation

- Remove sticky header; it caused shifting in the nav's height which can
  be distracting.
- Wrap the navigation in a `nav` element (rather than `header`) which is
  more semantically correct and maps to the `navigation` role in the
  accessibility tree.
- Component-ize CSS: `avatar`, `logo` and `icon` are now reusable
  components.
- Begin using SVG `symbol` for icon and SVG assets, instead of Font
  Awesome or using the SVG through an `img` tag. This allows for CSS
  styles (e.g. `fill` color) and _greatly_ improves accessibility.
- Remove Twitter link (it is still listed in the footer).
- Maintain Pricing and Sign In with GitHub links across all breakpoints
  instead of removing them on mobile.
- Vastly simplify CSS, including removal of over-qualified selectors
  (e.g. `ul li a.auth`).
- Remove the need for page-based classes via
  `content_for :header_class`.

app/assets/javascripts/application.js

@@ -7,5 +7,3 @@
 
 //= require react_ujs
 //= require classnames
-
-//= require sticky-header

app/assets/stylesheets/application.scss

@@ -6,3 +6,4 @@
 @import "base/base";
 @import "components/components";
 @import "pages/pages";
+@import "utilities/utilities";

app/assets/stylesheets/base/_helpers.scss

@@ -19,10 +19,6 @@
 
 .content {
   @include outer-container;
-
-  &.repo-index {
-    padding-top: 10em;
-  }
 }
 
 .inner-wrapper {

app/assets/stylesheets/base/_variables.scss

@@ -18,6 +18,7 @@ $light-gold: lighten($gold, 50%);
 $tan: rgb(255, 220, 173);
 $white: #fff;
 $black: #000;
+$light-gray: rgb(230, 230, 230);
 
 $ruby: rgb(193, 30, 29);
 $javascript: rgb(246, 221, 0);
@@ -54,7 +55,6 @@ $medium-large-screen-size: 57.5em;
 $large-screen-size: 920px;
 
 $small-screen-only: new-breakpoint(max-width $small-screen-size 2);
-$medium-screen-down--header: new-breakpoint(max-width ($medium-header-breakpoint - 1px) 4);
 $medium-screen-down: new-breakpoint(max-width ($medium-screen-size - 1px) 4);
 $medium-screen-up: new-breakpoint(min-width $medium-screen-size 12);
 $medium-large-screen-only: new-breakpoint(max-width $medium-large-screen-size 8);
@@ -86,6 +86,3 @@ $font-size-xxlarge: 3.8em;
 $base-transition-timing: 0.2s;
 $base-easing: cubic-bezier(0.39, 0.575, 0.565, 1);
 $base-transition: all $base-transition-timing $base-easing;
-
-// Z-Indices
-$z-index-front: 100;

app/assets/stylesheets/components/_allowance.scss

@@ -3,6 +3,7 @@
   border-radius: 100px;
   color: $base-accent-color;
   line-height: 40px;
+  margin-right: $base-spacing;
   padding: 0 $small-spacing;
 
   strong {

app/assets/stylesheets/components/_app-nav.scss

@@ -0,0 +1,60 @@
+$_app-nav-layout-breakpoint: 42em;
+
+.app-nav {
+  font-weight: $font-weight-normal;
+
+  a {
+    color: $base-font-color;
+
+    &:hover {
+      color: $base-accent-color;
+    }
+  }
+}
+
+.app-nav__container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  padding: 2rem;
+
+  @media (min-width: $_app-nav-layout-breakpoint) {
+    flex-direction: row;
+  }
+}
+
+.app-nav__logo {
+  display: block;
+
+  @media (max-width: $_app-nav-layout-breakpoint) {
+    margin-bottom: $base-spacing;
+  }
+
+  @media (min-width: $_app-nav-layout-breakpoint) {
+    margin-right: $base-spacing;
+  }
+}
+
+.app-nav__item:not(:first-of-type) {
+  margin-left: $base-spacing;
+}
+
+.app-nav__app-items {
+  @media (max-width: $_app-nav-layout-breakpoint) {
+    margin-bottom: $base-spacing;
+  }
+}
+
+.app-nav__user-items {
+  align-items: center;
+  display: flex;
+
+  @media (min-width: $_app-nav-layout-breakpoint) {
+    margin-left: auto;
+  }
+}
+
+.app-nav__account-link {
+  align-items: center;
+  display: flex;
+}

app/assets/stylesheets/components/_avatar.scss

@@ -0,0 +1,24 @@
+$_avatar-size: 2rem;
+
+.avatar {
+  @include size($_avatar-size);
+  background-color: $light-gray;
+  border-radius: 50%;
+  display: inline-block;
+  overflow: hidden;
+  position: relative;
+  vertical-align: middle;
+
+  &::after {
+    @include position(absolute, 0);
+    border-radius: 50%;
+    box-shadow: inset 0 0 0 1px rgba($black, 0.1);
+    content: "";
+    pointer-events: none;
+  }
+
+  img {
+    @include size($_avatar-size);
+    object-fit: cover;
+  }
+}

app/assets/stylesheets/components/_button.scss

@@ -8,7 +8,6 @@
   font-family: $font-family-default;
   font-size: modular-scale(0);
   font-weight: $font-weight-normal;
-  line-height: 1;
   padding: modular-scale(-2) modular-scale(1);
   text-decoration: none;
   transition: background-color $base-transition-timing $base-easing,
@@ -56,4 +55,6 @@
 .button__icon {
   display: inline-block;
   margin-right: modular-scale(-6);
+  position: relative;
+  top: modular-scale(-11);
 }

app/assets/stylesheets/components/_components.scss

@@ -1,9 +1,12 @@
 @import "allowance";
+@import "app-nav";
+@import "avatar";
 @import "button";
 @import "code";
 @import "footer";
-@import "header";
+@import "icon";
 @import "inline-flash";
+@import "logo";
 @import "plan-markers";
 @import "pricing";
 @import "toggle_switch";

app/assets/stylesheets/components/_icon.scss

@@ -0,0 +1,4 @@
+.icon {
+  @include size(1em);
+  fill: currentcolor;
+}

app/assets/stylesheets/components/_logo.scss

@@ -0,0 +1,14 @@
+$_logo-aspect-ratio: 217 / 50;
+$_logo-height: 2.5rem;
+$_logo-color: $purple;
+
+.logo {
+  fill: $_logo-color;
+  height: $_logo-height;
+  transition: fill $base-transition-timing $base-easing;
+  width: $_logo-height * $_logo-aspect-ratio;
+
+  &:hover {
+    fill: shade($_logo-color, 15%);
+  }
+}

app/assets/stylesheets/utilities/_line-height.scss

@@ -0,0 +1,3 @@
+.line-height-zero {
+  line-height: 0;
+}

app/assets/stylesheets/utilities/_margin.scss

@@ -0,0 +1,3 @@
+.margin-right-x-small {
+  margin-right: $xsmall-spacing;
+}

app/assets/stylesheets/utilities/_utilities.scss

@@ -0,0 +1,2 @@
+@import "line-height";
+@import "margin";