Fix uncentered content on posts

This commit is contained in:
LordMathis 2019-11-09 23:24:51 +01:00
parent 4353bb2703
commit adb56df67f
No known key found for this signature in database
GPG Key ID: 575849FD91CE470C
6 changed files with 25 additions and 17 deletions

View File

@ -7,6 +7,7 @@ import styles from './Post.scss'
import MarkdownIt from 'markdown-it'
import fm from 'front-matter'
import moment from 'moment'
import Wrapper from './Wrapper'
export default class Post extends Component {
static propTypes = {
@ -33,16 +34,16 @@ export default class Post extends Component {
return (
<div>
<Navbar config={this.props.config} />
<div className={contentStyle.contentWrapper}>
<Wrapper>
<div className={`${contentStyle.content} ${styles.column}`}>
<Header header={title} role="heading" aria-level="2" />
<div className={contentStyle.content}>
<div className={styles.postDate}>
<h3>{date.format('MMMM D, YYYY')}</h3>
</div>
<div className={styles.postContent} dangerouslySetInnerHTML={{ __html: body }} role="article">
</div>
</div>
</div>
</Wrapper>
</div>
)
}

View File

@ -13,3 +13,8 @@
font-weight: normal
}
}
.column {
box-sizing: border-box;
margin: 20px;
}

View File

@ -19,7 +19,7 @@ export default class Wrapper extends Component {
render () {
return (
<div className={` ${contentStyle.contentWrapper} ${styles.centerContent} ${this.props.flex ? styles.flexWrap : ''}` } role='main'>
<div className={` ${contentStyle.contentWrapper} ${styles.centerContent} ${this.props.flex ? styles.flex : styles.noFlex}` } role='main'>
{this.props.children}
</div>
)

View File

@ -2,12 +2,18 @@
.centerContent {
text-align: center;
margin: 0 auto;
}
.flexWrap {
.flex {
@media only screen and (min-width: $break-large) {
display: flex;
width: 80%;
margin: 0 auto;
display: flex;
}
}
.noFlex {
@media (min-width: $break-large) {
width: 960px;
}
}

View File

@ -1,6 +1,6 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Post, Wrapper, NotFoundPage } from '../components'
import { Post, NotFoundPage } from '../components'
export default class PostContainer extends Component {
static propTypes = {
@ -35,10 +35,10 @@ export default class PostContainer extends Component {
}
return (
<Wrapper>
<Post isLoading={this.state.isLoading}
post={this.state.post} config={this.state.config} />
</Wrapper>
<Post
isLoading={this.state.isLoading}
post={this.state.post}
config={this.state.config} />
)
}
}

View File

@ -1,14 +1,10 @@
@import "./variables.scss";
.contentWrapper {
display: inline-block;
overflow: auto;
a {
color: $blue;
}
@media (min-width: $break-large) {
width: 960px;
}
}
.content {