Move to CSS modules and Sass

This commit is contained in:
LordMathis 2018-05-04 19:34:25 +02:00
parent 299ffcadbb
commit 1221f8e0fe
7 changed files with 47 additions and 42 deletions

View File

@ -1,22 +1,23 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import '../static/stylesheets/globals.scss'; import '../static/stylesheets/globals.scss';
import './About.scss'; import styles from './About.scss';
import contentStyle from '../static/stylesheets/content.scss';
export default class About extends Component { export default class About extends Component {
render () { render () {
if (this.props.isLoading) { if (this.props.isLoading) {
return ( return (
<div className="content-wrapper"> <div className={contentStyle.contentWrapper}>
<h1>Loading</h1> <h1>Loading</h1>
</div> </div>
); );
} }
return ( return (
<div className="content-wrapper"> <div className={contentStyle.contentWrapper}>
<h1>About</h1> <h1>About</h1>
<div className="content" dangerouslySetInnerHTML={{__html: this.props.about.body}}> <div className={contentStyle.content} dangerouslySetInnerHTML={{__html: this.props.about.body}}>
</div> </div>
</div> </div>
) )

View File

@ -1,13 +1,14 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import '../static/stylesheets/globals.scss'; import '../static/stylesheets/globals.scss';
import styles from './Blog.scss'; import styles from './Blog.scss';
import contentStyle from '../static/stylesheets/content.scss';
export default class Blog extends Component { export default class Blog extends Component {
render() { render() {
if (this.props.isLoading) { if (this.props.isLoading) {
return ( return (
<div className="content-wrapper"> <div className={contentStyle.contentWrapper}>
<h1>Loading</h1> <h1>Loading</h1>
</div> </div>
); );
@ -35,10 +36,10 @@ export default class Blog extends Component {
) )
return ( return (
<div className="content-wrapper"> <div className={contentStyle.contentWrapper}>
<h1>Blog</h1> <h1>Blog</h1>
<div className="content"> <div className={contentStyle.content}>
{posts} {posts}
</div> </div>

View File

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import '../static/stylesheets/globals.scss'; import '../static/stylesheets/globals.scss';
import contentStyle from '../static/stylesheets/content.scss';
export const NotFoundPage = (props) => { export const NotFoundPage = (props) => {
if (props.location.pathname === '/') { if (props.location.pathname === '/') {
@ -7,7 +8,7 @@ export const NotFoundPage = (props) => {
} }
return ( return (
<div> <div>
<div className="content-wrapper"> <div className={contentStyle.contentWrapper}>
<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

@ -1,6 +1,7 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import '../static/stylesheets/globals.scss'; import '../static/stylesheets/globals.scss';
import './Post.scss'; import contentStyle from '../static/stylesheets/content.scss';
import styles from './Post.scss';
export default class Post extends Component { export default class Post extends Component {
render() { render() {
@ -12,15 +13,15 @@ export default class Post extends Component {
} }
return ( return (
<div className="content-wrapper"> <div className={contentStyle.contentWrapper}>
<a href={this.props.post.link}> <a href={this.props.post.link}>
<h1>{this.props.post.title}</h1> <h1>{this.props.post.title}</h1>
</a> </a>
<div className="content"> <div className={contentStyle.content}>
<div className="post-date"> <div className={styles.postDate}>
<h3>{this.props.post.published}</h3> <h3>{this.props.post.published}</h3>
</div> </div>
<div className="post-content" dangerouslySetInnerHTML={{__html: this.props.post.body}}> <div className={styles.postContent} dangerouslySetInnerHTML={{__html: this.props.post.body}}>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,10 +1,10 @@
@import "../static/stylesheets/variables.scss"; @import "../static/stylesheets/variables.scss";
.post-content { .postContent {
clear: both; clear: both;
} }
.post-date { .postDate {
float: right; float: right;
h3 { h3 {
font-weight: normal font-weight: normal

View File

@ -0,0 +1,28 @@
@import "./variables.scss";
.contentWrapper {
margin-left: 320px;
overflow: auto;
padding: 20px;
h1 {
text-align: center;
}
a {
color: $blue;
}
@media screen and (max-width: $break-medium) {
width: 100%;
float: none;
}
@media screen and (min-width: $break-large) {
margin-left: 500px;
}
}
.content {
box-sizing: border-box;
margin: 0 auto;
@media screen and (min-width: $break-large) {
width: 90%;
}
}

View File

@ -1,24 +1,5 @@
@import "./variables.scss"; @import "./variables.scss";
:global(.content-wrapper) {
margin-left: 320px;
overflow: auto;
padding: 20px;
h1 {
text-align: center;
}
a {
color: $blue;
}
@media screen and (max-width: $break-medium) {
width: 100%;
float: none;
}
@media screen and (min-width: $break-large) {
margin-left: 500px;
}
}
:global(body) { :global(body) {
font-family: $font-paragraph; font-family: $font-paragraph;
color: $black; color: $black;
@ -30,11 +11,3 @@
font-family: $font-header; font-family: $font-header;
} }
} }
:global(.content) {
box-sizing: border-box;
margin: 0 auto;
@media screen and (min-width: $break-large) {
width: 90%;
}
}