Change list of blog posts style

This commit is contained in:
LordMathis 2019-10-12 16:54:03 +02:00
parent c7d571923c
commit 002844f8fb
No known key found for this signature in database
GPG Key ID: 575849FD91CE470C
11 changed files with 47 additions and 25 deletions

View File

@ -4,5 +4,6 @@ $white: #fdfdfd;
$black: #2f2f2f;
$blue: #144A98;
$grey: #A9A9A9;
$body: #f1f1f1;
$navbar: #1B4367;
$break-large: 992px;

View File

@ -29,6 +29,7 @@
"prop-types": "^15.7.2",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-head": "^3.1.1",
"react-router-dom": "^5.0.1",
"serialize-javascript": "^2.1.0"
},

View File

@ -27,7 +27,7 @@ export default class About extends Component {
const classes = `${contentStyle.contentWrapper} ${style.about}`
return (
<div className={classes} >
<div className={`${contentStyle.contentWrapper} ${style.about}`} >
<Header header={'About Me'} />
<div className={contentStyle.content} dangerouslySetInnerHTML={{ __html: result }}>
</div>

View File

@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { Spinner, Header } from '.'
import '../stylesheets/globals.scss'
import MarkdownIt from 'markdown-it'
import styles from './Blog.scss'
import contentStyle from '../stylesheets/content.scss'
@ -12,6 +13,8 @@ export default class Blog extends Component {
}
render () {
const md = MarkdownIt()
if (this.props.isLoading) {
return (
<div className={contentStyle.contentWrapper} id="blog">
@ -24,14 +27,14 @@ export default class Blog extends Component {
return new Date(b.published) - new Date(a.published)
})
let postsHTML = posts.map((post) =>
<tr className={styles.postListItem} key={post.title}>
<td>
<span className={styles.postDate}>{post.published}</span>
</td>
<td>
<div className={styles.postListItem}>
<div className={styles.postHeader}>
<a href={post.link} className={styles.postTitle}>{post.title}</a>
</td>
</tr>
<span className={styles.postDate}>{post.published}</span>
</div>
<div dangerouslySetInnerHTML={{ __html: md.render(post.summary) }}>
</div>
</div>
)
const classes = `${contentStyle.contentWrapper} ${styles.blog}`
@ -40,12 +43,8 @@ export default class Blog extends Component {
<div className={classes} id="blog">
<Header header={'Blog'} />
<div className={contentStyle.content}>
<table>
<tbody className={styles.postsWrapper}>
<div className={`${contentStyle.content} ${styles.postsList}`}>
{postsHTML}
</tbody>
</table>
</div>
</div>

View File

@ -1,7 +1,7 @@
@import "../../config/variables.scss";
.postDate {
margin-right: 50px;
float: right;
}
.postTitle {
@ -10,17 +10,19 @@
text-transform: capitalize;
font-family: $font-header;
font-size: 1.2em;
float: left;
}
.postsWrapper {
.postHeader {
overflow: hidden;
}
.postsList {
margin-top: 20px;
}
.postListItem {
margin: 8px;
td {
vertical-align: top;
}
border-bottom: 5px solid $body;
}
.blog {

View File

@ -1,7 +1,7 @@
@import "../../config/variables.scss";
#coverPage {
background: url(../static/images/benjamin-child-6msS8vT5pzw-unsplash.jpg) no-repeat center center fixed;
background: url(../../config/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 235 KiB

View File

@ -5,6 +5,7 @@
overflow: auto;
box-sizing: border-box;
padding: 20px;
margin: 20px;
a {
color: $blue;
}
@ -12,8 +13,7 @@
@media (min-width: $break-large) {
width: 960px;
}
min-height: 100vh;
height: 100vh;
background-color: $white;
}
.content {

View File

@ -7,6 +7,7 @@
:global(body) {
font-family: $font-paragraph;
color: $black;
background-color: $body;
margin: 0;
}

View File

@ -56,10 +56,13 @@ export class Scanner {
published = moment()
}
const summary = frontMatter.body.split('\n\n', 1)[0]
const post = {
published: published.format('MMMM DD, YYYY'),
filename: metadata.filename,
title: frontMatter.attributes.title,
summary: summary,
link: '/post/' + metadata.filename
}

View File

@ -724,6 +724,13 @@
pirates "^4.0.0"
source-map-support "^0.5.9"
"@babel/runtime@^7.0.0":
version "7.6.3"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.3.tgz#935122c74c73d2240cafd32ddb5fc2a6cd35cf1f"
integrity sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==
dependencies:
regenerator-runtime "^0.13.2"
"@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.4.0":
version "7.6.0"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.0.tgz#4fc1d642a9fd0299754e8b5de62c631cf5568205"
@ -5882,6 +5889,14 @@ react-dom@^16.7.0:
prop-types "^15.6.2"
scheduler "^0.15.0"
react-head@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/react-head/-/react-head-3.1.1.tgz#9587a9261960c66e81c98a4ea365422f9c4ab4ca"
integrity sha512-mazFkea4439J8wk0MJL0k9OV97AZUMJzf8pDE6VRgK94SYYhbuUusCvQYVeMpltz5qsVvdOCa9qhd3IPW5yfaA==
dependencies:
"@babel/runtime" "^7.0.0"
tiny-invariant "^1.0.0"
react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
version "16.9.0"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
@ -6927,7 +6942,7 @@ timsort@^0.3.0:
resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
tiny-invariant@^1.0.2:
tiny-invariant@^1.0.0, tiny-invariant@^1.0.2:
version "1.0.6"
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.6.tgz#b3f9b38835e36a41c843a3b0907a5a7b3755de73"
integrity sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==