Merge pull request #2 from LordMathis/develop-universal

Fix styling issues
This commit is contained in:
Matúš Námešný 2018-06-17 18:11:40 +02:00 committed by GitHub
commit 2b874531a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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) => let posts = this.props.posts.map((post) =>
<div className={styles.postListItem} key={post.title}> <tr className={styles.postListItem} key={post.title}>
<div className={styles.postHeader}> <td>
<div className={styles.post}> <span className={styles.postDate}>{post.published}</span>
<span>{post.published}</span> </td>
<a href={post.link}>{post.title}</a> <td>
</div> <a href={post.link} className={styles.postTitle}>{post.title}</a>
</div> </td>
</div> </tr>
) )
return ( return (
@ -31,9 +31,11 @@ export default class Blog extends Component {
<Header header={"Blog"} /> <Header header={"Blog"} />
<div className={contentStyle.content}> <div className={contentStyle.content}>
<div className={styles.postsWrapper}> <table>
<tbody className={styles.postsWrapper}>
{posts} {posts}
</div> </tbody>
</table>
</div> </div>
</div> </div>

View File

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

View File

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