page header styling

2025-02-10 13:26:44 +00:00 · 2018-07-19 16:07:28 +02:00 · 2018-07-19 16:07:28 +02:00 · fa09d889be
commit fa09d889be
parent a66b66ed42
9 changed files with 165 additions and 41 deletions
--- a/assets/styles/base/type.scss
+++ b/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;
--- a/assets/styles/base/variables.scss
+++ b/assets/styles/base/variables.scss
@ -26,5 +26,6 @@ $secondary-font: 'bebas_neuebold', sans-serif;

 // layout
 $container-width: 740;
+$big-container-width: 1008;
 $browse-left-width: 200;
 $container-padding: 24;
--- a/components/pageHeader/index.js
+++ b/components/pageHeader/index.js
@ -1,27 +1,40 @@
 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">
-      <nav className="page-header-nav">
-        <AnchorLink href="#resources">Resources</AnchorLink>
-        <AnchorLink href="#browse">Browse Archives</AnchorLink>
-      </nav>
-      <img className="logo" src={`${publicRuntimeConfig.subDirPath}/static/img/ETHPrize-logo.png`} alt="ETHPrize logo" />
-      <h1 className="main-heading" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/heading-textured-bg.jpg)` }}>
-        Eth Report 2018
-      </h1>
-      <p>
-        We&rsquo;ve interviewed 100+ developers to showcase the biggest opportunities in the
-        Ethereum ecosystem
-      </p>
+    <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>
+    </div>
+    <img className="page-header-bg" src={`${publicRuntimeConfig.subDirPath}/static/img/header-bg.jpg`} alt="Header background" />
+    <div className="inline-header">
+      <div className="container">
+        <div className="logo">
+          <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>
+
 );

 export default PageHeader;
--- a/components/pageHeader/style.scss
+++ b/components/pageHeader/style.scss
@ -1,16 +1,21 @@
@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;
-  text-align: center;
+  padding: calculateRem(48) 0 calculateRem(80);

-  .logo {
-    width: calculateRem(116);
-    margin-bottom: calculateRem(24);
+  @media (min-width: $desktop) {
+    background: none !important;
+    overflow: hidden;
+    padding-top: calculateRem(36);
+  }
+
+  .logo img {
+    width: calculateRem(80);
  }

  h1 {
@ -18,29 +23,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 {
-  margin-bottom: calculateRem(32);
+  @media (min-width: $desktop) {
+    padding: calculateRem(280) 0 calculateRem(140);

-  a {
-    font-family: $secondary-font;
-    color: #fff;
-    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);
+    .logo,
+    .page-header-nav {
+      display: none;
    }

-    &:hover {
-      text-decoration: underline;
+    .container {
+      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);
    }
  }
 }
--- a/components/pageHeaderNav/index.js
+++ b/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;
--- a/components/pageHeaderNav/style.scss
+++ b/components/pageHeaderNav/style.scss
@ -0,0 +1,23 @@
+@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;
+    }
+  }
+}
--- a/components/resources/style.scss
+++ b/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);
  }
 }

--- a/components/searchBar/style.scss
+++ b/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 {
--- a/components/wordCloud/style.scss
+++ b/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);