Adding textured heading bg

assets/styles/base/type.scss

@@ -36,6 +36,11 @@ strong {
   letter-spacing: 4px;
   line-height: 1.1;
   transition: font-size 0.2s ease, letter-spacing 0.2s ease;
+  background-repeat: no-repeat;
+  background-position: top center;
+  background-size: cover;
+  -webkit-text-fill-color: transparent;
+  -webkit-background-clip: text;
 
   @media (min-width: $desktop) {
     font-size: calculateRem(68);

components/browseArchives/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import _ from 'lodash';
+import getConfig from 'next/config';
 import RelatedInterviewsList from '../interviews/relatedInterviewsList';
 import InterviewsList from '../interviews/interviewsList';
 import SingleInterview from '../interviews/singleInterview';
@@ -10,6 +11,8 @@ import SearchResults from '../searchResults';
 import { InterviewsData, Questions } from '../../data/archives/interviews';
 import './style.scss';
 
+const { publicRuntimeConfig } = getConfig();
+
 class BrowseArchives extends React.Component {
   constructor(props) {
     super(props);

components/pageHeader/index.js

@@ -13,7 +13,9 @@ const PageHeader = () => (
         <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">Eth Report 2018</h1>
+      <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

components/resources/index.js

@@ -1,11 +1,14 @@
 import React from 'react';
 import Parser from 'html-react-parser';
 import Slider from 'react-slick';
+import getConfig from 'next/config';
 import Modal from '../modal';
 import WordCloud from '../wordCloud';
 import Data from '../../data/resources/wordclouds';
 import './style.scss';
 
+const { publicRuntimeConfig } = getConfig();
+
 class Resources extends React.Component {
   constructor(props) {
     super(props);
@@ -55,7 +58,9 @@ class Resources extends React.Component {
     return (
       <div className="resources-wrap" id="resources">
         <div className="container">
-          <h2 className="main-heading">Resources</h2>
+          <h2 className="main-heading" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/heading-textured-bg.jpg)` }}>
+            Resources
+          </h2>
           <div className="wordclouds-wrap">
             {
               Data.map((wordCloud, index) =>

components/searchBar/index.js

@@ -8,7 +8,9 @@ const { publicRuntimeConfig } = getConfig();
 const SearchBar = props => (
   <div className="search-bar" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/header-bg.jpg)` }}>
     <div className="container">
-      <h3 className="main-heading">Archives</h3>
+      <h3 className="main-heading" style={{ backgroundImage: `url(${publicRuntimeConfig.subDirPath}/static/img/heading-textured-bg.jpg)` }}>
+        Archives
+      </h3>
       <form className="search-form">
         <input
           className="search-input"