mastermindzh/rickvanlieshout.com
1
0
Fork 0
mirror of https://github.com/mastermindzh/rickvanlieshout.com synced 2024-12-26 14:59:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
wpioneer 2016-03-21 20:03:01 +03:00
parent a044ccf244
commit e5ca5bc98b
23 changed files with 941 additions and 1122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
README.md
View File

@ -10,3 +10,25 @@ Install this starter (assuming Gatsby is installed) by running from your CLI:
![](http://i.imgur.com/422y5GV.png) ![](http://i.imgur.com/422y5GV.png)
## 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.

18
app.js
View File

@ -1,10 +1,10 @@
exports.loadContext = function (callback) { exports.loadContext = function(callback) {
let context = require.context('./pages', true) let context = require.context('./pages', true)
if (module.hot) { if (module.hot) {
module.hot.accept(context.id, () => { module.hot.accept(context.id, () => {
context = require.context('./pages', true) context = require.context('./pages', true)
return callback(context) return callback(context)
}) })
} }
return callback(context) return callback(context)
} }

2
components/BlogContent/index.jsx
View File

@ -1 +1 @@
import './style.sss'; import './style.sss'

30
components/BlogContent/style.sss
View File

@ -1,24 +1,24 @@
.wrapper .wrapper
lost-center: 1070px lost-center: 1070px
.content .content
lost-column: 2/3 lost-column: 2/3
.main-inner .main-inner
padding: 40px 35px padding: 40px 35px
@media screen and (max-width: 1100px) @media screen and (max-width: 1100px)
.content .content
lost-column: 2/4 lost-column: 2/4
.main-inner .main-inner
padding: 35px 20px padding: 35px 20px
@media screen and (max-width: 900px) @media screen and (max-width: 900px)
.content .content
lost-column: 7/12 lost-column: 7/12
.main-inner .main-inner
padding: 30px 20px padding: 30px 20px
@media screen and (max-width: 500px) @media screen and (max-width: 500px)
.content .content
lost-column: 4/4 lost-column: 4/4
.main-inner .main-inner
padding: 25px 20px padding: 25px 20px

43
components/BlogNav/index.jsx
View File

@ -5,28 +5,31 @@ import { link } from 'gatsby-helpers'
import './style.sss' import './style.sss'
class BlogNav extends React.Component { class BlogNav extends React.Component {
render() { render() {
const { location } = this.props const {location} = this.props
return ( return (
<nav className='blog-nav'> <nav className='blog-nav'>
<ul> <ul>
<li> <li>
<Link to="/" className={location.pathname === link('/')?"current":null}>Articles</Link> <Link to="/" className={ location.pathname === link('/') ? "current" : null }> Articles
</li> </Link>
<li> </li>
<Link to="/about" className={location.pathname === link('/about')?"current":null}>About me</Link> <li>
</li> <Link to="/about" className={ location.pathname === link('/about') ? "current" : null }> About me
<li> </Link>
<Link to="/contact" className={location.pathname === link('/contact')?"current":null}>Contact me</Link> </li>
</li> <li>
</ul> <Link to="/contact" className={ location.pathname === link('/contact') ? "current" : null }> Contact me
</nav> </Link>
); </li>
} </ul>
</nav>
);
}
} }
BlogNav.propTypes = { BlogNav.propTypes = {
location: React.PropTypes.object, location: React.PropTypes.object,
} }
export default BlogNav export default BlogNav

24
components/BlogNav/style.sss
View File

@ -1,23 +1,23 @@
.blog-nav .blog-nav
margin: 20px 0px 10px margin: 20px 0px 10px
.blog-nav ul .blog-nav ul
list-style: none list-style: none
padding-left: 0 padding-left: 0
.blog-nav ul li .blog-nav ul li
margin: 10px 0 10px margin: 10px 0 10px
.blog-nav ul li a .blog-nav ul li a
font-size: 16px font-size: 16px
line-heigh: 26px line-heigh: 26px
margin-bottom: 26px margin-bottom: 26px
border-bottom: 0 border-bottom: 0
font-weight: 400 font-weight: 400
color: #222 color: #222
.blog-nav ul li a.current .blog-nav ul li a.current
border-bottom: 1px solid border-bottom: 1px solid
.blog-nav ul li a:hover .blog-nav ul li a:hover
border-bottom: 1px solid border-bottom: 1px solid

38
components/BlogPage/index.jsx
View File

@ -10,33 +10,33 @@ import { config } from 'config'
import './style.sss'; import './style.sss';
class BlogPage extends React.Component { class BlogPage extends React.Component {
render() { render() {
const { route } = this.props const {route} = this.props
const post = route.page.data const post = route.page.data
return ( return (
<div> <div>
<SidebarLeft {...this.props}/> <SidebarLeft {...this.props}/>
<div className='content'> <div className='content'>
<div className='main'> <div className='main'>
<div className='main-inner'> <div className='main-inner'>
<div className='blog-page'> <div className='blog-page'>
<div className='text'> <div className='text'>
<h1>{post.title}</h1> <h1>{ post.title }</h1>
<div dangerouslySetInnerHTML={{__html: post.body}}/> <div dangerouslySetInnerHTML={ { __html: post.body} } />
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> );
</div> }
);
}
} }
BlogPage.propTypes = { BlogPage.propTypes = {
post: React.PropTypes.object.isRequired, post: React.PropTypes.object.isRequired,
pages: React.PropTypes.array, pages: React.PropTypes.array,
} }
export default BlogPage export default BlogPage

18
components/BlogPage/style.sss
View File

@ -1,16 +1,16 @@
.blog-page .blog-page
margin-bottom: 40px margin-bottom: 40px
.blog-page h1 .blog-page h1
font-size: responsive 20px 36px font-size: responsive 20px 36px
margin-top: 0 margin-top: 0
.blog-page p .blog-page p
font-size: responsive 14px 16px font-size: responsive 14px 16px
line-height: 1.5 line-height: 1.5
margin-top: 10px margin-top: 10px
@media (max-width: 900px) @media (max-width: 900px)
.blog-single .text, .blog-single .text,
.blog-single .footer .blog-single .footer
padding: 0 15px padding: 0 15px

71
components/BlogPost/index.jsx
View File

@ -12,48 +12,45 @@ import './style.sss'
import '../../static/css/highlight.css' import '../../static/css/highlight.css'
class BlogPost extends React.Component { class BlogPost extends React.Component {
render() { render() {
const { route } = this.props const {route} = this.props
const post = route.page.data const post = route.page.data
const home = ( const home = (
<div>
<Link
className='gohome'
to={link('/')}
>
All Articles
</Link>
</div>
)
return (
<div> <div>
{home} <Link className='gohome' to={ link('/') }> All Articles
<div className='blog-single'> </Link>
<div className='text'>
<h1>{post.title}</h1>
<div dangerouslySetInnerHTML={{__html: post.body}}/>
<div className='date-published'>
<em>Published {moment(post.datePublished).format('D MMM YYYY')}</em>
</div>
</div>
<div className='footer'>
<ReadNext post={post} {...this.props}/>
<hr></hr>
<p>
{config.siteDescr} <a href={config.twitter}><br></br> <strong>{config.authorName}</strong> on Twitter</a>
</p>
</div>
</div>
</div> </div>
); )
}
return (
<div>
{ home }
<div className='blog-single'>
<div className='text'>
<h1>{ post.title }</h1>
<div dangerouslySetInnerHTML={ { __html: post.body} } />
<div className='date-published'>
<em>Published { moment(post.datePublished).format('D MMM YYYY') }</em>
</div>
</div>
<div className='footer'>
<ReadNext post={ post } {...this.props}/>
<hr></hr>
<p>
{ config.siteDescr }
<a href={ config.twitter }>
<br></br> <strong>{ config.authorName }</strong> on Twitter</a>
</p>
</div>
</div>
</div>
);
}
} }
BlogPost.propTypes = { BlogPost.propTypes = {
post: React.PropTypes.object.isRequired, post: React.PropTypes.object.isRequired,
pages: React.PropTypes.array, pages: React.PropTypes.array,
} }
export default BlogPost export default BlogPost

146
components/BlogPost/style.sss
View File

@ -1,108 +1,108 @@
.blog-post .blog-post
margin-bottom: 30px margin-bottom: 30px
.blog-post:last-child .blog-post:last-child
margin-bottom: 10px margin-bottom: 10px
.blog-post h2 .blog-post h2
margin-top: 10px margin-top: 10px
line-height: 30px line-height: 30px
margin-bottom: 20px margin-bottom: 20px
.blog-post h2 a:hover .blog-post h2 a:hover
border-bottom: 1px solid border-bottom: 1px solid
.blog-post p .blog-post p
font-size: 16px font-size: 16px
line-height: 26px line-height: 26px
margin-bottom: 26px margin-bottom: 26px
.blog-post time .blog-post time
font-size: 14px font-size: 14px
color: #222 color: #222
font-weight: 600 font-weight: 600
text-transform: uppercase text-transform: uppercase
letter-spacing: 0.04rem letter-spacing: 0.04rem
font-family: "Roboto", Helvetica, Arial, sans-serif font-family: "Roboto", Helvetica, Arial, sans-serif
.blog-post .blog-category .blog-post .blog-category
font-size: 14px font-size: 14px
color: #f7a046 color: #f7a046
font-weight: 600 font-weight: 600
text-transform: uppercase text-transform: uppercase
letter-spacing: 0.04rem letter-spacing: 0.04rem
font-family: "Roboto", Helvetica, Arial, sans-serif font-family: "Roboto", Helvetica, Arial, sans-serif
.blog-post .readmore .blog-post .readmore
font-size: 16px font-size: 16px
color: #5d93ff color: #5d93ff
font-weight: 600 font-weight: 600
font-family: 'Raleway', Helvetica, Arial, sans-serif font-family: 'Raleway', Helvetica, Arial, sans-serif
.blog-post .readmore:hover .blog-post .readmore:hover
border-bottom: 1px solid border-bottom: 1px solid
.blog-single h1 .blog-single h1
text-align: center text-align: center
margin-top: 30px margin-top: 30px
.blog-single .text .blog-single .text
line-height: 31px line-height: 31px
line-height: 1.722222222222222rem line-height: 1.722222222222222rem
margin-bottom: 31px margin-bottom: 31px
margin-bottom: 1.722222222222222rem margin-bottom: 1.722222222222222rem
.blog-single h1, .blog-single h1,
.blog-single .date-published, .blog-single .date-published,
.blog-single .text div :not(figure) .blog-single .text div :not(figure)
max-width: 35rem max-width: 35rem
margin-left: auto margin-left: auto
margin-right: auto margin-right: auto
.blog-single .text img .blog-single .text img
max-width: 100% max-width: 100%
height: auto height: auto
.blog-single .footer .blog-single .footer
max-width: 35rem max-width: 35rem
margin-left: auto margin-left: auto
margin-right: auto margin-right: auto
line-height: 31px line-height: 31px
line-height: 1.722222222222222rem line-height: 1.722222222222222rem
margin-bottom: 31px margin-bottom: 31px
margin-bottom: 1.722222222222222rem margin-bottom: 1.722222222222222rem
.gohome .gohome
font-family: 'Raleway', Helvetica, Arial, sans-serif font-family: 'Raleway', Helvetica, Arial, sans-serif
font-size: 16px font-size: 16px
text-align: center text-align: center
color: #343e47 color: #343e47
font-weight: 600 font-weight: 600
position: fixed position: fixed
left: 20px left: 20px
top: 20px top: 20px
opacity: 0.5 opacity: 0.5
padding: 8px 18px padding: 8px 18px
border: 2px solid #343e47 !important border: 2px solid #343e47 !important
border-radius: 3px border-radius: 3px
.gohome:hover .gohome:hover
color: #201e28 color: #201e28
opacity: 1 opacity: 1
@media (max-width: 900px) @media (max-width: 900px)
.blog-single h1 .blog-single h1
margin-top: 15px margin-top: 15px
.blog-single .text, .blog-single .text,
.blog-single .footer .blog-single .footer
padding: 0 15px padding: 0 15px
line-height: 26px line-height: 26px
line-height: 1.625rem line-height: 1.625rem
margin: 0px 0px 26px margin: 0px 0px 26px
margin: 0rem 0rem 1.625rem margin: 0rem 0rem 1.625rem
.gohome .gohome
position: static position: static
margin: 20px auto 0 margin: 20px auto 0
text-align: center text-align: center
width: 85px width: 85px
display: block display: block

60
components/BlogSocial/index.jsx
View File

@ -7,32 +7,44 @@ import './style.sss'
import '../../static/fonts/fontawesome/style.css' import '../../static/fonts/fontawesome/style.css'
class BlogSocial extends React.Component { class BlogSocial extends React.Component {
render() { render() {
const twitter = config.blogTitle const twitter = config.blogTitle
const vk = config.vk const vk = config.vk
const rss = config.rss const rss = config.rss
const email = config.email const email = config.email
const github = config.github const github = config.github
const telegram = config.telegram const telegram = config.telegram
return ( return (
<div className='blog-social'> <div className='blog-social'>
<ul> <ul>
<li><a href={twitter}><i className='fa fa-twitter'></i></a></li> <li>
<li><a href={github}><i className='fa fa-github-alt'></i></a></li> <a href={ twitter }><i className='fa fa-twitter'></i></a>
<li><a href={vk}><i className='fa fa-vk'></i></a></li> </li>
</ul> <li>
<ul> <a href={ github }><i className='fa fa-github-alt'></i></a>
<li><a href={email}><i className='fa fa-envelope-o'></i></a></li> </li>
<li><a href={telegram}><i className='fa fa-paper-plane'></i></a></li> <li>
</ul> <a href={ vk }><i className='fa fa-vk'></i></a>
<ul> </li>
<li><a href={rss}><i className='fa fa-rss'></i></a></li> </ul>
</ul> <ul>
</div> <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>
</ul>
</div>
);
}
} }
export default BlogSocial export default BlogSocial

42
components/BlogSocial/style.sss
View File

@ -1,34 +1,34 @@
.blog-social .blog-social
margin-top: 30px margin-top: 30px
.blog-social ul .blog-social ul
list-style: none list-style: none
padding: 0 padding: 0
margin: 10px 0 margin: 10px 0
clear: fix-legacy clear: fix-legacy
.blog-social ul > li .blog-social ul > li
float: left float: left
margin-right: 5px margin-right: 5px
text-align: center text-align: center
line-height: 21px line-height: 21px
height: 24px height: 24px
width: 24px width: 24px
border-radius: 3px border-radius: 3px
background: #f4edde background: #f4edde
.blog-social ul > li:hover .blog-social ul > li:hover
background: #f4efe8 background: #f4efe8
.blog-social ul > li > a .blog-social ul > li > a
border-bottom: 0 border-bottom: 0
line-height: 21px line-height: 21px
cursor: pointer cursor: pointer
.blog-social ul > li > a > i .blog-social ul > li > a > i
color: #333 color: #333
font-size: 14px font-size: 14px
line-height: 21px line-height: 21px
.blog-social ul > li:hover a > i .blog-social ul > li:hover a > i
color: #222 color: #222

70
components/ReadNext/index.jsx
View File

@ -6,56 +6,38 @@ import find from 'lodash/find'
import './style.sss' import './style.sss'
class ReadNext extends React.Component { class ReadNext extends React.Component {
render() { render() {
const { pages, post } = this.props const {pages, post} = this.props
const { readNext } = post const {readNext} = post
let nextPost let nextPost
if (readNext) { if (readNext) {
nextPost = find(pages, (page) => nextPost = find(pages, (page) => includes(page.path, readNext)
includes(page.path, readNext) )
) }
} if (!nextPost) {
if (!nextPost) { return React.createElement('noscript', null)
return React.createElement('noscript', null) } else {
} 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
)
const description = nextPost.data.description
return ( return (
<div> <div>
<h6 <h6 style={ { fontSize: '16px', margin: '20px 0 0'} }>READ THIS NEXT:</h6>
style={{ <h3 style={ { margin: '5px 0 0'} }><Link to={ nextPost.path } query={ { readNext: true} } > { nextPost.data.title } </Link></h3>
fontSize: '16px', <p className='description'>
margin: '20px 0 0' { description }
}} </p>
> </div>
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>
);
} }
}
} }
ReadNext.propTypes = { ReadNext.propTypes = {
post: React.PropTypes.object.isRequired, post: React.PropTypes.object.isRequired,
pages: React.PropTypes.array, pages: React.PropTypes.array,
} }
export default ReadNext export default ReadNext

96
components/SidebarLeft/index.jsx
View File

@ -7,72 +7,48 @@ import BlogSocial from '../BlogSocial'
import './style.sss' import './style.sss'
class SidebarLeft extends React.Component { class SidebarLeft extends React.Component {
render() { render() {
const { location, children } = this.props const {location, children} = this.props
let header let header
header = ( header = (
<header>
<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>
<p>
{config.siteDescr}
</p>
</header>
);
return (
<div className='sidebar'>
<div className='sidebar-inner'>
<div className='blog-details'>
<header> <header>
{header} <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>
<p>
{ config.siteDescr }
</p>
</header> </header>
</div> );
<div className='blog-options'>
<BlogNav {...this.props}/> return (
<footer> <div className='sidebar'>
<BlogSocial {...this.props}/> <div className='sidebar-inner'>
<p className='copyright'> <div className='blog-details'>
&copy; All rights reserved. <header>
</p> { header }
</footer> </header>
</div> </div>
</div> <div className='blog-options'>
</div> <BlogNav {...this.props}/>
); <footer>
} <BlogSocial {...this.props}/>
<p className='copyright'>
&copy; All rights reserved.
</p>
</footer>
</div>
</div>
</div>
);
}
} }
SidebarLeft.propTypes = { SidebarLeft.propTypes = {
children: React.PropTypes.any, children: React.PropTypes.any,
location: React.PropTypes.object, location: React.PropTypes.object,
} }
export default SidebarLeft export default SidebarLeft

78
components/SidebarLeft/style.sss
View File

@ -1,59 +1,59 @@
.sidebar .sidebar
lost-column: 1/3 lost-column: 1/3
.sidebar .sidebar-inner .sidebar .sidebar-inner
position: relative position: relative
padding: 40px padding: 40px
.sidebar .sidebar-inner:after .sidebar .sidebar-inner:after
background: #eee background: #eee
background: linear-gradient(to bottom, #eee 0%, #eee 48%, #fff 100%) background: linear-gradient(to bottom, #eee 0%, #eee 48%, #fff 100%)
position: absolute position: absolute
content: '' content: ''
width: 1px width: 1px
height: 540px height: 540px
top: 30px top: 30px
right: -10px right: -10px
bottom: 0 bottom: 0
.sidebar .sidebar-inner img .sidebar .sidebar-inner img
display: inline-block display: inline-block
margin-bottom: 0 margin-bottom: 0
border-radius: 50% border-radius: 50%
background-clip: padding-box background-clip: padding-box
.sidebar .sidebar-inner h1, .sidebar .sidebar-inner h1,
.sidebar .sidebar-inner h2 .sidebar .sidebar-inner h2
font-size: responsive 16px 18px font-size: responsive 16px 18px
line-height: 1 line-height: 1
margin: 20px 0 10px margin: 20px 0 10px
.sidebar .sidebar-inner p .sidebar .sidebar-inner p
font-size: 14px font-size: 14px
color: #888 color: #888
line-height: 23px line-height: 23px
margin-bottom: 23px margin-bottom: 23px
.sidebar .sidebar-inner p.copyright .sidebar .sidebar-inner p.copyright
color: #b6b6b6 color: #b6b6b6
font-size: 12px font-size: 12px
@media (max-width: 1100px) @media (max-width: 1100px)
.sidebar .sidebar-inner .sidebar .sidebar-inner
padding: 35px 20px 0 padding: 35px 20px 0
.sidebar .sidebar
lost-column: 2/4 lost-column: 2/4
@media (max-width: 900px) @media (max-width: 900px)
.sidebar .sidebar
lost-column: 5/12 lost-column: 5/12
.sidebar .sidebar-inner .sidebar .sidebar-inner
padding: 30px 20px 0 padding: 30px 20px 0
@media (max-width: 500px) @media (max-width: 500px)
.sidebar .sidebar
lost-column: 4/4 lost-column: 4/4
.sidebar .sidebar-inner .sidebar .sidebar-inner
padding: 25px 20px 0 padding: 25px 20px 0
.sidebar .sidebar-inner:after .sidebar .sidebar-inner:after
display: none display: none

60
gatsby.config.js
View File

@ -10,43 +10,45 @@ module.exports = function(config, env) {
var is_production = env === 'production'; var is_production = env === 'production';
config.merge({ config.merge({
postcss: [ postcss: [
lost(), lost(),
rucksack({ rucksack({
autoprefixer: true autoprefixer: true
}) })
] ]
}); });
config.removeLoader('css'); config.removeLoader('css');
if (is_develop) { if (is_develop) {
config.loader('css', function(cfg) { config.loader('css', function(cfg) {
cfg.test = /\.css/; cfg.test = /\.css/;
cfg.loaders = ['style', 'css-loader', 'postcss-loader']; cfg.loaders = ['style', 'css-loader', 'postcss-loader'];
return cfg return cfg
}) })
config.loader('postcss', function(cfg) { config.loader('postcss', function(cfg) {
cfg.test = /\.sss/; cfg.test = /\.sss/;
cfg.loaders = ['style', 'css-loader', 'postcss-loader?parser=sugarss']; cfg.loaders = ['style', 'css-loader', 'postcss-loader?parser=sugarss'];
return cfg return cfg
}) })
} else { } else {
config.loader('css', function(cfg) { config.loader('css', function(cfg) {
cfg.test = /\.css/; cfg.test = /\.css/;
cfg.loader = ExtractTextPlugin.extract(['css-loader', 'postcss-loader']); cfg.loader = ExtractTextPlugin.extract(['css-loader', 'postcss-loader']);
return cfg return cfg
}) })
config.loader('postcss', function(cfg) { config.loader('postcss', function(cfg) {
cfg.test = /\.sss/; cfg.test = /\.sss/;
cfg.loader = ExtractTextPlugin.extract(['css-loader', 'postcss-loader?parser=sugarss']); cfg.loader = ExtractTextPlugin.extract(['css-loader', 'postcss-loader?parser=sugarss']);
return cfg return cfg
}) })
} }
config.plugin('extract-css', config.plugin('extract-css',
ExtractTextPlugin, ExtractTextPlugin,
["styles.css", { allChunks: true }]); ["styles.css", {
allChunks: true
}]);
return config return config
}; };

69
html.js
View File

@ -3,41 +3,40 @@ import DocumentTitle from 'react-document-title'
import { link } from 'gatsby-helpers' import { link } from 'gatsby-helpers'
module.exports = React.createClass({ module.exports = React.createClass({
propTypes () { propTypes() {
return { return {
title: React.PropTypes.string, title: React.PropTypes.string,
} }
}, },
render () { render() {
let title = DocumentTitle.rewind() let title = DocumentTitle.rewind()
if (this.props.title) { if (this.props.title) {
title = this.props.title title = this.props.title
} }
let cssLink let cssLink
if (process.env.NODE_ENV === 'production') { if (process.env.NODE_ENV === 'production') {
cssLink = <link rel="stylesheet" href={link('/styles.css')} /> cssLink = <link rel="stylesheet" href={ link('/styles.css') } />
} }
return ( return (
<html lang="en"> <html lang="en">
<head> <head>
<meta charSet="utf-8"/> <meta charSet="utf-8" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge"/> <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0" />
name="viewport" <title>
content="width=device-width, initial-scale=1.0 maximum-scale=1.0" { title }
/> </title>
<title>{title}</title> <link rel="shortcut icon" href={ this.props.favicon } />
<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' />
<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>
</head> <body>
<body> <div id="react-mount" dangerouslySetInnerHTML={ { __html: this.props.body} } />
<div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} /> <script src={ link('/bundle.js') } />
<script src={link('/bundle.js')}/> </body>
</body> </html>
</html> )
) },
},
}) })

22
pages/_template.jsx
View File

@ -7,21 +7,21 @@ import '../static/css/reset.css'
import '../static/css/typography.css' import '../static/css/typography.css'
class Template extends React.Component { class Template extends React.Component {
render() { render() {
const { location, children } = this.props const {location, children} = this.props
return ( return (
<div className='wrapper'> <div className='wrapper'>
{children} { children }
</div> </div>
); );
} }
} }
Template.propTypes = { Template.propTypes = {
children: React.PropTypes.any, children: React.PropTypes.any,
location: React.PropTypes.object, location: React.PropTypes.object,
route: React.PropTypes.object, route: React.PropTypes.object,
} }
export default Template export default Template

99
pages/index.jsx
View File

@ -11,70 +11,53 @@ import SidebarLeft from '../components/SidebarLeft'
import BlogContent from '../components/BlogContent' import BlogContent from '../components/BlogContent'
class BlogIndex extends React.Component { class BlogIndex extends React.Component {
render() { render() {
const pageLinks = [] const pageLinks = []
// Sort pages. // Sort pages.
const sortedPages = sortBy(this.props.route.pages, (page) => const sortedPages = sortBy(this.props.route.pages, (page) => access(page, 'data.date')
access(page, 'data.date') ).reverse()
).reverse() sortedPages.forEach((page) => {
sortedPages.forEach((page) => { if (access(page, 'file.ext') === 'md' && access(page, 'data.layout') === 'post') {
if (access(page, 'file.ext') === 'md' && access(page, 'data.layout') === 'post') { const title = access(page, 'data.title') || page.path
const title = access(page, 'data.title') || page.path const description = access(page, 'data.description')
const description = access(page, 'data.description') const datePublished = access(page, 'data.date')
const datePublished = access(page, 'data.date') const category = access(page, 'data.category')
const category = access(page, 'data.category')
pageLinks.push( pageLinks.push(
<div className='blog-post'> <div className='blog-post'>
<time dateTime={moment(datePublished).format('MMMM D, YYYY')}>{moment(datePublished).format('MMMM YYYY')}</time> <time dateTime={ moment(datePublished).format('MMMM D, YYYY') }>
<span { moment(datePublished).format('MMMM YYYY') }
style={{ </time>
padding: '5px' <span style={ { padding: '5px'} }></span>
}} <span className='blog-category'>{ category }</span>
> <h2><Link style={ { borderBottom: 'none',} } to={ link(page.path) } > { title } </Link></h2>
</span> <p dangerouslySetInnerHTML={ { __html: description} } />
<span className='blog-category'>{category}</span> <Link className='readmore' to={ link(page.path) }> Read
<h2> </Link>
<Link </div>
style={{ )
borderBottom: 'none', }
}} })
to={link(page.path)}
>
{title}
</Link>
</h2>
<p dangerouslySetInnerHTML={{__html: description}}/>
<Link
className='readmore'
to={link(page.path)}
>
Read
</Link>
</div>
)
}
})
return ( return (
<DocumentTitle title={config.siteTitle}> <DocumentTitle title={ config.siteTitle }>
<div> <div>
<SidebarLeft {...this.props}/> <SidebarLeft {...this.props}/>
<div className='content'> <div className='content'>
<div className='main'> <div className='main'>
<div className='main-inner'> <div className='main-inner'>
{pageLinks} { pageLinks }
</div>
</div>
</div>
</div> </div>
</div> </DocumentTitle>
</div> )
</div> }
</DocumentTitle>
)
}
} }
BlogIndex.propTypes = { BlogIndex.propTypes = {
route: React.PropTypes.object, route: React.PropTypes.object,
} }
export default BlogIndex export default BlogIndex

154
static/css/highlight.css
View File

@ -1,115 +1,81 @@
p > code, span > code { p > code, span > code {
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
white-space: pre; white-space: pre;
white-space: pre-wrap; white-space: pre-wrap;
white-space: pre-line; white-space: pre-line;
white-space: -pre-wrap; white-space: -pre-wrap;
white-space: -o-pre-wrap; white-space: -o-pre-wrap;
white-space: -moz-pre-wrap; white-space: -moz-pre-wrap;
white-space: -hp-pre-wrap; white-space: -hp-pre-wrap;
word-wrap: break-word; word-wrap: break-word;
background: #f8f8f8; background: #f8f8f8;
display: inline; display: inline;
font-family: Inconsolata, monospace, serif; font-family: Inconsolata, monospace, serif;
max-width: 100%; max-width: 100%;
overflow: auto; overflow: auto;
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
} }
pre code { pre code {
display: block; display: block;
border-radius: 3px; border-radius: 3px;
overflow-x: auto; overflow-x: auto;
padding: 0.5em 1em; padding: 0.5em 1em;
color: #333; color: #333;
background: #f8f8f8; background: #f8f8f8;
} }
.hljs-comment, .hljs-quote {
.hljs-comment, color: #998;
.hljs-quote { font-style: italic;
color: #998; }
font-style: italic; .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 {
color: #008080;
}
.hljs-string, .hljs-doctag {
color: #d14;
}
.hljs-title, .hljs-section, .hljs-selector-id {
color: #900;
font-weight: bold;
} }
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst { .hljs-subst {
color: #333; font-weight: normal;
font-weight: bold;
} }
.hljs-type, .hljs-class .hljs-title {
.hljs-number, color: #458;
.hljs-literal, font-weight: bold;
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
color: #008080;
} }
.hljs-tag, .hljs-name, .hljs-attribute {
.hljs-string, color: #000080;
.hljs-doctag { font-weight: normal;
color: #d14;
} }
.hljs-regexp, .hljs-link {
.hljs-title, color: #009926;
.hljs-section,
.hljs-selector-id {
color: #900;
font-weight: bold;
} }
.hljs-symbol, .hljs-bullet {
.hljs-subst { color: #990073;
font-weight: normal;
} }
.hljs-built_in, .hljs-builtin-name {
.hljs-type, color: #0086b3;
.hljs-class .hljs-title {
color: #458;
font-weight: bold;
} }
.hljs-tag,
.hljs-name,
.hljs-attribute {
color: #000080;
font-weight: normal;
}
.hljs-regexp,
.hljs-link {
color: #009926;
}
.hljs-symbol,
.hljs-bullet {
color: #990073;
}
.hljs-built_in,
.hljs-builtin-name {
color: #0086b3;
}
.hljs-meta { .hljs-meta {
color: #999; color: #999;
font-weight: bold; font-weight: bold;
} }
.hljs-deletion { .hljs-deletion {
background: #fdd; background: #fdd;
} }
.hljs-addition { .hljs-addition {
background: #dfd; background: #dfd;
} }
.hljs-emphasis { .hljs-emphasis {
font-style: italic; font-style: italic;
} }
.hljs-strong { .hljs-strong {
font-weight: bold; font-weight: bold;
} }

180
static/css/reset.css
View File

@ -1,176 +1,118 @@
html { html {
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
} }
body { body {
margin: 0; margin: 0;
} }
/* HTML5 display definitions /* HTML5 display definitions
========================================================================== */ ========================================================================== */
article, article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary, cite, code, small {
aside, display: block;
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, -webkit-box-sizing: border-box;
article, -moz-box-sizing: border-box;
section, box-sizing: border-box;
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 {
audio, display: inline-block; /* 1 */
canvas, vertical-align: baseline; /* 2 */
progress,
video {
display: inline-block;
/* 1 */
vertical-align: baseline;
/* 2 */
} }
audio:not([controls]) { audio:not([controls]) {
display: none; display: none;
height: 0; height: 0;
} }
[hidden], template {
[hidden], display: none;
template {
display: none;
} }
/* Links /* Links
========================================================================== */ ========================================================================== */
a { a {
background: transparent; background: transparent;
} }
a:active, a:hover {
a:active, outline: 0;
a:hover {
outline: 0;
} }
/* Text-level semantics /* Text-level semantics
========================================================================== */ ========================================================================== */
abbr { abbr {
letter-spacing: 0.1em; letter-spacing: 0.1em;
} }
abbr[title] { abbr[title] {
border-bottom: 1px dotted; border-bottom: 1px dotted;
} }
b, strong {
b, font-weight: bold;
strong {
font-weight: bold;
} }
dfn { dfn {
font-style: italic; font-style: italic;
} }
mark { mark {
background: #ff0; background: #ff0;
color: #000; color: #000;
} }
small { small {
font-size: 70%; font-size: 70%;
}
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
} }
sub,
sup { sup {
font-size: 75%; top: -0.5em;
line-height: 0;
position: relative;
vertical-align: baseline;
} }
sup {
top: -0.5em;
}
sub { sub {
bottom: -0.25em; bottom: -0.25em;
} }
em, i {
em, line-height: 0;
i { position: relative;
line-height: 0; vertical-align: baseline;
position: relative;
vertical-align: baseline;
} }
/* Embedded content /* Embedded content
========================================================================== */ ========================================================================== */
img { img {
border: 0; border: 0;
} }
svg:not(:root) { svg:not(:root) {
overflow: hidden; overflow: hidden;
} }
/* Grouping content /* Grouping content
========================================================================== */ ========================================================================== */
hr { hr {
-moz-box-sizing: content-box; -moz-box-sizing: content-box;
box-sizing: content-box; box-sizing: content-box;
height: 0; height: 0;
} }
pre { pre {
overflow: auto; overflow: auto;
} }
code, kbd, pre, samp {
code, font-family: monospace, monospace;
kbd,
pre,
samp {
font-family: monospace, monospace;
} }
/* Tables /* Tables
========================================================================== */ ========================================================================== */
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
} }
td, th {
td, padding: 0;
th {
padding: 0;
} }
/* Images /* Images
========================================================================== */ ========================================================================== */
img { img {
max-width: 100%; max-width: 100%;
display: block; display: block;
margin: inherit auto; margin: inherit auto;
} }

