Restyle feature image to make full-width

This commit is contained in:
Hippo 2019-09-19 18:35:26 +05:30
parent 3cafb57c40
commit 94229ca110
3 changed files with 16 additions and 8 deletions

View file

@ -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,

View file

@ -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
/* ---------------------------------------------------------- */

View file

@ -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>