Change blog posts list style

This commit is contained in:
LordMathis 2018-06-14 17:55:38 +02:00
parent 020f7123a6
commit 16b35974df
5 changed files with 26 additions and 39 deletions

View File

@ -18,21 +18,11 @@ export default class Blog extends Component {
let posts = this.props.posts.map((post) => let posts = this.props.posts.map((post) =>
<div className={styles.postListItem} key={post.title}> <div className={styles.postListItem} key={post.title}>
<div className={styles.postHeader}> <div className={styles.postHeader}>
<div className={styles.postTitle}> <div className={styles.post}>
<h3><a href={post.link}>{post.title}</a></h3> <span>{post.published}</span>
</div> <a href={post.link}>{post.title}</a>
<div className={styles.postDate}>
<h3>{post.published}
</h3>
</div> </div>
</div> </div>
<div className={styles.postSummary}>
<p>{post.summary}</p>
</div>
<div className={styles.postListFooter}>
<a href={post.link}>Read More</a>
</div>
</div> </div>
) )
@ -41,7 +31,9 @@ export default class Blog extends Component {
<Header header={"Blog"} /> <Header header={"Blog"} />
<div className={contentStyle.content}> <div className={contentStyle.content}>
{posts} <div className={styles.postsWrapper}>
{posts}
</div>
</div> </div>
</div> </div>

View File

@ -1,38 +1,29 @@
@import "../static/stylesheets/variables.scss"; @import "../static/stylesheets/variables.scss";
.postTitle { .post {
display: inline-block;
float: left; float: left;
h3 { span {
font-weight: normal margin-right: 30px;
}
a {
color: $blue;
text-decoration: none;
text-transform: capitalize;
font-family: $font-header;
font-size: 1.2em;
} }
} }
.postDate { .postsWrapper {
float: right; margin-top: 20px;
h3 {
font-weight: normal
}
} }
.postHeader { .postHeader {
background-color: #F5F5F5;
overflow: hidden; overflow: hidden;
padding: 0 5px 0 5px; padding: 0 5px 0 5px;
} }
.postSummary {
clear: both;
padding: 0 5px 0 5px;
}
.postListItem { .postListItem {
margin-top: 20px; margin: 8px;
border-style: solid;
border-width: 0 0 3px 0;
border-color: $black;
}
.postListFooter {
text-align: center;
padding-bottom: 5px;
} }

View File

@ -4,10 +4,13 @@
display: inline-block; display: inline-block;
overflow: auto; overflow: auto;
padding: 20px; padding: 20px;
max-width: 960px;
a { a {
color: $blue; color: $blue;
} }
width: 100%;
@media (min-width: 992px) {
width: 960px;
}
} }
.content { .content {

View File

@ -3,5 +3,6 @@ $font-paragraph: 'Open Sans', sans-serif;
$white: #fdfdfd; $white: #fdfdfd;
$black: #2f2f2f; $black: #2f2f2f;
$blue: #144A98; $blue: #144A98;
$grey: #A9A9A9;
$break-medium: 768px; $break-medium: 768px;
$break-large: 1200px; $break-large: 1200px;

View File

@ -48,7 +48,7 @@ function compilePost(filepath, data, fileData, callback) {
} }
const post = { const post = {
published: published.format('MMMM Do YYYY'), published: published.format('MMMM DD, YYYY'),
filename: metadata.filename, filename: metadata.filename,
title: frontMatter.attributes.title, title: frontMatter.attributes.title,
summary: frontMatter.attributes.summary, summary: frontMatter.attributes.summary,