Blog post list styling

This commit is contained in:
LordMathis 2017-11-07 17:09:45 +01:00
parent 64f28563fa
commit a026c1f321
2 changed files with 74 additions and 8 deletions

View File

@ -9,21 +9,35 @@ export default class Blog extends Component {
);
}
let posts = this.props.posts.map((post) => {
return (
<div>
<div>{post.published}</div>
<div>{post.filename}</div>
let posts = this.props.posts.map((post) =>
<div className="post-list-item" key={post.title}>
<div className="post-header">
<div className="post-title">
<h3><a href={post.link}>{post.title}</a></h3>
</div>
<div className="post-date">
<h3>{post.published}
</h3>
</div>
</div>
)
})
<div className="post-summary">
<p>{post.summary}</p>
</div>
<div className="post-list-footer">
<a href={post.link}>Read More</a>
</div>
</div>
)
return (
<div>
<div className="content">
<h1>Blog</h1>
{posts}
<div className="blog-posts">
{posts}
</div>
</div>
</div>

View File

@ -2,6 +2,7 @@ $font-header: 'Concert One', cursive;
$font-paragraph: 'Open Sans', sans-serif;
$white: #fdfdfd;
$black: #2f2f2f;
$blue: #428bca;
$break-medium: 768px;
$break-large: 1200px;
@ -74,6 +75,9 @@ body {
h1 {
text-align: center;
}
a {
color: $blue;
}
@media screen and (max-width: $break-medium) {
width: 100%;
float: none;
@ -106,3 +110,51 @@ body {
}
}
.post-title {
float: left;
h3 {
font-weight: normal
}
}
.post-date {
float: right;
h3 {
font-weight: normal
}
}
.post-header {
background-color: #F5F5F5;
overflow: hidden;
padding: 0 5px 0 5px;
}
.post-summary, .post-content{
clear: both;
}
.post-summary {
padding: 0 5px 0 5px;
}
.post-list-item {
margin-top: 20px;
border-style: solid;
border-width: 0 0 3px 0;
border-color: $black;
}
.post-list-footer {
text-align: center;
padding-bottom: 5px;
}
.blog-posts {
box-sizing: border-box;
margin: 0 auto;
@media screen and (min-width: $break-large) {
width: 80%;
}
}