New navigation bar for the homepage

Update the style of the navigation bar on the homepage
to the new design from https://trello.com/c/h6kQMQG8/

h/static/scripts/dropdown-menu.js

+/**
+ * A simple drop-down menu controller.
+ *
+ * All elements within 'rootElement' with the class 'js-menu-toggle'
+ * become dropdown menu toggles that toggle their closest sibling
+ * element with a 'js-menu' class, or the first element within
+ * 'rootElement' that matches the selector set by 'data-menu-target'
+ * on the toggle element.
+ */
+function DropdownMenuController(rootElement) {
+  var menuToggles = rootElement.querySelectorAll('.js-menu-toggle');
+
+  function setupMenu(menuToggle) {
+    menuToggle.addEventListener('click', function (openEvent) {
+      openEvent.preventDefault();
+
+      var dropdown = menuToggle;
+      if (menuToggle.dataset.menuTarget) {
+        dropdown = rootElement.querySelector(menuToggle.dataset.menuTarget);
+      } else {
+        dropdown = dropdown.parentElement.querySelector('.js-menu');
+      }
+      if (!dropdown) {
+        throw new Error('Associated menu not found');
+      }
+
+      var isOpen = dropdown.classList.toggle('is-open');
+      if (isOpen) {
+        document.addEventListener('click', function listener(event) {
+          if (event.target === menuToggle || dropdown.contains(event.target)) {
+            return;
+          }
+          dropdown.classList.remove('is-open');
+          document.removeEventListener('click', listener);
+        });
+      }
+    });
+  }
+
+  for (var i=0; i < menuToggles.length; i++) {
+    setupMenu(menuToggles[i]);
+  }
+}
+
+module.exports = DropdownMenuController;

h/static/scripts/site.js

-// groups forms
 var CreateGroupFormController = require('./create-group-form');
