Merge branch 'develop' of github.com:Nona-Creative/ETHPrize into feat/node-transform-json

assets/styles/base/variables.scss

@@ -29,5 +29,6 @@ $secondary-font: 'bebas_neuebold', sans-serif;
 // layout
 $container-width: 740;
 $big-container-width: 1008;
+$lrg-container-width: 1552;
 $browse-left-width: 200;
 $container-padding: 24;

components/pageHeader/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import getConfig from 'next/config';
+import Headroom from 'react-headroom';
 import PageHeaderNav from '../pageHeaderNav';
 import './style.scss';
 
@@ -7,14 +8,16 @@ const { publicRuntimeConfig } = getConfig();
 
 const PageHeader = () => (
   <div className="page-header" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/header-bg.jpg)` }}>
-    <div className="sticky-header">
-      <div className="container">
-        <div className="logo">
-          <img src={`${publicRuntimeConfig.subDirPath}/static/img/ETHPrize-logo.png`} alt="ETHPrize logo" />
+    <Headroom disableInlineStyles downTolerance={120}>
+      <div className="sticky-header">
+        <div className="container">
+          <div className="logo">
+            <img src={`${publicRuntimeConfig.subDirPath}/static/img/ETHPrize-logo.png`} alt="ETHPrize logo" />
+          </div>
+          <PageHeaderNav />
         </div>
-        <PageHeaderNav />
       </div>
-    </div>
+    </Headroom>
     <img className="page-header-bg" src={`${publicRuntimeConfig.subDirPath}/static/img/header-bg.jpg`} alt="Header background" />
     <div className="inline-header">
       <div className="container">

components/pageHeader/style.scss

@@ -12,7 +12,7 @@
     // Need important to override inline style
     background: none !important;
     overflow: hidden;
-    padding-top: calculateRem(36);
+    padding-top: 0;
   }
 
   .logo img {
@@ -28,7 +28,7 @@
 
     @media (min-width: $desktop) {
       width: calculateRem(336);
-      margin-left: calculateRem(94);
+      margin-left: calculateRem(224);
     }
   }
 }
@@ -72,14 +72,40 @@
   }
 }
 
-.sticky-header {
+.headroom {
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
   display: none;
 
   @media (min-width: $desktop) {
     display: block;
-    position: fixed;
-    top: 0;
-    left: 0;
+  }
+}
+
+.headroom--unfixed {
+  position: relative;
+  transform: translateY(0);
+}
+
+.headroom--scrolled {
+  transition: transform 500ms ease-in-out;
+}
+
+.headroom--unpinned {
+  position: fixed;
+  transform: translateY(-100%);
+}
+
+.headroom--pinned {
+  position: fixed;
+  transform: translateY(0%);
+}
+
+.sticky-header {
+
+  @media (min-width: $desktop) {
     width: 100%;
     z-index: 1;
     padding: calculateRem(32) 0;
@@ -89,7 +115,7 @@
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a61c2449', endColorstr='#001c2449', GradientType=0);
 
     .container {
-      max-width: calculateRem($big-container-width);
+      max-width: calculateRem($lrg-container-width);
       display: flex;
       justify-content: space-between;
       align-items: center;

package-lock.json

@@ -5418,6 +5418,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
       "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg=="
     },
+    "lodash._getnative": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
+      "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U="
+    },
     "lodash.assign": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
@@ -5438,6 +5443,26 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
+    "lodash.isarguments": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
+      "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo="
+    },
+    "lodash.isarray": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
+      "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U="
+    },
+    "lodash.keys": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
+      "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
+      "requires": {
+        "lodash._getnative": "3.9.1",
+        "lodash.isarguments": "3.1.0",
+        "lodash.isarray": "3.0.4"
+      }
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -7289,6 +7314,21 @@
       "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
       "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM="
     },
+    "raf": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.0.tgz",
+      "integrity": "sha512-pDP/NMRAXoTfrhCfyfSEwJAKLaxBU9eApMeBPB1TkDouZmvPerIClV8lTAd+uF8ZiTaVl69e1FCxQrAd/VTjGw==",
+      "requires": {
+        "performance-now": "2.1.0"
+      },
+      "dependencies": {
+        "performance-now": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
+          "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
+        }
+      }
+    },
     "randomatic": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.0.0.tgz",
@@ -7402,6 +7442,16 @@
         }
       }
     },
+    "react-headroom": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/react-headroom/-/react-headroom-2.2.2.tgz",
+      "integrity": "sha512-RqisNR8rZkS/MKeQum8xj4EQp26IQ813qEsg51a7wF0K5bMIwYplh6ZDQR7wBVVrrf+PnQ2JzTYQpG/8QCeoww==",
+      "requires": {
+        "prop-types": "15.6.2",
+        "raf": "3.4.0",
+        "shallowequal": "0.2.2"
+      }
+    },
     "react-lifecycles-compat": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@@ -8173,6 +8223,14 @@
         }
       }
     },
+    "shallowequal": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-0.2.2.tgz",
+      "integrity": "sha1-HjL9W8q2rWiKSBLLDMBO/HXHAU4=",
+      "requires": {
+        "lodash.keys": "3.1.2"
+      }
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",

package.json

@@ -45,7 +45,8 @@
     "prop-types": "^15.6.1",
     "react": "^16.3.2",
     "react-anchor-link-smooth-scroll": "^1.0.10",
-    "react-dom": "^16.3.2"
+    "react-dom": "^16.3.2",
+    "react-headroom": "^2.2.2"
   },
   "devDependencies": {
     "babel-eslint": "^8.0.1",