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; $black: #2f2f2f;
$blue: #144A98; $blue: #144A98;
$grey: #A9A9A9; $grey: #A9A9A9;
$body: #f1f1f1;
$navbar: #1B4367; $navbar: #1B4367;
$break-large: 992px; $break-large: 992px;

View File

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

View File

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

View File

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

View File

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

View File

@ -1,7 +1,7 @@
@import "../../config/variables.scss"; @import "../../config/variables.scss";
#coverPage { #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; -webkit-background-size: cover;
-moz-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; overflow: auto;
box-sizing: border-box; box-sizing: border-box;
padding: 20px; padding: 20px;
margin: 20px;
a { a {
color: $blue; color: $blue;
} }
@ -12,8 +13,7 @@
@media (min-width: $break-large) { @media (min-width: $break-large) {
width: 960px; width: 960px;
} }
min-height: 100vh; background-color: $white;
height: 100vh;
} }
.content { .content {

View File

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

View File

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

View File

@ -724,6 +724,13 @@
pirates "^4.0.0" pirates "^4.0.0"
source-map-support "^0.5.9" 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": "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.4.0":
version "7.6.0" version "7.6.0"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.0.tgz#4fc1d642a9fd0299754e8b5de62c631cf5568205" 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" prop-types "^15.6.2"
scheduler "^0.15.0" 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: react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
version "16.9.0" version "16.9.0"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb" 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" resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q= integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
tiny-invariant@^1.0.2: tiny-invariant@^1.0.0, tiny-invariant@^1.0.2:
version "1.0.6" version "1.0.6"
resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.6.tgz#b3f9b38835e36a41c843a3b0907a5a7b3755de73" resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.6.tgz#b3f9b38835e36a41c843a3b0907a5a7b3755de73"
integrity sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA== integrity sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==