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 '../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 {
render () {
if (this.props.isLoading) {
return (
<div className="content-wrapper">
<div className={contentStyle.contentWrapper}>
<h1>Loading</h1>
</div>
);
}
return (
<div className="content-wrapper">
<div className={contentStyle.contentWrapper}>
<h1>About</h1>
<div className="content" dangerouslySetInnerHTML={{__html: this.props.about.body}}>
<div className={contentStyle.content} dangerouslySetInnerHTML={{__html: this.props.about.body}}>
</div>
</div>
)

View File

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

View File

@ -1,5 +1,6 @@
import React from 'react';
import '../static/stylesheets/globals.scss';
import contentStyle from '../static/stylesheets/content.scss';
export const NotFoundPage = (props) => {
if (props.location.pathname === '/') {
@ -7,7 +8,7 @@ export const NotFoundPage = (props) => {
}
return (
<div>
<div className="content-wrapper">
<div className={contentStyle.contentWrapper}>
<h1>Uhm... WHAT?</h1>
<h2>Looks like you&apos;re lost</h2>
<p>404 Page not found</p>

View File

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

View File

@ -1,10 +1,10 @@
@import "../static/stylesheets/variables.scss";
.post-content {
.postContent {
clear: both;
}
.post-date {
.postDate {
float: right;
h3 {
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";
: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) {
font-family: $font-paragraph;
color: $black;
@ -30,11 +11,3 @@
font-family: $font-header;
}
}
:global(.content) {
box-sizing: border-box;
margin: 0 auto;
@media screen and (min-width: $break-large) {
width: 90%;
}
}