Restyle homepage and PostCard component

This commit is contained in:
Hippo 2019-09-24 18:15:46 +05:30
parent f4955f77c1
commit 01a1497cca
4 changed files with 82 additions and 26 deletions

View file

@ -71,6 +71,7 @@ const DefaultLayout = ({ data, children, bodyClass, isHome, hasFeatureImage }) =
</header> </header>
<main className={ <main className={
isHome ? "site-main grey-background" :
hasFeatureImage ? "site-main has-feature-image" : "site-main" hasFeatureImage ? "site-main has-feature-image" : "site-main"
}> }>
{/* All the main content gets inserted here, index.js, post.js */} {/* All the main content gets inserted here, index.js, post.js */}

View file

@ -4,22 +4,24 @@ import { Link } from 'gatsby'
import { Tags } from '@tryghost/helpers-gatsby' import { Tags } from '@tryghost/helpers-gatsby'
import { readingTime as readingTimeHelper } from '@tryghost/helpers' import { readingTime as readingTimeHelper } from '@tryghost/helpers'
const PostCard = ({ post }) => { const PostCard = ({ post, isLarge }) => {
const url = `/${post.slug}/` const url = `/${post.slug}/`
const readingTime = readingTimeHelper(post) const readingTime = readingTimeHelper(post)
return ( return (
<Link to={url} className="post-card"> <Link to={url} className={ isLarge ? "post-card post-card-large" : "post-card" }>
<header className="post-card-header"> <header className="post-card-header">
{post.feature_image && {post.feature_image &&
<div className="post-card-image" style={{ <div className="post-card-image" style={{
backgroundImage: `url(${post.feature_image})` , backgroundImage: `url(${post.feature_image})` ,
}}></div>} }}></div>}
{post.tags && <div className="post-card-tags"> <Tags post={post} visibility="public" autolink={false} /></div>} </header>
<div className="post-card-content">
{/*post.tags && <div className="post-card-tags"> <Tags post={post} visibility="public" autolink={false} /></div>*/}
{post.tags && <div className="post-card-tags">{post.tags[0].name}</div>}
{post.featured && <span>Featured</span>} {post.featured && <span>Featured</span>}
<h2 className="post-card-title">{post.title}</h2> <h2 className="post-card-title">{post.title}</h2>
</header> <section className="post-card-excerpt">{post.subtitle}</section>
<section className="post-card-excerpt">{post.excerpt}</section>
<footer className="post-card-footer"> <footer className="post-card-footer">
<div className="post-card-footer-left"> <div className="post-card-footer-left">
<div className="post-card-avatar"> <div className="post-card-avatar">
@ -34,6 +36,7 @@ const PostCard = ({ post }) => {
<div>{readingTime}</div> <div>{readingTime}</div>
</div> </div>
</footer> </footer>
</div>
</Link> </Link>
) )
} }
@ -55,6 +58,7 @@ PostCard.propTypes = {
profile_image: PropTypes.string, profile_image: PropTypes.string,
}).isRequired, }).isRequired,
}).isRequired, }).isRequired,
isLarge: PropTypes.bool,
} }
export default PostCard export default PostCard

View file

@ -769,6 +769,10 @@ h6 {
padding: 4vw 0; padding: 4vw 0;
} }
.site-main.grey-background {
background: #f4f8fb;
}
.site-main.has-feature-image { .site-main.has-feature-image {
padding: 0 0 4vw 0; /* Leave space for pic */ padding: 0 0 4vw 0; /* Leave space for pic */
} }
@ -777,10 +781,8 @@ h6 {
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */
.post-feed { .post-feed {
display: grid; display:flex;
justify-content: space-between; flex-wrap: wrap;
grid-gap: 30px;
grid-template-columns: 1fr 1fr 1fr;
} }
@media (max-width: 980px) { @media (max-width: 980px) {
@ -797,17 +799,28 @@ h6 {
.post-card { .post-card {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
flex: 1 1 300px;
margin: 1rem;
background: #fff;
border-radius: 5px;
box-shadow: 8px 14px 38px rgba(39,44,49,.06),1px 3px 8px rgba(39,44,49,.03);
display: flex;
flex-direction: column;
} }
.post-card:hover { .post-card:hover {
text-decoration: none; text-decoration: none;
box-shadow: rgba(39,44,49,0.07) 8px 28px 50px, rgba(39, 44, 49, 0.04) 1px 6px 12px;
transition: all 0.4s ease;
transform: translate3D(0, -1px, 0) scale(1.02);
} }
.post-card-tags { .post-card-tags {
margin: 0 0 5px 0; margin: 0 0 5px 0;
font-size: 1.4rem; font-size: 1.2rem;
line-height: 1.15em; line-height: 1.15em;
color: var(--color-secondary); color: var(--color-secondary);
text-transform: uppercase;
} }
@ -816,6 +829,18 @@ h6 {
padding: 0; padding: 0;
} }
.post-card-content {
padding: 1rem;
display: flex;
flex-direction: column;
height: 100%;
}
.post-card-content::before {
margin-top: auto;
content: "";
}
.post-card-excerpt { .post-card-excerpt {
font-size: 1.6rem; font-size: 1.6rem;
line-height: 1.55em; line-height: 1.55em;
@ -827,13 +852,14 @@ h6 {
height: 200px; height: 200px;
background: var(--color-secondary) no-repeat center center; background: var(--color-secondary) no-repeat center center;
background-size: cover; background-size: cover;
border-radius: 5px 5px 0 0;
} }
.post-card-footer { .post-card-footer {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin: 10px 0 0 0; margin: auto 0 0 0;
color: var(--color-secondary); color: var(--color-secondary);
} }
@ -869,6 +895,31 @@ h6 {
width: 26px; width: 26px;
} }
@media (min-width: 980px) {
.post-card-large {
flex: 1 1 100%;
flex-direction: row;
border-radius: 1rem;
}
.post-card-large h2 {
font-size: 2.6rem;
}
.post-card-large .post-card-header {
flex: 1 1 auto;
}
.post-card-large .post-card-image {
height: 400px;
margin-bottom: 0;
border-radius: 1rem 0 0 1rem;
}
.post-card-large .post-card-content {
flex: 0 1 357px;
padding: 3rem;
}
}
/* Tag Archives /* Tag Archives
/* ---------------------------------------------------------- */ /* ---------------------------------------------------------- */

View file

@ -22,9 +22,9 @@ const Index = ({ data, location, pageContext }) => {
<Layout isHome={true}> <Layout isHome={true}>
<div className="container"> <div className="container">
<section className="post-feed"> <section className="post-feed">
{posts.map(({ node }) => ( {posts.map(( {node}, count ) => (
// The tag below includes the markup for each post - components/common/PostCard.js // The tag below includes the markup for each post - components/common/PostCard.js
<PostCard key={node.id} post={node} /> <PostCard key={node.id} post={node} isLarge={ count % 6 == 0 ? true : false} />
))} ))}
</section> </section>
<Pagination pageContext={pageContext} /> <Pagination pageContext={pageContext} />