Merge pull request #228 from vincenavarro/menu-hero-proximity

Make hero image positioning consistant.

Author: ZoltanVeres

src/pages/blog/index.js

@@ -7,29 +7,29 @@ export default class BlogIndexPage extends React.Component {
   render() {
     return (
       <Layout>
+        <div
+          className="full-width-image-container margin-top-0"
+          style={{
+            backgroundImage: `url('/img/blog-index.jpg')`,
+          }}
+        >
+          <h1
+            className="has-text-weight-bold is-size-1"
+            style={{
+              boxShadow: '0.5rem 0 0 #f40, -0.5rem 0 0 #f40',
+              backgroundColor: '#f40',
+              color: 'white',
+              padding: '1rem',
+            }}
+          >
+            Latest Stories
+          </h1>
+        </div>
         <section className="section">
           <div className="container">
             <div className="content">
-              <div
-                className="full-width-image-container margin-top-0"
-                style={{
-                  backgroundImage: `url('/img/blog-index.jpg')`,
-                }}
-              >
-                <h1
-                  className="has-text-weight-bold is-size-1"
-                  style={{
-                    boxShadow: '0.5rem 0 0 #f40, -0.5rem 0 0 #f40',
-                    backgroundColor: '#f40',
-                    color: 'white',
-                    padding: '1rem',
-                  }}
-                >
-                  Latest Stories
-                </h1>
-              </div>
+              <BlogRoll />
             </div>
-            <BlogRoll />
           </div>
         </section>
       </Layout>

src/templates/product-page.js

@@ -18,42 +18,38 @@ export const ProductPageTemplate = ({
   fullImage,
   pricing,
 }) => (
-  <section className="section section--gradient">
-    <div className="container">
-      <div className="section">
-        <div className="columns">
-          <div className="column is-10 is-offset-1">
-            <div className="content">
-              <div
-                className="full-width-image-container margin-top-0"
-                style={{
-                  backgroundImage: `url(${
-                    !!image.childImageSharp
-                      ? image.childImageSharp.fluid.src
-                      : image
-                  })`,
-                }}
-              >
-                <h2
-                  className="has-text-weight-bold is-size-1"
-                  style={{
-                    boxShadow: '0.5rem 0 0 #f40, -0.5rem 0 0 #f40',
-                    backgroundColor: '#f40',
-                    color: 'white',
-                    padding: '1rem',
-                  }}
-                >
-                  {title}
-                </h2>
-              </div>
-              <div className="columns">
-                <div className="column is-7">
-                  <h3 className="has-text-weight-semibold is-size-2">
-                    {heading}
-                  </h3>
-                  <p>{description}</p>
-                </div>
-              </div>
+  <div className="content">
+    <div
+      className="full-width-image-container margin-top-0"
+      style={{
+        backgroundImage: `url(${
+          !!image.childImageSharp ? image.childImageSharp.fluid.src : image
+        })`,
+      }}
+    >
+      <h2
+        className="has-text-weight-bold is-size-1"
+        style={{
+          boxShadow: '0.5rem 0 0 #f40, -0.5rem 0 0 #f40',
+          backgroundColor: '#f40',
+          color: 'white',
+          padding: '1rem',
+        }}
+      >
+        {title}
+      </h2>
+    </div>
+    <section className="section section--gradient">
+      <div className="container">
+        <div className="section">
+          <div className="columns">
+            <div className="column is-7 is-offset-1">
+              <h3 className="has-text-weight-semibold is-size-2">{heading}</h3>
+              <p>{description}</p>
+            </div>
+          </div>
+          <div className="columns">
+            <div className="column is-10 is-offset-1">
               <Features gridItems={intro.blurbs} />
               <div className="columns">
                 <div className="column is-7">
@@ -104,8 +100,8 @@ export const ProductPageTemplate = ({
           </div>
         </div>
       </div>
-    </div>
-  </section>
+    </section>
+  </div>
 )
 
 ProductPageTemplate.propTypes = {