Typography refresh (uber-archive#26)

* Typography last refresh with logo and badges

* sight touch up of descriptions

src/components/Badge.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function Bagdge({tag, key}) {
+	return (<div className="badge" key={key}>{tag}</div>);
+}

src/components/Home.js

@@ -1,13 +1,14 @@
 import React from 'react'
 
 import Footer from 'components/Footer'
-
+import Badge from './Badge.js';
 import lessons from 'mdRoutes'
 
 function Home() {
   return (
     <div className="Home f fcol fg">
       <div className="title">
+        <img src="/images/vis-logo.png" alt="vis-logo" />
         <h1>Vis Academy</h1>
         <p>Tutorials and classes prepared by the Uber visualization team</p>
       </div>
@@ -18,7 +19,9 @@ function Home() {
               <img src={d.image} alt={d.name} className="lesson-card__image" />
               <h3 className="lesson-card__name">{d.name}</h3>
               <p className="lesson-card__desc fg">{d.desc}</p>
-              <span className="lesson-card__get-started btn">{'GET STARTED!'}</span>
+              <div className="badges">
+                {(d.badges || []).map((d, i) => Badge({tag: d, key: i}))}
+              </div>
             </div>
           </a>
         ))}
@@ -31,3 +34,5 @@ function Home() {
 }
 
 export default Home
+
+// <span className="lesson-card__get-started btn">{'GET STARTED!'}</span>

src/mdRoutes.js

@@ -76,7 +76,8 @@ export default [{
 }, {
   name: 'Building a Geospatial App',
   desc: 'Learn how to create maps, layer data on top of them and draw charts with the Uber vis libraries.',
-  image: 'images/geospatial-app/geospatial-app.png', 
+  image: 'images/geospatial-app/geospatial-app.png',
+  badges: ['react-vis', 'react-map-gl', 'deck.gl'],
   path: '/building-a-geospatial-app',
   data: [
     {
@@ -141,8 +142,9 @@ export default [{
   ]
 }, {
   name: 'Building a Graph Vis',
-  desc: 'Learn how to create a graph visualization with d3-force layout.',
-  image: 'images/graph-vis/cover.png', 
+  desc: 'Learn how to create a graph visualization in webGL, with d3-force layout.',
+  image: 'images/graph-vis/cover.png',
+  badges: ['deck.gl'],
   path: '/graph-vis',
   data: [
     {
@@ -169,7 +171,8 @@ export default [{
 }, {
   name: 'Custom Layers',
   desc: 'Advanced topic: learn how to create your own deck.gl layers.',
-  image: 'images/custom-layers/cover.png', 
+  image: 'images/custom-layers/cover.png',
+  badges: ['deck.gl'],
   path: '/custom-layers',
   data: [
     {

src/styles/_index.scss

@@ -1,47 +1,67 @@
 @import "~react-vis/dist/main.scss";
 @import "./_variables.scss";
 
-.Home {
-  background-color: #E5E5E4;
-
+.title {
+  height: 300px;
+  width: 100%;
+  margin: 6em auto 1em;
+  max-width: 72rem;
+  img {
+    position: absolute;
+    z-index: -1;
+  }
+  h1, p {
+    margin-left: 213px;
+  }
   h1 {
-    font-size: 6em;
-    font-weight: 400;
+    font-size: 2em;
+    font-weight: 600;
   }
   p {
-    font-size: 1.6em;
-    line-height: 1.5;
+    font-size: 4em;
+    font-weight: 400;
   }
+}
 
-  h3 {
-    font-size: 1.8em;
-  }
+.badges {
+  position: absolute;
+  right: 1rem;
+  bottom: 1rem;
 }
 
-.title {
-  width: 100%;
-  text-align: center;
-  * {
-    margin: 1em auto;
-    max-width: 600px;
-  }
-  p {
-    font-size: 3em;
+.badge {
+  border: 1px solid #979797;
+  border-radius: 4px;
+  display: inline-block;
+  font-size: calc(5em / 9);
+  padding: 0 5px;
+  margin: 0 5px 0 0;
+  line-height: 2em;
+  text-transform: uppercase;
+  transition: color 0.5s, border-color 0.5s, background 0.5s;
+  &:hover {
+    background: white;
+    color: $primary !important;
   }
 }
 
 .lesson-card {
   background-color: white;
   color: #494949;
-
+  font-size: 1.5em;
   width: 20rem;
   max-width: 80vw;
   height: 30rem;
   margin: 2rem;
   padding: 1.5rem 1rem 1rem;
+  position: relative;
   box-shadow: 0 0 5px rgba(black, 0.2);
   transition: background-color 250ms, box-shadow 0.3s, color 250ms, transform 250ms;
 
+  h3 {
+    font-size: 1.2em;
+  }
+
   .btn {
     transition: color 250ms ease-in;
     padding: 0.5rem 2rem;
@@ -61,6 +81,10 @@
     .btn {
       color: white;
     }
+    .badge {
+      color: white;
+      border-color: white;
+    }
   }
 }
 
@@ -176,14 +200,27 @@ ul.insert {
 
 @media screen and (max-width: $mobile) {
   .Home {
-    h1 {
-      font-size: 3em;
-    }
     .title {
+      margin: 2rem auto;
+      h1 {
+        margin: 1rem 1rem 1rem 2rem ;
+      }
+      img {
+        height: 100px;
+      }
       p {
-        margin: 1em auto;
+        margin: 1rem 1rem 1rem 2rem ;
+        font-size: 1em;
         max-width: 80%;
       }
+      height: 100px;
+    }
+    .lesson-card {
+      margin: 1rem 2rem;
+      max-width: none;
+      img {
+        width: 50%;
+      }
     }
   }
 }