Merge branch 'develop' into fix/favicon-urls

assets/styles/base/type.scss

@@ -34,7 +34,7 @@ strong {
   font-size: calculateRem(50);
   color: $red;
   letter-spacing: 4px;
-  line-height: 1.1;
+  line-height: 1;
   transition: font-size 0.2s ease, letter-spacing 0.2s ease;
   background-repeat: no-repeat;
   background-position: top center;

assets/styles/base/variables.scss

@@ -17,6 +17,8 @@ $navy: #1c2449;
 $navy-dark: #0c143a;
 $red: #d4434a;
 $dark-red: #AA2E49;
+$orange: #DC6008;
+$turquoise: #1FB3C9;
 
 // text
 $body-font-size: 16;
@@ -26,5 +28,6 @@ $secondary-font: 'bebas_neuebold', sans-serif;
 
 // layout
 $container-width: 740;
+$big-container-width: 1008;
 $browse-left-width: 200;
 $container-padding: 24;

components/pageHeader/index.js

@@ -1,25 +1,37 @@
 import React from 'react';
-import AnchorLink from 'react-anchor-link-smooth-scroll';
 import getConfig from 'next/config';
+import PageHeaderNav from '../pageHeaderNav';
 import './style.scss';
 
 const { publicRuntimeConfig } = getConfig();
 
 const PageHeader = () => (
   <div className="page-header" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/header-bg.jpg)` }}>
-    <div className="container">
+    <div className="sticky-header">
-      <nav className="page-header-nav">
+      <div className="container">
-        <AnchorLink href="#resources">Resources</AnchorLink>
+        <div className="logo">
-        <AnchorLink href="#browse">Browse Archives</AnchorLink>
+          <img src={`${publicRuntimeConfig.subDirPath}/static/img/ETHPrize-logo.png`} alt="ETHPrize logo" />
-      </nav>
+        </div>
-      <img className="logo" src={`${publicRuntimeConfig.subDirPath}/static/img/ETHPrize-logo.png`} alt="ETHPrize logo" />
+        <PageHeaderNav />
-      <h1 className="main-heading" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/heading-textured-bg.jpg)` }}>
+      </div>
-        Eth Report 2018
+    </div>
-      </h1>
+    <img className="page-header-bg" src={`${publicRuntimeConfig.subDirPath}/static/img/header-bg.jpg`} alt="Header background" />
-      <p>
+    <div className="inline-header">
-        We&rsquo;ve interviewed 100+ developers to showcase the biggest opportunities in the
+      <div className="container">
-        Ethereum ecosystem
+        <div className="logo">
-      </p>
+          <img src={`${publicRuntimeConfig.subDirPath}/static/img/ETHPrize-logo.png`} alt="ETHPrize logo" />
+        </div>
+        <div className="page-header-content">
+          <h1 className="main-heading" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/heading-textured-bg.jpg)` }}>
+            Eth Report <br />2018
+          </h1>
+          <p>
+            We&rsquo;ve interviewed 100+ developers to showcase the biggest opportunities in the
+            Ethereum ecosystem
+          </p>
+        </div>
+        <PageHeaderNav />
+      </div>
     </div>
   </div>
 );

components/pageHeader/style.scss

@@ -1,16 +1,22 @@
 @import './assets/styles/global.scss';
 
 .page-header {
+  position: relative;
   background-color: $blue;
   background-image: url('/static/img/header-bg.jpg');
   background-position: center;
   background-size: cover;
-  padding: calculateRem(24) 0;
+  padding: calculateRem(48) 0 calculateRem(80);
-  text-align: center;
 
-  .logo {
+  @media (min-width: $desktop) {
-    width: calculateRem(116);
+    // Need important to override inline style
-    margin-bottom: calculateRem(24);
+    background: none !important;
+    overflow: hidden;
+    padding-top: calculateRem(36);
+  }
+
+  .logo img {
+    width: calculateRem(80);
   }
 
   h1 {
@@ -18,29 +24,79 @@
   }
 
   p {
+    margin-bottom: calculateRem(32);
+
+    @media (min-width: $desktop) {
+      width: calculateRem(336);
+      margin-left: calculateRem(94);
+    }
+  }
+}
+
+.inline-header {
+
+  .logo {
+    text-align: center;
     margin-bottom: calculateRem(24);
   }
-}
 
-.page-header-nav {
+  @media (min-width: $desktop) {
-  margin-bottom: calculateRem(32);
+    padding: calculateRem(280) 0 calculateRem(140);
 
-  a {
+    .logo,
-    font-family: $secondary-font;
+    .page-header-nav {
-    color: #fff;
+      display: none;
-    text-decoration: none;
-    margin: 0 calculateRem(8);
-    font-size: calculateRem(20);
-    text-shadow: 0 0 11px #000;
-    padding: calculateRem(8);
-    letter-spacing: .08em;
-
-    @media (min-width: $tablet) {
-      font-size: calculateRem(24);
     }
 
-    &:hover {
+    .container {
-      text-decoration: underline;
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+
+.page-header-bg {
+  display: none;
+
+  @media (min-width: $desktop) {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: -1;
+    height: 100%;
+  }
+
+  @media (min-width: $desktop) {
+    min-height: calculateRem(808);
+  }
+}
+
+.sticky-header {
+  display: none;
+
+  @media (min-width: $desktop) {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1;
+    padding: calculateRem(32) 0;
+    background: -moz-linear-gradient(top, rgba(28, 36, 73, 0.65) 1%, rgba(28, 36, 73, 0) 68%, rgba(28, 36, 73, 0) 100%);
+    background: -webkit-linear-gradient(top, rgba(28, 36, 73, 0.65) 1%, rgba(28, 36, 73, 0) 68%, rgba(28, 36, 73, 0) 100%);
+    background: linear-gradient(to bottom, rgba(28, 36, 73, 0.65) 1%, rgba(28, 36, 73, 0) 68%, rgba(28, 36, 73, 0) 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a61c2449', endColorstr='#001c2449', GradientType=0);
+
+    .container {
+      max-width: calculateRem($big-container-width);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .logo {
+      padding-top: calculateRem(4);
     }
   }
 }

components/pageHeaderNav/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import AnchorLink from 'react-anchor-link-smooth-scroll';
+import './style.scss';
+
+const PageHeaderNav = () => (
+  <nav className="page-header-nav">
+    <AnchorLink href="#resources">Resources</AnchorLink>
+    <AnchorLink href="#browse">Browse Archives</AnchorLink>
+  </nav>
+);
+
+export default PageHeaderNav;

components/pageHeaderNav/style.scss

@@ -0,0 +1,20 @@
+@import './assets/styles/global.scss';
+
+.page-header-nav a {
+  font-family: $secondary-font;
+  color: #fff;
+  text-decoration: none;
+  margin-right: calculateRem(32);
+  font-size: calculateRem(18);
+  text-shadow: 0 0 11px #000;
+  letter-spacing: .08em;
+
+  @media (min-width: $desktop) {
+    margin-right: 0;
+    margin-left: calculateRem(48);
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

components/resources/style.scss

@@ -3,6 +3,10 @@
 .resources-wrap {
   padding: calculateRem(40) 0 calculateRem(60);
 
+  @media (min-width: $desktop) {
+    padding-top: calculateRem(80);
+  }
+
   h2 {
     margin-bottom: calculateRem(24);
 
@@ -12,7 +16,7 @@
   }
 
   .container {
-    max-width: calculateRem(1008);
+    max-width: calculateRem($big-container-width);
   }
 }
 

components/searchBar/style.scss

@@ -11,7 +11,7 @@
 
   @media (min-width: $desktop) {
     height: calculateRem(240);
-    padding-top: calculateRem(88);
+    padding-top: calculateRem(80);
   }
 
   .main-heading {

components/wordCloud/style.scss

@@ -1,14 +1,27 @@
 @import './assets/styles/global.scss';
 
 .wordcloud {
-  padding: calculateRem(32) 0 calculateRem(40) calculateRem(40);
+  padding: calculateRem(32) 0 calculateRem(40);
   outline: none;
   background-color: $navy;
   display: flex;
   flex-direction: column;
 
+  @media (min-width: $smallMobile) {
+    padding-left: calculateRem(24);
+  }
+
   @media (min-width: $tablet) {
     padding-top: calculateRem(48);
+    padding-left: calculateRem(48);
+  }
+
+  .wordcloud-header {
+    padding-left: calculateRem(20);
+
+    @media (min-width: $smallMobile) {
+      padding-left: 0;
+    }
   }
 
   h3 {
@@ -54,7 +67,10 @@
     justify-content: center;
     flex-grow: 1;
     text-align: center;
-    padding-right: calculateRem(24);
+
+    @media (min-width: $smallMobile) {
+      padding-right: calculateRem(24);
+    }
 
     @media (min-width: $tablet) {
       padding-right: calculateRem(48);
@@ -66,25 +82,45 @@
       padding: calculateRem(4) calculateRem(12);
       transform: scale(1);
       transition: transform 0.2s ease-in-out;
+      
+      &:hover {
+        transform: scale(1.05);
+      }
 
       &.size-1 {
         font-size: calculateRem(30);
+
+        > span:hover,
+        > a:hover {
+          color: $red;
+        }
       }
 
       &.size-2 {
         font-size: calculateRem(25);
+
+        > span:hover,
+        > a:hover {
+          color: $orange;
+        }
       }
 
       &.size-3 {
         font-size: calculateRem(20);
+
+        > span:hover,
+        > a:hover {
+          color: $turquoise;
+        }
       }
 
       &.size-4 {
         font-size: calculateRem(15);
-      }
 
-      &:hover {
+        > span:hover,
-        transform: scale(1.05);
+        > a:hover {
+          color: #fff;
+        }
       }
 
       > span,