mirror of
https://github.com/mastermindzh/rickvanlieshout.com
synced 2024-10-22 16:49:19 +02:00
Update
This commit is contained in:
wpioneer
parent
a044ccf244
commit
e5ca5bc98b
22
README.md
22
README.md
@ -10,3 +10,25 @@ Install this starter (assuming Gatsby is installed) by running from your CLI:
|
||||
|
||||
|
||||
|
||||
## License
|
||||
The MIT license.
|
||||
|
||||
Copyright (c) 2016 Alexandr Shelepenok [ashk.io](http://ashk.io)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
||||
this software and associated documentation files (the "Software"), to deal in
|
||||
the Software without restriction, including without limitation the rights to
|
||||
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
|
||||
of the Software, and to permit persons to whom the Software is furnished to do
|
||||
so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
2
app.js
2
app.js
@ -1,4 +1,4 @@
|
||||
exports.loadContext = function (callback) {
|
||||
exports.loadContext = function(callback) {
|
||||
let context = require.context('./pages', true)
|
||||
if (module.hot) {
|
||||
module.hot.accept(context.id, () => {
|
||||
|
||||
@ -1 +1 @@
|
||||
import './style.sss';
|
||||
import './style.sss'
|
||||
@ -6,18 +6,21 @@ import './style.sss'
|
||||
|
||||
class BlogNav extends React.Component {
|
||||
render() {
|
||||
const { location } = this.props
|
||||
const {location} = this.props
|
||||
return (
|
||||
<nav className='blog-nav'>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/" className={location.pathname === link('/')?"current":null}>Articles</Link>
|
||||
<Link to="/" className={ location.pathname === link('/') ? "current" : null }> Articles
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/about" className={location.pathname === link('/about')?"current":null}>About me</Link>
|
||||
<Link to="/about" className={ location.pathname === link('/about') ? "current" : null }> About me
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/contact" className={location.pathname === link('/contact')?"current":null}>Contact me</Link>
|
||||
<Link to="/contact" className={ location.pathname === link('/contact') ? "current" : null }> Contact me
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
@ -25,7 +28,7 @@ class BlogNav extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
BlogNav.propTypes = {
|
||||
BlogNav.propTypes = {
|
||||
location: React.PropTypes.object,
|
||||
}
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ import './style.sss';
|
||||
|
||||
class BlogPage extends React.Component {
|
||||
render() {
|
||||
const { route } = this.props
|
||||
const {route} = this.props
|
||||
const post = route.page.data
|
||||
|
||||
return (
|
||||
@ -22,8 +22,8 @@ class BlogPage extends React.Component {
|
||||
<div className='main-inner'>
|
||||
<div className='blog-page'>
|
||||
<div className='text'>
|
||||
<h1>{post.title}</h1>
|
||||
<div dangerouslySetInnerHTML={{__html: post.body}}/>
|
||||
<h1>{ post.title }</h1>
|
||||
<div dangerouslySetInnerHTML={ { __html: post.body} } />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -13,35 +13,33 @@ import '../../static/css/highlight.css'
|
||||
|
||||
class BlogPost extends React.Component {
|
||||
render() {
|
||||
const { route } = this.props
|
||||
const {route} = this.props
|
||||
const post = route.page.data
|
||||
const home = (
|
||||
<div>
|
||||
<Link
|
||||
className='gohome'
|
||||
to={link('/')}
|
||||
>
|
||||
All Articles
|
||||
<Link className='gohome' to={ link('/') }> All Articles
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<div>
|
||||
{home}
|
||||
{ home }
|
||||
<div className='blog-single'>
|
||||
<div className='text'>
|
||||
<h1>{post.title}</h1>
|
||||
<div dangerouslySetInnerHTML={{__html: post.body}}/>
|
||||
<h1>{ post.title }</h1>
|
||||
<div dangerouslySetInnerHTML={ { __html: post.body} } />
|
||||
<div className='date-published'>
|
||||
<em>Published {moment(post.datePublished).format('D MMM YYYY')}</em>
|
||||
<em>Published { moment(post.datePublished).format('D MMM YYYY') }</em>
|
||||
</div>
|
||||
</div>
|
||||
<div className='footer'>
|
||||
<ReadNext post={post} {...this.props}/>
|
||||
<ReadNext post={ post } {...this.props}/>
|
||||
<hr></hr>
|
||||
<p>
|
||||
{config.siteDescr} <a href={config.twitter}><br></br> <strong>{config.authorName}</strong> on Twitter</a>
|
||||
{ config.siteDescr }
|
||||
<a href={ config.twitter }>
|
||||
<br></br> <strong>{ config.authorName }</strong> on Twitter</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -50,7 +48,6 @@ class BlogPost extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
BlogPost.propTypes = {
|
||||
post: React.PropTypes.object.isRequired,
|
||||
pages: React.PropTypes.array,
|
||||
|
||||
@ -19,16 +19,28 @@ class BlogSocial extends React.Component {
|
||||
return (
|
||||
<div className='blog-social'>
|
||||
<ul>
|
||||
<li><a href={twitter}><i className='fa fa-twitter'></i></a></li>
|
||||
<li><a href={github}><i className='fa fa-github-alt'></i></a></li>
|
||||
<li><a href={vk}><i className='fa fa-vk'></i></a></li>
|
||||
<li>
|
||||
<a href={ twitter }><i className='fa fa-twitter'></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={ github }><i className='fa fa-github-alt'></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={ vk }><i className='fa fa-vk'></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href={email}><i className='fa fa-envelope-o'></i></a></li>
|
||||
<li><a href={telegram}><i className='fa fa-paper-plane'></i></a></li>
|
||||
<li>
|
||||
<a href={ email }><i className='fa fa-envelope-o'></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={ telegram }><i className='fa fa-paper-plane'></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href={rss}><i className='fa fa-rss'></i></a></li>
|
||||
<li>
|
||||
<a href={ rss }><i className='fa fa-rss'></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -7,46 +7,28 @@ import './style.sss'
|
||||
|
||||
class ReadNext extends React.Component {
|
||||
render() {
|
||||
const { pages, post } = this.props
|
||||
const { readNext } = post
|
||||
const {pages, post} = this.props
|
||||
const {readNext} = post
|
||||
|
||||
let nextPost
|
||||
if (readNext) {
|
||||
nextPost = find(pages, (page) =>
|
||||
includes(page.path, readNext)
|
||||
nextPost = find(pages, (page) => includes(page.path, readNext)
|
||||
)
|
||||
}
|
||||
if (!nextPost) {
|
||||
return React.createElement('noscript', null)
|
||||
} else {
|
||||
nextPost = find(pages, (page) =>
|
||||
includes(page.path, readNext.slice(1, -1))
|
||||
nextPost = find(pages, (page) => includes(page.path, readNext.slice(1, -1))
|
||||
)
|
||||
const description = nextPost.data.description
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h6
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
margin: '20px 0 0'
|
||||
}}
|
||||
>
|
||||
READ THIS NEXT:
|
||||
</h6>
|
||||
<h3
|
||||
style={{
|
||||
margin: '5px 0 0'
|
||||
}}
|
||||
>
|
||||
<Link
|
||||
to={nextPost.path}
|
||||
query={{readNext: true}}
|
||||
>
|
||||
{nextPost.data.title}
|
||||
</Link>
|
||||
</h3>
|
||||
<p className='description'>{description}</p>
|
||||
<h6 style={ { fontSize: '16px', margin: '20px 0 0'} }>READ THIS NEXT:</h6>
|
||||
<h3 style={ { margin: '5px 0 0'} }><Link to={ nextPost.path } query={ { readNext: true} } > { nextPost.data.title } </Link></h3>
|
||||
<p className='description'>
|
||||
{ description }
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -8,41 +8,17 @@ import './style.sss'
|
||||
|
||||
class SidebarLeft extends React.Component {
|
||||
render() {
|
||||
const { location, children } = this.props
|
||||
const {location, children} = this.props
|
||||
let header
|
||||
|
||||
header = (
|
||||
<header>
|
||||
<Link
|
||||
style={{
|
||||
textDecoration: 'none',
|
||||
borderBottom: 'none',
|
||||
outline: 'none'
|
||||
}}
|
||||
to={link('/')}
|
||||
>
|
||||
<img
|
||||
src='./images/photo9.jpg'
|
||||
width='75'
|
||||
height='75'
|
||||
/>
|
||||
<Link style={ { textDecoration: 'none', borderBottom: 'none', outline: 'none'} } to={ link('/') }>
|
||||
<img src='./images/photo9.jpg' width='75' height='75' />
|
||||
</Link>
|
||||
|
||||
<h1>
|
||||
<Link
|
||||
style={{
|
||||
textDecoration: 'none',
|
||||
borderBottom: 'none',
|
||||
color: 'inherit'
|
||||
}}
|
||||
to={link('/')}
|
||||
>
|
||||
{config.siteTitle}
|
||||
</Link>
|
||||
</h1>
|
||||
|
||||
<h1><Link style={ { textDecoration: 'none', borderBottom: 'none', color: 'inherit'} } to={ link('/') } > { config.siteTitle } </Link></h1>
|
||||
<p>
|
||||
{config.siteDescr}
|
||||
{ config.siteDescr }
|
||||
</p>
|
||||
</header>
|
||||
);
|
||||
@ -52,7 +28,7 @@ class SidebarLeft extends React.Component {
|
||||
<div className='sidebar-inner'>
|
||||
<div className='blog-details'>
|
||||
<header>
|
||||
{header}
|
||||
{ header }
|
||||
</header>
|
||||
</div>
|
||||
<div className='blog-options'>
|
||||
|
||||
@ -46,7 +46,9 @@ module.exports = function(config, env) {
|
||||
|
||||
config.plugin('extract-css',
|
||||
ExtractTextPlugin,
|
||||
["styles.css", { allChunks: true }]);
|
||||
["styles.css", {
|
||||
allChunks: true
|
||||
}]);
|
||||
|
||||
return config
|
||||
};
|
||||
27
html.js
27
html.js
@ -3,12 +3,12 @@ import DocumentTitle from 'react-document-title'
|
||||
import { link } from 'gatsby-helpers'
|
||||
|
||||
module.exports = React.createClass({
|
||||
propTypes () {
|
||||
propTypes() {
|
||||
return {
|
||||
title: React.PropTypes.string,
|
||||
}
|
||||
},
|
||||
render () {
|
||||
render() {
|
||||
let title = DocumentTitle.rewind()
|
||||
if (this.props.title) {
|
||||
title = this.props.title
|
||||
@ -16,26 +16,25 @@ module.exports = React.createClass({
|
||||
|
||||
let cssLink
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
cssLink = <link rel="stylesheet" href={link('/styles.css')} />
|
||||
cssLink = <link rel="stylesheet" href={ link('/styles.css') } />
|
||||
}
|
||||
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charSet="utf-8"/>
|
||||
<meta httpEquiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0 maximum-scale=1.0"
|
||||
/>
|
||||
<title>{title}</title>
|
||||
<link rel="shortcut icon" href={this.props.favicon}/>
|
||||
<meta charSet="utf-8" />
|
||||
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0" />
|
||||
<title>
|
||||
{ title }
|
||||
</title>
|
||||
<link rel="shortcut icon" href={ this.props.favicon } />
|
||||
<link href='https://fonts.googleapis.com/css?family=Roboto:700|Raleway:600,700|PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css' />
|
||||
{cssLink}
|
||||
{ cssLink }
|
||||
</head>
|
||||
<body>
|
||||
<div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />
|
||||
<script src={link('/bundle.js')}/>
|
||||
<div id="react-mount" dangerouslySetInnerHTML={ { __html: this.props.body} } />
|
||||
<script src={ link('/bundle.js') } />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
|
||||
@ -8,11 +8,11 @@ import '../static/css/typography.css'
|
||||
|
||||
class Template extends React.Component {
|
||||
render() {
|
||||
const { location, children } = this.props
|
||||
const {location, children} = this.props
|
||||
|
||||
return (
|
||||
<div className='wrapper'>
|
||||
{children}
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -14,8 +14,7 @@ class BlogIndex extends React.Component {
|
||||
render() {
|
||||
const pageLinks = []
|
||||
// Sort pages.
|
||||
const sortedPages = sortBy(this.props.route.pages, (page) =>
|
||||
access(page, 'data.date')
|
||||
const sortedPages = sortBy(this.props.route.pages, (page) => access(page, 'data.date')
|
||||
).reverse()
|
||||
sortedPages.forEach((page) => {
|
||||
if (access(page, 'file.ext') === 'md' && access(page, 'data.layout') === 'post') {
|
||||
@ -26,30 +25,14 @@ class BlogIndex extends React.Component {
|
||||
|
||||
pageLinks.push(
|
||||
<div className='blog-post'>
|
||||
<time dateTime={moment(datePublished).format('MMMM D, YYYY')}>{moment(datePublished).format('MMMM YYYY')}</time>
|
||||
<span
|
||||
style={{
|
||||
padding: '5px'
|
||||
}}
|
||||
>
|
||||
</span>
|
||||
<span className='blog-category'>{category}</span>
|
||||
<h2>
|
||||
<Link
|
||||
style={{
|
||||
borderBottom: 'none',
|
||||
}}
|
||||
to={link(page.path)}
|
||||
>
|
||||
{title}
|
||||
</Link>
|
||||
</h2>
|
||||
<p dangerouslySetInnerHTML={{__html: description}}/>
|
||||
<Link
|
||||
className='readmore'
|
||||
to={link(page.path)}
|
||||
>
|
||||
Read
|
||||
<time dateTime={ moment(datePublished).format('MMMM D, YYYY') }>
|
||||
{ moment(datePublished).format('MMMM YYYY') }
|
||||
</time>
|
||||
<span style={ { padding: '5px'} }></span>
|
||||
<span className='blog-category'>{ category }</span>
|
||||
<h2><Link style={ { borderBottom: 'none',} } to={ link(page.path) } > { title } </Link></h2>
|
||||
<p dangerouslySetInnerHTML={ { __html: description} } />
|
||||
<Link className='readmore' to={ link(page.path) }> Read
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
@ -57,13 +40,13 @@ class BlogIndex extends React.Component {
|
||||
})
|
||||
|
||||
return (
|
||||
<DocumentTitle title={config.siteTitle}>
|
||||
<DocumentTitle title={ config.siteTitle }>
|
||||
<div>
|
||||
<SidebarLeft {...this.props}/>
|
||||
<div className='content'>
|
||||
<div className='main'>
|
||||
<div className='main-inner'>
|
||||
{pageLinks}
|
||||
{ pageLinks }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -17,8 +17,6 @@ p > code, span > code {
|
||||
overflow: auto;
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
|
||||
|
||||
pre code {
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
@ -27,89 +25,57 @@ pre code {
|
||||
color: #333;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
.hljs-comment, .hljs-quote {
|
||||
color: #998;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-subst {
|
||||
.hljs-keyword, .hljs-selector-tag, .hljs-subst {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-number,
|
||||
.hljs-literal,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-tag .hljs-attr {
|
||||
.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr {
|
||||
color: #008080;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-doctag {
|
||||
.hljs-string, .hljs-doctag {
|
||||
color: #d14;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-selector-id {
|
||||
.hljs-title, .hljs-section, .hljs-selector-id {
|
||||
color: #900;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-subst {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.hljs-type,
|
||||
.hljs-class .hljs-title {
|
||||
.hljs-type, .hljs-class .hljs-title {
|
||||
color: #458;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-tag,
|
||||
.hljs-name,
|
||||
.hljs-attribute {
|
||||
.hljs-tag, .hljs-name, .hljs-attribute {
|
||||
color: #000080;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.hljs-regexp,
|
||||
.hljs-link {
|
||||
.hljs-regexp, .hljs-link {
|
||||
color: #009926;
|
||||
}
|
||||
|
||||
.hljs-symbol,
|
||||
.hljs-bullet {
|
||||
.hljs-symbol, .hljs-bullet {
|
||||
color: #990073;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-builtin-name {
|
||||
.hljs-built_in, .hljs-builtin-name {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-meta {
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
background: #fdd;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
background: #dfd;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -2,65 +2,29 @@ html {
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* HTML5 display definitions
|
||||
========================================================================== */
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary,
|
||||
cite,
|
||||
code,
|
||||
small {
|
||||
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary, cite, code, small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body,
|
||||
article,
|
||||
section,
|
||||
footer,
|
||||
header,
|
||||
div,
|
||||
input,
|
||||
nav,
|
||||
article ol,
|
||||
article ul,
|
||||
blockquote,
|
||||
figure {
|
||||
body, article, section, footer, header, div, input, nav, article ol, article ul, blockquote, figure {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block;
|
||||
/* 1 */
|
||||
vertical-align: baseline;
|
||||
/* 2 */
|
||||
audio, canvas, progress, video {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
[hidden], template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -69,9 +33,7 @@ template {
|
||||
a {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
a:active, a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
@ -80,47 +42,35 @@ a:hover {
|
||||
abbr {
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
b, strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 70%;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
sub, sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
em,
|
||||
i {
|
||||
em, i {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
@ -131,7 +81,6 @@ i {
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -143,15 +92,10 @@ hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
code, kbd, pre, samp {
|
||||
font-family: monospace, monospace;
|
||||
}
|
||||
|
||||
@ -161,9 +105,7 @@ table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
td, th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
/*! Gatsby Typography. Based on Gutengerg <- https://github.com/matejlatin/Gutenberg/ -> */
|
||||
|
||||
/*! Gatsby Lumen Typography. Based on Gutengerg <- https://github.com/matejlatin/Gutenberg/ -> */
|
||||
html, body {
|
||||
font-size: 16px;
|
||||
font-size: 100%;
|
||||
@ -9,6 +8,7 @@ html, body {
|
||||
|
||||
/* Paragraph
|
||||
========================================================================== */
|
||||
|
||||
/* Headings
|
||||
========================================================================== */
|
||||
|
||||
@ -16,7 +16,6 @@ h1, h2, h3, h4, h5, h6 {
|
||||
font-family: "Raleway", Helvetica, Arial, sans-serif;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
font-size: 2.5rem;
|
||||
@ -27,7 +26,6 @@ h1 {
|
||||
margin-bottom: 26px;
|
||||
margin-bottom: 1.625rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 27px;
|
||||
font-size: 1.6875rem;
|
||||
@ -38,7 +36,6 @@ h2 {
|
||||
margin-bottom: 13px;
|
||||
margin-bottom: 0.8125rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
font-size: 1.375rem;
|
||||
@ -49,7 +46,6 @@ h3 {
|
||||
margin-bottom: 13px;
|
||||
margin-bottom: 0.8125rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 19.2px;
|
||||
font-size: 1.2rem;
|
||||
@ -60,7 +56,6 @@ h4 {
|
||||
margin-bottom: 13px;
|
||||
margin-bottom: 0.8125rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
@ -71,7 +66,6 @@ h5 {
|
||||
margin-bottom: 13px;
|
||||
margin-bottom: 0.8125rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
@ -82,24 +76,18 @@ h6 {
|
||||
margin-bottom: 13px;
|
||||
margin-bottom: 0.8125rem;
|
||||
}
|
||||
|
||||
h1 + h2 {
|
||||
margin-top: 26px;
|
||||
margin-top: 1.625rem;
|
||||
}
|
||||
|
||||
h2 + h3,
|
||||
h3 + h4,
|
||||
h4 + h5 {
|
||||
h2 + h3, h3 + h4, h4 + h5 {
|
||||
margin-top: 13px;
|
||||
margin-top: 0.8125rem;
|
||||
}
|
||||
|
||||
h5 + h6 {
|
||||
margin-top: -13px;
|
||||
margin-top: -0.8125rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
@ -107,18 +95,15 @@ h6 {
|
||||
|
||||
/* Links
|
||||
========================================================================== */
|
||||
|
||||
a {
|
||||
color: #5d93ff;
|
||||
text-decoration: none;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
border-bottom: 1px solid;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #222;
|
||||
}
|
||||
@ -130,7 +115,6 @@ a:active {
|
||||
color: #222;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
h2 a {
|
||||
color: #222;
|
||||
}
|
||||
@ -146,17 +130,13 @@ figcaption {
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
padding-left: 1.4375rem;
|
||||
}
|
||||
|
||||
cite {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
figure blockquote {
|
||||
padding: 31px 0px;
|
||||
padding: 1.722222222222222rem 0rem;
|
||||
@ -169,52 +149,41 @@ figure blockquote p {
|
||||
line-height: 46.5px;
|
||||
line-height: 2.583333333333334rem;
|
||||
}
|
||||
|
||||
figure.floatLeft,
|
||||
figure.floatRight {
|
||||
figure.floatLeft, figure.floatRight {
|
||||
max-width: 315px;
|
||||
max-width: 17.5rem;
|
||||
padding: 0px 31px;
|
||||
padding: 0rem 1.722222222222222rem;
|
||||
}
|
||||
figure.floatLeft blockquote,
|
||||
figure.floatRight blockquote {
|
||||
figure.floatLeft blockquote, figure.floatRight blockquote {
|
||||
text-align: left;
|
||||
padding: 0px;
|
||||
padding: 0rem;
|
||||
}
|
||||
figure.floatLeft blockquote p,
|
||||
figure.floatRight blockquote p {
|
||||
figure.floatLeft blockquote p, figure.floatRight blockquote p {
|
||||
font-size: 19.2px;
|
||||
font-size: 1.2rem;
|
||||
line-height: 31px;
|
||||
line-height: 1.722222222222222rem;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
line-height: 31px;
|
||||
line-height: 1.722222222222222rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.floatLeft {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.floatCenter {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.floatRight {
|
||||
float: right;
|
||||
}
|
||||
|
||||
ul li,
|
||||
ol li {
|
||||
ul li, ol li {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: 52px;
|
||||
margin-top: 3.25rem;
|
||||
@ -232,51 +201,43 @@ hr {
|
||||
background-image: linear-gradient(to bottom, transparent 1px, transparent 11px, #222 11px, #222 15px, transparent 15px, transparent 26px);
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
small {
|
||||
line-height: 13px;
|
||||
line-height: 0.8125rem;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 26px;
|
||||
padding: 1.625rem;
|
||||
}
|
||||
|
||||
.alignLeft {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.alignCenter {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.alignRight {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Put your styles below this line
|
||||
========================================================================== */
|
||||
@media screen and (min-width: 40em) {
|
||||
@media screen and (min-width:40em) {
|
||||
|
||||
/* Mixins
|
||||
========================================================================== */
|
||||
body,
|
||||
html {
|
||||
body, html {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
article {
|
||||
max-width: 945px;
|
||||
max-width: 52.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
font-size: 2.5rem;
|
||||
@ -287,7 +248,6 @@ code {
|
||||
margin-bottom: 31px;
|
||||
margin-bottom: 1.722222222222222rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 27px;
|
||||
font-size: 1.6875rem;
|
||||
@ -298,7 +258,6 @@ code {
|
||||
margin-bottom: 15.5px;
|
||||
margin-bottom: 0.861111111111111rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
font-size: 1.375rem;
|
||||
@ -309,7 +268,6 @@ code {
|
||||
margin-bottom: 15.5px;
|
||||
margin-bottom: 0.861111111111111rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 19.2px;
|
||||
font-size: 1.2rem;
|
||||
@ -320,7 +278,6 @@ code {
|
||||
margin-bottom: 15.5px;
|
||||
margin-bottom: 0.861111111111111rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
@ -331,7 +288,6 @@ code {
|
||||
margin-bottom: 15.5px;
|
||||
margin-bottom: 0.861111111111111rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
@ -342,31 +298,23 @@ code {
|
||||
margin-bottom: 15.5px;
|
||||
margin-bottom: 0.861111111111111rem;
|
||||
}
|
||||
|
||||
h1 + h2 {
|
||||
margin-top: 31px;
|
||||
margin-top: 1.722222222222222rem;
|
||||
}
|
||||
|
||||
h2 + h3,
|
||||
h3 + h4,
|
||||
h4 + h5 {
|
||||
h2 + h3, h3 + h4, h4 + h5 {
|
||||
margin-top: 15.5px;
|
||||
margin-top: 0.861111111111111rem;
|
||||
}
|
||||
|
||||
h5 + h6 {
|
||||
margin-top: -15.5px;
|
||||
margin-top: -0.861111111111111rem;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
line-height: 31px;
|
||||
line-height: 1.722222222222222rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
figure blockquote {
|
||||
padding: 31px 0px;
|
||||
padding: 1.722222222222222rem 0rem;
|
||||
@ -379,56 +327,45 @@ code {
|
||||
line-height: 46.5px;
|
||||
line-height: 2.583333333333334rem;
|
||||
}
|
||||
|
||||
figure.floatLeft,
|
||||
figure.floatRight {
|
||||
figure.floatLeft, figure.floatRight {
|
||||
max-width: 315px;
|
||||
max-width: 17.5rem;
|
||||
padding: 0px 31px;
|
||||
padding: 0rem 1.722222222222222rem;
|
||||
}
|
||||
figure.floatLeft blockquote,
|
||||
figure.floatRight blockquote {
|
||||
figure.floatLeft blockquote, figure.floatRight blockquote {
|
||||
text-align: left;
|
||||
padding: 0px;
|
||||
padding: 0rem;
|
||||
}
|
||||
figure.floatLeft blockquote p,
|
||||
figure.floatRight blockquote p {
|
||||
figure.floatLeft blockquote p, figure.floatRight blockquote p {
|
||||
font-size: 19.2px;
|
||||
font-size: 1.2rem;
|
||||
line-height: 31px;
|
||||
line-height: 1.722222222222222rem;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
line-height: 31px;
|
||||
line-height: 1.722222222222222rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.floatLeft {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.floatCenter {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.floatRight {
|
||||
float: right;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
small {
|
||||
line-height: 15.5px;
|
||||
line-height: 0.861111111111111rem;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: 62px;
|
||||
margin-top: 3.444444444444445rem;
|
||||
@ -440,10 +377,8 @@ code {
|
||||
background-size: 100% 1.722222222222222rem;
|
||||
background-image: linear-gradient(to bottom, transparent 1px, transparent 13.5px, #222 13.5px, #222 17.5px, transparent 17.5px, transparent 31px);
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 31px;
|
||||
padding: 1.722222222222222rem;
|
||||
}
|
||||
|
||||
}
|
||||
@ -6,7 +6,7 @@ import { config } from 'config'
|
||||
|
||||
class MarkdownWrapper extends React.Component {
|
||||
render() {
|
||||
const { route } = this.props
|
||||
const {route} = this.props
|
||||
const post = route.page.data
|
||||
|
||||
let layout, template
|
||||
@ -19,9 +19,9 @@ class MarkdownWrapper extends React.Component {
|
||||
}
|
||||
|
||||
return (
|
||||
<DocumentTitle title={`${post.title} - ${config.siteTitle}`}>
|
||||
<DocumentTitle title={ `${post.title} - ${config.siteTitle}` }>
|
||||
<div>
|
||||
{template}
|
||||
{ template }
|
||||
</div>
|
||||
</DocumentTitle>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user