Move to CSS modules and Sass
This commit is contained in:
parent
299ffcadbb
commit
1221f8e0fe
|
@ -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>
|
||||
)
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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're lost</h2>
|
||||
<p>404 Page not found</p>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
@import "../static/stylesheets/variables.scss";
|
||||
|
||||
.post-content {
|
||||
.postContent {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.post-date {
|
||||
.postDate {
|
||||
float: right;
|
||||
h3 {
|
||||
font-weight: normal
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
}
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue