Merge pull request #306 from nypublicradio/bono/DS-1003

DS-1003: Header style updates to the home page

README.md

@@ -16,7 +16,7 @@ Fortunately, `publisher` has its own set of easy-to-follow getting started instr
 You will need the following software properly installed on your computer. Please follow all the directions as written on the websites of these projects and do not neglect to install their dependencies.
 
 * [Git](http://git-scm.com/downloads)
-* Node version 8 (install using [nvm](https://github.com/nvm-sh/nvm#installing-and-updating))
+* Node version 10.0.0 (install using [nvm](https://github.com/nvm-sh/nvm#installing-and-updating))
 * [Ember CLI](https://ember-cli.com/user-guide/#getting-started) (>= 2.6.0)
 * [Grunt](http://gruntjs.com/getting-started)
 * [Yarn](https://classic.yarnpkg.com/en/docs/install/#mac-stable)
@@ -33,7 +33,7 @@ We use [modernizr](https://modernizr.com/) to detect for certain browser feature
 2. `$ git checkout <working branch>`
 3. `$ cp .env.sample .env`
 4. Edit `.env` with your `publisher` app location if you do _not_ want to use Publisher's demo environment, which is the default in `.env.sample`.
-5. `$ yarn`
+5. `$ yarn install`
 6. `$ npm install [email protected]` :point-left: version can be unpinned if `wnyc-web-client` is migrated to Node >=v10
 7. `$ npx grunt modernizr:dist`
 

app/styles/legacy/_home-compat.scss

@@ -7,8 +7,8 @@
 
 #wnyc_home .story-wrapper {
   h2 > a {
-    display: block;
-    border: none;
+    display: inline;
+    //border: none;
 
     &:hover {
       text-decoration: none;
@@ -260,7 +260,20 @@ body.ember-application {
   }
 
   #wnyc_home h2 {
-    font-weight: bold;
+    font-weight: 600;
+    letter-spacing: 0.1px;
+    font-size: 20px;
+    line-height: 1.25;
+    color: #333;
+    background-color: transparent;
+      & a{
+        text-decoration: none;
+        transition: border-color 250ms ease, color 250ms ease;
+        border-bottom: 1px solid rgba($blue, 0);
+        &:active, &:hover { outline: 0; }
+        &:focus, &:hover { border-bottom-color: $blue; }
+        &:hover { color: $blue; }
+      }
   }
 
   .story-wrapper {
@@ -286,14 +299,25 @@ body.ember-application {
     }
   }
 
-  @media screen and (min-width:800px) {
-    #home-primary {
-      h2 {
-        font-size: 20px;
-      }
+  #wnyc_home{
+    @media screen and (min-width:800px) {
+      #home-primary, #home-secondary, .shelf {
+        h2 {
+          font-size: 1.5rem;
+          line-height: 1.425;
+        }
 
-      .image {
-        border-radius: 3px 0 0 3px;
+        .image {
+          border-radius: 3px 0 0 3px;
+        }
+      }
+      #home-secondary h2{
+        font-size: 1.25rem;
+        line-height: 1.3;
+
+      }
+      .shelf h2{
+        font-size: 14px;
       }
     }
   }

app/styles/legacy/_screen.scss

@@ -276,7 +276,12 @@ h2.headline.norule {
   text-transform: none;
 }
 
-h2 a, h3 a, h4 a {
+h2 a {
+  color: #333;
+  text-decoration: none;
+}
+
+h3 a, h4 a {
   color: #000;
   text-decoration: none;
 }