671
static/css/typography.css
View File

@ -1,449 +1,384 @@
/*! Gatsby Typography. Based on Gutengerg <- https://github.com/matejlatin/Gutenberg/ -> */ /*! Gatsby Lumen Typography. Based on Gutengerg <- https://github.com/matejlatin/Gutenberg/ -> */
html, body { html, body {
font-size: 16px; font-size: 16px;
font-size: 100%; font-size: 100%;
font-family: "PT Sans", Georgia, Times, serif; font-family: "PT Sans", Georgia, Times, serif;
color: #222; color: #222;
} }
/* Paragraph /* Paragraph
========================================================================== */ ========================================================================== */
/* Headings /* Headings
========================================================================== */ ========================================================================== */
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: "Raleway", Helvetica, Arial, sans-serif; font-family: "Raleway", Helvetica, Arial, sans-serif;
color: #222; color: #222;
} }
h1 { h1 {
font-size: 40px; font-size: 40px;
font-size: 2.5rem; font-size: 2.5rem;
line-height: 52px; line-height: 52px;
line-height: 3.25rem; line-height: 3.25rem;
margin-top: 104px; margin-top: 104px;
margin-top: 6.5rem; margin-top: 6.5rem;
margin-bottom: 26px; margin-bottom: 26px;
margin-bottom: 1.625rem; margin-bottom: 1.625rem;
} }
h2 { h2 {
font-size: 27px; font-size: 27px;
font-size: 1.6875rem; font-size: 1.6875rem;
line-height: 39px; line-height: 39px;
line-height: 2.4375rem; line-height: 2.4375rem;
margin-top: 65px; margin-top: 65px;
margin-top: 4.0625rem; margin-top: 4.0625rem;
margin-bottom: 13px; margin-bottom: 13px;
margin-bottom: 0.8125rem; margin-bottom: 0.8125rem;
} }
h3 { h3 {
font-size: 22px; font-size: 22px;
font-size: 1.375rem; font-size: 1.375rem;
line-height: 26px; line-height: 26px;
line-height: 1.625rem; line-height: 1.625rem;
margin-top: 52px; margin-top: 52px;
margin-top: 3.25rem; margin-top: 3.25rem;
margin-bottom: 13px; margin-bottom: 13px;
margin-bottom: 0.8125rem; margin-bottom: 0.8125rem;
} }
h4 { h4 {
font-size: 19.2px; font-size: 19.2px;
font-size: 1.2rem; font-size: 1.2rem;
line-height: 26px; line-height: 26px;
line-height: 1.625rem; line-height: 1.625rem;
margin-top: 39px; margin-top: 39px;
margin-top: 2.4375rem; margin-top: 2.4375rem;
margin-bottom: 13px; margin-bottom: 13px;
margin-bottom: 0.8125rem; margin-bottom: 0.8125rem;
} }
h5 { h5 {
font-size: 16px; font-size: 16px;
font-size: 1rem; font-size: 1rem;
line-height: 26px; line-height: 26px;
line-height: 1.625rem; line-height: 1.625rem;
margin-top: 65px; margin-top: 65px;
margin-top: 4.0625rem; margin-top: 4.0625rem;
margin-bottom: 13px; margin-bottom: 13px;
margin-bottom: 0.8125rem; margin-bottom: 0.8125rem;
} }
h6 { h6 {
font-size: 16px; font-size: 16px;
font-size: 1rem; font-size: 1rem;
line-height: 26px; line-height: 26px;
line-height: 1.625rem; line-height: 1.625rem;
margin-top: 65px; margin-top: 65px;
margin-top: 4.0625rem; margin-top: 4.0625rem;
margin-bottom: 13px; margin-bottom: 13px;
margin-bottom: 0.8125rem; margin-bottom: 0.8125rem;
} }
h1 + h2 { h1 + h2 {
margin-top: 26px; margin-top: 26px;
margin-top: 1.625rem; margin-top: 1.625rem;
} }
h2 + h3, h3 + h4, h4 + h5 {
h2 + h3, margin-top: 13px;
h3 + h4, margin-top: 0.8125rem;
h4 + h5 {
margin-top: 13px;
margin-top: 0.8125rem;
} }
h5 + h6 { h5 + h6 {
margin-top: -13px; margin-top: -13px;
margin-top: -0.8125rem; margin-top: -0.8125rem;
} }
h6 { h6 {
font-style: italic; font-style: italic;
font-weight: normal; font-weight: normal;
} }
/* Links /* Links
========================================================================== */ ========================================================================== */
a { a {
color: #5d93ff; color: #5d93ff;
text-decoration: none; text-decoration: none;
transition: all .3s ease; transition: all .3s ease;
} }
a:hover { a:hover {
border-bottom: 1px solid; border-bottom: 1px solid;
text-decoration: none; text-decoration: none;
} }
a:visited { a:visited {
color: #222; color: #222;
} }
a:visited:hover { a:visited:hover {
color: #222; color: #222;
border-bottom: 1px solid; border-bottom: 1px solid;
} }
a:active { a:active {
color: #222; color: #222;
border-bottom: 1px solid; border-bottom: 1px solid;
} }
h2 a { h2 a {
color: #222; color: #222;
} }
/* Figures & other elements /* Figures & other elements
========================================================================== */ ========================================================================== */
figcaption { figcaption {
line-height: 26px; line-height: 26px;
line-height: 1.625rem; line-height: 1.625rem;
color: #222; color: #222;
font-size: .8125rem; font-size: .8125rem;
font-style: italic; font-style: italic;
margin-bottom: 0; margin-bottom: 0;
text-align: center; text-align: center;
} }
blockquote { blockquote {
font-style: italic; font-style: italic;
padding-left: 1.4375rem; padding-left: 1.4375rem;
} }
cite { cite {
font-style: normal; font-style: normal;
} }
figure blockquote { figure blockquote {
padding: 31px 0px; padding: 31px 0px;
padding: 1.722222222222222rem 0rem; padding: 1.722222222222222rem 0rem;
text-align: center; text-align: center;
} }
figure blockquote p { figure blockquote p {
font-size: 27px; font-size: 27px;
font-size: 1.6875rem; font-size: 1.6875rem;
margin-top: 0; margin-top: 0;
line-height: 46.5px; line-height: 46.5px;
line-height: 2.583333333333334rem; line-height: 2.583333333333334rem;
} }
figure.floatLeft, figure.floatRight {
figure.floatLeft, max-width: 315px;
figure.floatRight { max-width: 17.5rem;
max-width: 315px; padding: 0px 31px;
max-width: 17.5rem; padding: 0rem 1.722222222222222rem;
padding: 0px 31px;
padding: 0rem 1.722222222222222rem;
} }
figure.floatLeft blockquote, figure.floatLeft blockquote, figure.floatRight blockquote {
figure.floatRight blockquote { text-align: left;
text-align: left; padding: 0px;
padding: 0px; padding: 0rem;
padding: 0rem;
} }
figure.floatLeft blockquote p, figure.floatLeft blockquote p, figure.floatRight blockquote p {
figure.floatRight blockquote p { font-size: 19.2px;
font-size: 19.2px; font-size: 1.2rem;
font-size: 1.2rem; line-height: 31px;
line-height: 31px; line-height: 1.722222222222222rem;
line-height: 1.722222222222222rem;
} }
figcaption { figcaption {
line-height: 31px; line-height: 31px;
line-height: 1.722222222222222rem; line-height: 1.722222222222222rem;
margin-bottom: 0; margin-bottom: 0;
} }
.floatLeft { .floatLeft {
float: left; float: left;
} }
.floatCenter { .floatCenter {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.floatRight { .floatRight {
float: right; float: right;
} }
ul li, ol li {
ul li, margin-bottom: 0;
ol li {
margin-bottom: 0;
} }
hr { hr {
margin-top: 52px; margin-top: 52px;
margin-top: 3.25rem; margin-top: 3.25rem;
margin-bottom: 52px; margin-bottom: 52px;
margin-bottom: 3.25rem; margin-bottom: 3.25rem;
border: 0; border: 0;
color: #222; color: #222;
display: block; display: block;
height: 26px; height: 26px;
height: 1.625rem; height: 1.625rem;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
background-size: 100% 26px; background-size: 100% 26px;
background-size: 100% 1.625rem; background-size: 100% 1.625rem;
background-image: linear-gradient(to bottom, transparent 1px, transparent 11px, #222 11px, #222 15px, transparent 15px, transparent 26px); background-image: linear-gradient(to bottom, transparent 1px, transparent 11px, #222 11px, #222 15px, transparent 15px, transparent 26px);
width: 100px; width: 100px;
} }
small { small {
line-height: 13px; line-height: 13px;
line-height: 0.8125rem; line-height: 0.8125rem;
} }
code { code {
padding: 26px; padding: 26px;
padding: 1.625rem; padding: 1.625rem;
} }
.alignLeft { .alignLeft {
text-align: left; text-align: left;
} }
.alignCenter { .alignCenter {
text-align: center; text-align: center;
} }
.alignRight { .alignRight {
text-align: right; text-align: right;
} }
/* Put your styles below this line /* Put your styles below this line
========================================================================== */ ========================================================================== */
@media screen and (min-width: 40em) { @media screen and (min-width:40em) {
/* Mixins
========================================================================== */
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;
line-height: 62px;
line-height: 3.444444444444445rem;
margin-top: 124px;
margin-top: 6.888888888888889rem;
margin-bottom: 31px;
margin-bottom: 1.722222222222222rem;
}
h2 {
font-size: 27px;
font-size: 1.6875rem;
line-height: 46.5px;
line-height: 2.583333333333334rem;
margin-top: 77.5px;
margin-top: 4.305555555555556rem;
margin-bottom: 15.5px;
margin-bottom: 0.861111111111111rem;
}
h3 {
font-size: 22px;
font-size: 1.375rem;
line-height: 31px;
line-height: 1.722222222222222rem;
margin-top: 62px;
margin-top: 3.444444444444445rem;
margin-bottom: 15.5px;
margin-bottom: 0.861111111111111rem;
}
h4 {
font-size: 19.2px;
font-size: 1.2rem;
line-height: 31px;
line-height: 1.722222222222222rem;
margin-top: 46.5px;
margin-top: 2.583333333333334rem;
margin-bottom: 15.5px;
margin-bottom: 0.861111111111111rem;
}
h5 {
font-size: 16px;
font-size: 1rem;
line-height: 31px;
line-height: 1.722222222222222rem;
margin-top: 77.5px;
margin-top: 4.305555555555556rem;
margin-bottom: 15.5px;
margin-bottom: 0.861111111111111rem;
}
h6 {
font-size: 16px;
font-size: 1rem;
line-height: 31px;
line-height: 1.722222222222222rem;
margin-top: 77.5px;
margin-top: 4.305555555555556rem;
margin-bottom: 15.5px;
margin-bottom: 0.861111111111111rem;
}
h1 + h2 {
margin-top: 31px;
margin-top: 1.722222222222222rem;
}
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;
text-align: center;
}
figure blockquote p {
font-size: 27px;
font-size: 1.6875rem;
margin-top: 0;
line-height: 46.5px;
line-height: 2.583333333333334rem;
}
figure.floatLeft,
figure.floatRight {
max-width: 315px;
max-width: 17.5rem;
padding: 0px 31px;
padding: 0rem 1.722222222222222rem;
}
figure.floatLeft blockquote,
figure.floatRight blockquote {
text-align: left;
padding: 0px;
padding: 0rem;
}
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;
margin-bottom: 62px;
margin-bottom: 3.444444444444445rem;
height: 31px;
height: 1.722222222222222rem;
background-size: 100% 31px;
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;
}
/* Mixins
========================================================================== */
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;
line-height: 62px;
line-height: 3.444444444444445rem;
margin-top: 124px;
margin-top: 6.888888888888889rem;
margin-bottom: 31px;
margin-bottom: 1.722222222222222rem;
}
h2 {
font-size: 27px;
font-size: 1.6875rem;
line-height: 46.5px;
line-height: 2.583333333333334rem;
margin-top: 77.5px;
margin-top: 4.305555555555556rem;
margin-bottom: 15.5px;
margin-bottom: 0.861111111111111rem;
}
h3 {
font-size: 22px;
font-size: 1.375rem;
line-height: 31px;
line-height: 1.722222222222222rem;
margin-top: 62px;
margin-top: 3.444444444444445rem;
margin-bottom: 15.5px;
margin-bottom: 0.861111111111111rem;
}
h4 {
font-size: 19.2px;
font-size: 1.2rem;
line-height: 31px;
line-height: 1.722222222222222rem;
margin-top: 46.5px;
margin-top: 2.583333333333334rem;
margin-bottom: 15.5px;
margin-bottom: 0.861111111111111rem;
}
h5 {
font-size: 16px;
font-size: 1rem;
line-height: 31px;
line-height: 1.722222222222222rem;
margin-top: 77.5px;
margin-top: 4.305555555555556rem;
margin-bottom: 15.5px;
margin-bottom: 0.861111111111111rem;
}
h6 {
font-size: 16px;
font-size: 1rem;
line-height: 31px;
line-height: 1.722222222222222rem;
margin-top: 77.5px;
margin-top: 4.305555555555556rem;
margin-bottom: 15.5px;
margin-bottom: 0.861111111111111rem;
}
h1 + h2 {
margin-top: 31px;
margin-top: 1.722222222222222rem;
}
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;
text-align: center;
}
figure blockquote p {
font-size: 27px;
font-size: 1.6875rem;
margin-top: 0;
line-height: 46.5px;
line-height: 2.583333333333334rem;
}
figure.floatLeft, figure.floatRight {
max-width: 315px;
max-width: 17.5rem;
padding: 0px 31px;
padding: 0rem 1.722222222222222rem;
}
figure.floatLeft blockquote, figure.floatRight blockquote {
text-align: left;
padding: 0px;
padding: 0rem;
}
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;
margin-bottom: 62px;
margin-bottom: 3.444444444444445rem;
height: 31px;
height: 1.722222222222222rem;
background-size: 100% 31px;
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;
}
} }

38
wrappers/md.jsx
View File

@ -5,31 +5,31 @@ import BlogPage from '../components/BlogPage'
import { config } from 'config' import { config } from 'config'
class MarkdownWrapper extends React.Component { class MarkdownWrapper extends React.Component {
render() { render() {
const { route } = this.props const {route} = this.props
const post = route.page.data const post = route.page.data
let layout, template let layout, template
layout = post.layout layout = post.layout
if (layout != 'page') { if (layout != 'page') {
template = <BlogPost {...this.props}/> template = <BlogPost {...this.props}/>
} else { } else {
template = <BlogPage {...this.props}/> template = <BlogPage {...this.props}/>
}
return (
<DocumentTitle title={ `${post.title} - ${config.siteTitle}` }>
<div>
{ template }
</div>
</DocumentTitle>
);
} }
return (
<DocumentTitle title={`${post.title} - ${config.siteTitle}`}>
<div>
{template}
</div>
</DocumentTitle>
);
}
} }
MarkdownWrapper.propTypes = { MarkdownWrapper.propTypes = {
route: React.PropTypes.object, route: React.PropTypes.object,
} }
export default MarkdownWrapper export default MarkdownWrapper