Update CSS classes

This commit is contained in:
LordMathis 2017-11-11 20:50:38 +01:00
parent 9bc95d9670
commit 0ecdd6e405
9 changed files with 11 additions and 13 deletions

View File

@ -3,7 +3,7 @@ import React from 'react';
export const About = () => ( export const About = () => (
<div> <div>
<div className="content"> <div className="content-wrapper">
<h1>About</h1> <h1>About</h1>
</div> </div>
</div> </div>

View File

@ -31,10 +31,10 @@ export default class Blog extends Component {
) )
return ( return (
<div className="content"> <div className="content-wrapper">
<h1>Blog</h1> <h1>Blog</h1>
<div className="blog-posts"> <div className="content">
{posts} {posts}
</div> </div>

View File

@ -1 +0,0 @@

View File

@ -6,7 +6,7 @@ export const NotFoundPage = (props) => {
} }
return ( return (
<div> <div>
<div className="content"> <div className="content-wrapper">
<h1>Uhm... WHAT?</h1> <h1>Uhm... WHAT?</h1>
<h2>Looks like you&apos;re lost</h2> <h2>Looks like you&apos;re lost</h2>
<p>404 Page not found</p> <p>404 Page not found</p>

View File

@ -2,7 +2,7 @@ import React from 'react';
export const Portfolio = () => ( export const Portfolio = () => (
<div> <div>
<div className="content"> <div className="content-wrapper">
<h1>Portfolio</h1> <h1>Portfolio</h1>
</div> </div>
</div> </div>

View File

@ -10,10 +10,10 @@ export default class Post extends Component {
} }
return ( return (
<div className="content"> <div className="content-wrapper">
<h1>{this.props.post.title}</h1> <h1>{this.props.post.title}</h1>
<h4>{this.props.post.published}</h4> <h4>{this.props.post.published}</h4>
<div dangerouslySetInnerHTML={{__html: this.props.post.body}}> <div className="content" dangerouslySetInnerHTML={{__html: this.props.post.body}}>
</div> </div>
</div> </div>
) )

View File

@ -2,7 +2,7 @@ import React from 'react';
export const Resume = () => ( export const Resume = () => (
<div> <div>
<div className="content"> <div className="content-wrapper">
<h1>Resume</h1> <h1>Resume</h1>
</div> </div>
</div> </div>

View File

@ -6,4 +6,3 @@ export { default as Portfolio } from './Portfolio';
export { default as Resume } from './Resume'; export { default as Resume } from './Resume';
export { default as NotFoundPage } from './NotFoundPage'; export { default as NotFoundPage } from './NotFoundPage';
export { default as App } from './App'; export { default as App } from './App';
export { default as Main } from './Main';

View File

@ -15,7 +15,7 @@ $break-large: 1200px;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
position: absolute; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
color: $white; color: $white;
@ -68,7 +68,7 @@ body {
text-decoration: none; text-decoration: none;
} }
.content { .content-wrapper {
margin-left: 320px; margin-left: 320px;
overflow: auto; overflow: auto;
padding: 20px; padding: 20px;
@ -151,7 +151,7 @@ body {
padding-bottom: 5px; padding-bottom: 5px;
} }
.blog-posts { .content {
box-sizing: border-box; box-sizing: border-box;
margin: 0 auto; margin: 0 auto;
@media screen and (min-width: $break-large) { @media screen and (min-width: $break-large) {