From 94229ca11026363f068a21d7d0f8f2b5d0189fc5 Mon Sep 17 00:00:00 2001
From: Hippo <badrihippo@gmail.com>
Date: Thu, 19 Sep 2019 18:35:26 +0530
Subject: [PATCH] Restyle feature image to make full-width

---
 src/components/common/Layout.js |  7 +++++--
 src/styles/app.css              |  7 ++++++-
 src/templates/post.js           | 10 +++++-----
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/common/Layout.js b/src/components/common/Layout.js
index 5603899..01d08c7 100644
--- a/src/components/common/Layout.js
+++ b/src/components/common/Layout.js
@@ -18,7 +18,7 @@ import '../../styles/app.css'
 * styles, and meta data for each page.
 *
 */
-const DefaultLayout = ({ data, children, bodyClass, isHome }) => {
+const DefaultLayout = ({ data, children, bodyClass, isHome, hasFeatureImage }) => {
     const site = data.allGhostSettings.edges[0].node
     const twitterUrl = site.twitter ? `https://twitter.com/${site.twitter.replace(/^@/, ``)}` : null
     const facebookUrl = site.facebook ? `https://www.facebook.com/${site.facebook.replace(/^\//, ``)}` : null
@@ -70,7 +70,9 @@ const DefaultLayout = ({ data, children, bodyClass, isHome }) => {
                     </div>
                 </header>
 
-                <main className="site-main">
+                <main className={
+                    hasFeatureImage ? "site-main has-feature-image" : "site-main"
+                }>
                     {/* All the main content gets inserted here, index.js, post.js */}
                     {children}
                 </main>
@@ -101,6 +103,7 @@ DefaultLayout.propTypes = {
     children: PropTypes.node.isRequired,
     bodyClass: PropTypes.string,
     isHome: PropTypes.bool,
+    hasFeatureImage: PropTypes.bool,
     data: PropTypes.shape({
         file: PropTypes.object,
         allGhostSettings: PropTypes.object.isRequired,
diff --git a/src/styles/app.css b/src/styles/app.css
index c0fe262..e2e785b 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -551,7 +551,8 @@ h6 {
 .post-feature-image img {
     margin: 0 0 3vw;
     width: 100%;
-    height: 500px;
+    height: auto;
+    max-height: calc(100vh - 123px); /* leave space for header */
     object-fit: cover;
 }
 
@@ -762,6 +763,10 @@ h6 {
     padding: 4vw 0;
 }
 
+.site-main.has-feature-image {
+    padding: 0 0 4vw 0; /* Leave space for pic */
+}
+
 /* Index
 /* ---------------------------------------------------------- */
 
diff --git a/src/templates/post.js b/src/templates/post.js
index 371af59..ae0bc0c 100755
--- a/src/templates/post.js
+++ b/src/templates/post.js
@@ -25,13 +25,13 @@ const Post = ({ data, location }) => {
                 <Helmet>
                     <style type="text/css">{`${post.codeinjection_styles}`}</style>
                 </Helmet>
-                <Layout>
+                <Layout hasFeatureImage={ post.feature_image }>
+                { post.feature_image ?
+                    <figure className="post-feature-image">
+                        <img src={ post.feature_image } alt={ post.title } />
+                    </figure> : null }
                     <div className="container">
                         <article className="content">
-                            { post.feature_image ?
-                                <figure className="post-feature-image">
-                                    <img src={ post.feature_image } alt={ post.title } />
-                                </figure> : null }
                             <section className="post-full-content">
                                 <h1 className="content-title">{post.title}</h1>