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

View File

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

View File

@ -19,7 +19,7 @@ export default class Wrapper extends Component {
render () { render () {
return ( 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} {this.props.children}
</div> </div>
) )

View File

@ -2,12 +2,18 @@
.centerContent { .centerContent {
text-align: center; text-align: center;
margin: 0 auto;
} }
.flexWrap { .flex {
@media only screen and (min-width: $break-large) { @media only screen and (min-width: $break-large) {
display: flex;
width: 80%; 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 React, { Component } from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { Post, Wrapper, NotFoundPage } from '../components' import { Post, NotFoundPage } from '../components'
export default class PostContainer extends Component { export default class PostContainer extends Component {
static propTypes = { static propTypes = {
@ -35,10 +35,10 @@ export default class PostContainer extends Component {
} }
return ( return (
<Wrapper> <Post
<Post isLoading={this.state.isLoading} isLoading={this.state.isLoading}
post={this.state.post} config={this.state.config} /> post={this.state.post}
</Wrapper> config={this.state.config} />
) )
} }
} }

View File

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