Implement the new home page design

 * Split out the header and footer of the design
   into their own templates to facilitate re-use in WordPress
   and other pages on the site

 * Rename the existing logo-only header to logo-header.

 * Rename 'nav-bar' to 'header' since that is a better description
   for how it is used

 * Move inline styles and scripts out of the template and into
   appropriate JS/SCSS files

h/static/scripts/browser-test.js

+// TODO - Make this a CommonJS module and move it into
+// the site JS?
+if (window.chrome !== undefined) {
+  var elements = document.getElementsByClassName(
+      "unhide-in-chrome");
+  for (var i=0; i<elements.length; i++) {
+    elements[i].classList.remove("hidden");
+  }
+  elements = document.getElementsByClassName(
+      "hide-in-chrome");
+  for (var i=0; i<elements.length; i++) {
+    elements[i].classList.add("hidden");
+  }
+}

h/static/styles/footer.scss

+@at-root {
+  .footer {
+    @include header-or-footer;
+
+    margin-top: 15px;
+    margin-bottom: 45px;
+  }
+
+  .social-media-link {
+    display: inline-block;
+    padding-left: 3px;
+    padding-right: 3px;
+    font-size: 16px;
+    text-decoration: none;
+  }
+}

h/static/styles/nav-bar.scss → h/static/styles/header.scss

-@at-root {
-  $nav-h-padding: 15px;
+@mixin header-or-footer {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 15px;
+  padding-right: 15px;
+  max-width: 1130px;
+
+  a {
+    color: $color-mine-shaft;
+  }
+  a:hover {
+    color: $color-cardinal;
+  }
+}
 
+@at-root {
   // desktop
-  .top-nav {
+  .header {
+    @include header-or-footer;
+
     display: flex;
     flex-direction: row;
     font-family: $font-family-site-sans;
-    margin-left: auto;
-    margin-right: auto;
     margin-top: 25px;
-    max-width: 1130px;
+    margin-bottom: 25px;
     align-items: center;
-    padding-left: $nav-h-padding;
-    padding-right: $nav-h-padding;
   }
 
-  .top-nav-controls {
+  .header-controls {
     display: flex;
     flex-direction: row;
     flex-grow: 1;
   }
 
-  .top-nav-logo {
+  .header-logo {
     display: flex;
     flex-direction: row;
-    font-size: $font-size-heading1;
+    font-size: $font-size-heading2;
     font-weight: bold;
     color: $color-mine-shaft;
     align-items: center;
     letter-spacing: -0.2;
   }
 
-  .top-nav-logo__dot {
+  .header-logo__dot {
     color: $color-cardinal;
   }
 
@@ -42,8 +53,8 @@
     margin-left: 10px;
     padding-left: 8px;
     padding-right: 8px;
-    padding-top: 4px;
-    padding-bottom: 4px;
+    padding-top: 7px;
+    padding-bottom: 7px;
     position: relative;
   }
 
@@ -132,7 +143,7 @@
 
   // phones and small tablets
   @media only screen and (max-width: 700px) {
-    .top-nav {
+    .header {
       flex-direction: column;
       align-items: stretch;
     }
@@ -169,14 +180,14 @@
     .nav-bar-toggle {
       display: initial;
       color: $color-mine-shaft;
-      font-size: $font-size-heading1;
+      font-size: $font-size-heading2;
     }
 
     .nav-bar__item {
       margin-top: 3px;
       margin-bottom: 3px;
 
-      font-size: $font-size-heading1;
+      font-size: $font-size-heading2;
     }
 
     .nav-bar-menu {
@@ -189,7 +200,7 @@
     }
 
     .nav-bar-menu__item {
-      font-size: $font-size-heading1;
+      font-size: $font-size-heading2;
     }
   }
 }

h/static/styles/home.scss

+@at-root {
+  .press-release-banner {
+    background-color: #f7f7f7;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+
+  .press-release-banner > p {
+    font-size: 21px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    text-align: center;
+  }
+
+  .home__content {
+    font-family: $font-family-site-sans;
+    margin-top: 95px;
+  }
+
+  .home__section {
+    max-width: 590px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .home__heading {
+    text-align: center;
+    font-size: $font-size-heading1;
+    line-height: $line-height-tall;
+    font-weight: bold;
+  }
+
+  // tagline explaining what H is
+  .home__tagline {
+    font-size: $font-size-heading1;
+    font-weight: $font-weight-light;
+    line-height: $line-height-tall;
+    text-align: center;
+  }
+
+  .home__intro-image {
+    width: 800px;
+    height: 424px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 135px;
+    margin-bottom: 40px;
+  }
+
+  .home__intro {
+    font-size: $font-size-heading2;
+    line-height: $line-height-tall;
+    margin-top: 14px;
+    margin-bottom: 14px;
+  }
+
+  .installer {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-top: 20px;
+    height: 33px;
+  }
+
+  .installer__browser-logo {
+    width: 22px;
+    height: 22px;
+    margin-right: 5px;
+  }
+
+  .installer__install-btn {
+    background-color: $color-cardinal;
+    border-radius: 3px;
+    color: white;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-weight: bold;
+    padding-left: 7px;
+    padding-right: 7px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
+
+  .installer__install-btn.is-hidden {
+    display: none;
+  }
+
+  .installer__install-btn:hover {
+    color: white;
+  }
+
+  .installer__alt {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
+  $proxy-border: 2px solid $color-alto;
+
+  .installer__proxy-form {
+    display: flex;
+  }
+
+  .installer__proxy-link-field {
+    border-top-left-radius: 2px;
+    border-bottom-left-radius: 2px;
+    border-left: $proxy-border;
+    border-top: $proxy-border;
+    border-bottom: $proxy-border;
+    border-right: none;
+    padding-left: 10px;
+  }
+
+  .installer__proxy-btn {
+    font-weight: bold;
+    background-color: $color-gallery;
+    border: 2px solid $color-alto;
+    border-top-right-radius: 2px;
+    border-bottom-right-radius: 2px;
+  }
+
+  .home__intro-container {
+    width: 100%;
+    background-color: $color-gallery;
+    border-top: 1px solid $color-alto;
+    border-bottom: 1px solid $color-alto;
+    padding-bottom: 65px;
+  }
+
+  .home__section--news {
+    margin-top: 70px;
+    margin-bottom: 130px;
+  }
+
+  .news-headline {
+  }
+
+  .news-item {
+  }
+
+  .news-item__date {
+  }
+
+  .news-item__heading {
+  }
+
+  .news-item__snippet {
+  }
+}

h/static/styles/site.scss

@@ -11,10 +11,14 @@
 @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,700);
 
 @import './group-form';
-@import './nav-bar';
+@import './header';
+@import './footer';
+
+// pages
+@import './home';
 
 body {
-  @extend .noise;
+  background-color: white;
   font-family: $sans-font-family;
 }
 

h/static/styles/util.scss

@@ -2,3 +2,14 @@
 .u-stretch {
   flex-grow: 1;
 }
+
+.u-center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.u-align-right {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}

h/static/styles/variables.scss

@@ -110,8 +110,12 @@ $title-font-weight:       bold;
 // made consistent
 $font-size-body1: 13px;
 $font-size-body2: 15px;
-$font-size-heading1: 19px;
+$font-size-heading1: 27px;
+$font-size-heading2: 19px;
 $font-family-site-sans: "Source Sans Pro", sans-serif;
+$font-weight-light: 300;
+
+$line-height-tall: 1.3em;
 
 
 // Stance Colors