Fix styling issues

This commit is contained in:
LordMathis 2018-06-17 18:08:51 +02:00
parent 960c12fe9d
commit 157740bd76
3 changed files with 26 additions and 29 deletions

View File

@ -16,14 +16,14 @@ export default class Blog extends Component {
}
let posts = this.props.posts.map((post) =>
<div className={styles.postListItem} key={post.title}>
<div className={styles.postHeader}>
<div className={styles.post}>
<span>{post.published}</span>
<a href={post.link}>{post.title}</a>
</div>
</div>
</div>
<tr className={styles.postListItem} key={post.title}>
<td>
<span className={styles.postDate}>{post.published}</span>
</td>
<td>
<a href={post.link} className={styles.postTitle}>{post.title}</a>
</td>
</tr>
)
return (
@ -31,9 +31,11 @@ export default class Blog extends Component {
<Header header={"Blog"} />
<div className={contentStyle.content}>
<div className={styles.postsWrapper}>
<table>
<tbody className={styles.postsWrapper}>
{posts}
</div>
</tbody>
</table>
</div>
</div>

View File

@ -1,29 +1,21 @@
@import "../static/stylesheets/variables.scss";
.post {
display: inline-block;
float: left;
span {
margin-right: 30px;
}
a {
.postDate {
margin-right: 50px;
}
.postTitle {
color: $blue;
text-decoration: none;
text-transform: capitalize;
font-family: $font-header;
font-size: 1.2em;
}
}
.postsWrapper {
margin-top: 20px;
}
.postHeader {
overflow: hidden;
padding: 0 5px 0 5px;
}
.postListItem {
margin: 8px;
}

View File

@ -2,6 +2,9 @@
.postContent {
clear: both;
h1,h2,h2,h4,h5,h6 {
color: $black;
}
}
.postDate {