+var DropdownMenuController = require('./dropdown-menu');
 var ShareGroupFormController = require('./share-group-form');
 
 function setupGroupsController(path) {
@@ -14,4 +14,6 @@ document.addEventListener('DOMContentLoaded', function () {
   if (document.location.pathname.indexOf('/groups') === 0) {
     setupGroupsController(document.location.pathname);
   }
+
+  new DropdownMenuController(document);
 });

h/static/styles/base.scss

@@ -2,6 +2,7 @@
 @import 'compass/reset/utilities';
 
 @import "./variables";
+@import "./util";
 
 /* Style input placeholders */
 @mixin placeholder {

h/static/styles/nav-bar.scss

+@at-root {
+  $nav-h-padding: 15px;
+
+  // desktop
+  .top-nav {
+    display: flex;
+    flex-direction: row;
+    font-family: $font-family-site-sans;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 25px;
+    max-width: 1130px;
+    align-items: center;
+    padding-left: $nav-h-padding;
+    padding-right: $nav-h-padding;
+  }
+
+  .top-nav-controls {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 1;
+  }
+
+  .top-nav-logo {
+    display: flex;
+    flex-direction: row;
+    font-size: $font-size-heading1;
+    font-weight: bold;
+    color: $color-mine-shaft;
+    align-items: center;
+    letter-spacing: -0.2;
+  }
+
+  .top-nav-logo__dot {
+    color: $color-cardinal;
+  }
+
+  .hiring-banner {
+    font-size: $font-size-body2;
+    border: 1px solid $color-alto;
+    border-radius: 2px;
+    margin-left: 10px;
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    position: relative;
+  }
+
+  .hiring-banner__arrow-svg {
+    position: absolute;
+    left: -5px;
+    width: 5px;
+    height: 20px;
+  }
+
+  .hiring-banner__arrow {
+    fill: white;
+    stroke: $color-alto;
+  }
+
+  .nav-bar-toggle {
+    display: none;
+  }
+
+  .nav-bar {
+    display: flex;
+    flex-direction: row;
+    list-style-type: none;
+    margin-top: 0px;
+    margin-bottom: 0px;
+  }
+
+  .nav-bar__item {
+    font-size: $font-size-body2;
+    margin-left: 12px;
+    margin-right: 12px;
+    color: $color-mine-shaft;
+  }
+
+  .nav-bar-menu__indicator::after {
+    color: $color-silver-chalice;
+    content: "\2304"; // 'Down Arrowhead'
+
+    // align the cheveron for the drop-down menu
+    // indicator with the middle of the adjacent
+    // menu item text
+    position: relative;
+    top: -3px;
+  }
+
+  .nav-bar-menu {
+    background-color: white;
+    border: 1px solid $color-alto;
+    border-radius: 2px;
+    display: none;
+    margin-top: 3px;
+    position: absolute;
+    list-style-type: none;
+
+    padding-left: 12px;
+    padding-right: 12px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+
+    z-index: 1;
+  }
+
+  .nav-bar-menu.is-open {
+    display: block;
+    font-size: $font-size-body2;
+  }
+
+  .nav-bar-menu__item {
+    padding-top: 3px;
+    padding-bottom: 3px;
+  }
+
+  .nav-bar-menu__separator {
+    border-bottom: 1px solid $color-gallery;
+    margin-bottom: 10px;
+    margin-top: 10px;
+  }
+
+  .nav-bar__item--login {
+    color: $color-silver-chalice;
+
+    & > a {
+      color: $color-cardinal;
+    }
+  }
+
+  // phones and small tablets
+  @media only screen and (max-width: 700px) {
+    .top-nav {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .nav-bar-container {
+      overflow: hidden;
+      margin-top: 10px;
+      max-height: 0px;
+      transition: max-height .3s ease-in;
+    }
+
+    .nav-bar-container.is-open {
+      max-height: 800px;
+    }
+
+    .nav-bar {
+      display: flex;
+      flex-direction: column;
+      background-color: $color-gallery;
+      padding-left: 3px;
+      padding-right: 3px;
+      padding-top: 15px;
+      padding-bottom: 15px;
+
+      position: relative;
+      top: -400px;
+      transition: top .3s ease-in;
+    }
+
+    .is-open > .nav-bar {
+      top: 0px;
+    }
+
+    .nav-bar-toggle {
+      display: initial;
+      color: $color-mine-shaft;
+      font-size: $font-size-heading1;
+    }
+
+    .nav-bar__item {
+      margin-top: 3px;
+      margin-bottom: 3px;
+
+      font-size: $font-size-heading1;
+    }
+
+    .nav-bar-menu {
+      background-color: transparent;
+      position: relative;
+
+      border: none;
+      padding-left: 0px;
+      padding-bottom: 10px;
+    }
+
+    .nav-bar-menu__item {
+      font-size: $font-size-heading1;
+    }
+  }
+}

h/static/styles/site.scss

@@ -8,7 +8,10 @@
 @import './share-link';
 
 // website-specific components
+@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,700);
+
 @import './group-form';
+@import './nav-bar';
 
 body {
   @extend .noise;

h/static/styles/util.scss

+// Utility classes for layout
+.u-stretch {
+  flex-grow: 1;
+}

h/static/styles/variables.scss

@@ -4,7 +4,9 @@
 $white: #fff !default;
 $black: #000 !default;
 
-// GRAYS
+
+// Grays
+// ---------------------
 $gray: #777 !default;
 $gray-darker: #333;
 $gray-dark: #585858;
@@ -19,10 +21,14 @@ $color-silver-chalice: #a6a6a6;
 $color-silver: #bbb;
 $color-alto: #dedede;
 $color-mercury: #e2e2e2;
+$color-gallery: #ececec;
 $color-seashell: #f1f1f1;
 $color-wild-sand: #f5f5f5;
 
-//COLORS
+
+// Colors
+// ---------------------
+$color-cardinal: #bd1c2b;
 $brand-color: #bd1c2b !default;
 
 $button-text-color: $gray-dark !default;
@@ -60,15 +66,19 @@ $mask-end-color: $white !default;
   }
 }
 
+
 // Scaffolding
 // -------------------------
 $body-background:        $white !default;
 $text-color:             $gray-dark !default;
 
-//LINKS
+
+// Links
+// -------------------------
 $link-color:             $brand-color !default;
 $link-color-hover:       color-weight($brand-color, 700) !default;
 
+
 // Typography
 // -------------------------
 $sans-font-family:        "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !default;
@@ -92,12 +102,27 @@ $body2-line-height:       1.4em;
 $title-font-size:         20px;
 $title-font-weight:       bold;
 
-//STANCE COLORS
+
+// Front page typography
+// -------------------------
+// These are part of the new design at https://trello.com/c/h6kQMQG8/187-new-homepage-design)
+// and the styles/sizes across the sidebar, site, frontpage and blog need to be
+// made consistent
+$font-size-body1: 13px;
+$font-size-body2: 15px;
+$font-size-heading1: 19px;
+$font-family-site-sans: "Source Sans Pro", sans-serif;
+
+
+// Stance Colors
+// -------------------------
 $positive: #3aab39;
 $negative: #d11c2b;
 $neutral: #0171ba;
 
-//OTHER VARIABLES
+
+// Other Variables
+// -------------------------
 $bucket-bar-width: 22px;
 $highlight-color: rgba(255, 255, 60, 0.3);
 $highlight-color-second: rgba(206, 206, 60, 0.4);