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.
|
||||
18
app.js
18
app.js
@ -1,10 +1,10 @@
|
||||
exports.loadContext = function (callback) {
|
||||
let context = require.context('./pages', true)
|
||||
if (module.hot) {
|
||||
module.hot.accept(context.id, () => {
|
||||
context = require.context('./pages', true)
|
||||
return callback(context)
|
||||
})
|
||||
}
|
||||
return callback(context)
|
||||
exports.loadContext = function(callback) {
|
||||
let context = require.context('./pages', true)
|
||||
if (module.hot) {
|
||||
module.hot.accept(context.id, () => {
|
||||
context = require.context('./pages', true)
|
||||
return callback(context)
|
||||
})
|
||||
}
|
||||
return callback(context)
|
||||
}
|
||||
|
||||
@ -1 +1 @@
|
||||
import './style.sss';
|
||||
import './style.sss'
|
||||
@ -1,24 +1,24 @@
|
||||
.wrapper
|
||||
lost-center: 1070px
|
||||
lost-center: 1070px
|
||||
.content
|
||||
lost-column: 2/3
|
||||
lost-column: 2/3
|
||||
.main-inner
|
||||
padding: 40px 35px
|
||||
|
||||
padding: 40px 35px
|
||||
|
||||
@media screen and (max-width: 1100px)
|
||||
.content
|
||||
lost-column: 2/4
|
||||
.main-inner
|
||||
padding: 35px 20px
|
||||
|
||||
.content
|
||||
lost-column: 2/4
|
||||
.main-inner
|
||||
padding: 35px 20px
|
||||
|
||||
@media screen and (max-width: 900px)
|
||||
.content
|
||||
lost-column: 7/12
|
||||
.main-inner
|
||||
padding: 30px 20px
|
||||
|
||||
.content
|
||||
lost-column: 7/12
|
||||
.main-inner
|
||||
padding: 30px 20px
|
||||
|
||||
@media screen and (max-width: 500px)
|
||||
.content
|
||||
lost-column: 4/4
|
||||
.main-inner
|
||||
padding: 25px 20px
|
||||
.content
|
||||
lost-column: 4/4
|
||||
.main-inner
|
||||
padding: 25px 20px
|
||||
@ -5,28 +5,31 @@ import { link } from 'gatsby-helpers'
|
||||
import './style.sss'
|
||||
|
||||
class BlogNav extends React.Component {
|
||||
render() {
|
||||
const { location } = this.props
|
||||
return (
|
||||
<nav className='blog-nav'>
|
||||
<ul>
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/contact" className={location.pathname === link('/contact')?"current":null}>Contact me</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
render() {
|
||||
const {location} = this.props
|
||||
return (
|
||||
<nav className='blog-nav'>
|
||||
<ul>
|
||||
<li>
|
||||
<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>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/contact" className={ location.pathname === link('/contact') ? "current" : null }> Contact me
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
BlogNav.propTypes = {
|
||||
location: React.PropTypes.object,
|
||||
BlogNav.propTypes = {
|
||||
location: React.PropTypes.object,
|
||||
}
|
||||
|
||||
export default BlogNav
|
||||
@ -1,23 +1,23 @@
|
||||
.blog-nav
|
||||
margin: 20px 0px 10px
|
||||
margin: 20px 0px 10px
|
||||
|
||||
.blog-nav ul
|
||||
list-style: none
|
||||
padding-left: 0
|
||||
list-style: none
|
||||
padding-left: 0
|
||||
|
||||
.blog-nav ul li
|
||||
margin: 10px 0 10px
|
||||
margin: 10px 0 10px
|
||||
|
||||
.blog-nav ul li a
|
||||
font-size: 16px
|
||||
line-heigh: 26px
|
||||
margin-bottom: 26px
|
||||
border-bottom: 0
|
||||
font-weight: 400
|
||||
color: #222
|
||||
font-size: 16px
|
||||
line-heigh: 26px
|
||||
margin-bottom: 26px
|
||||
border-bottom: 0
|
||||
font-weight: 400
|
||||
color: #222
|
||||
|
||||
.blog-nav ul li a.current
|
||||
border-bottom: 1px solid
|
||||
border-bottom: 1px solid
|
||||
|
||||
.blog-nav ul li a:hover
|
||||
border-bottom: 1px solid
|
||||
border-bottom: 1px solid
|
||||
@ -10,33 +10,33 @@ import { config } from 'config'
|
||||
import './style.sss';
|
||||
|
||||
class BlogPage extends React.Component {
|
||||
render() {
|
||||
const { route } = this.props
|
||||
const post = route.page.data
|
||||
render() {
|
||||
const {route} = this.props
|
||||
const post = route.page.data
|
||||
|
||||
return (
|
||||
<div>
|
||||
<SidebarLeft {...this.props}/>
|
||||
<div className='content'>
|
||||
<div className='main'>
|
||||
<div className='main-inner'>
|
||||
<div className='blog-page'>
|
||||
<div className='text'>
|
||||
<h1>{post.title}</h1>
|
||||
<div dangerouslySetInnerHTML={{__html: post.body}}/>
|
||||
return (
|
||||
<div>
|
||||
<SidebarLeft {...this.props}/>
|
||||
<div className='content'>
|
||||
<div className='main'>
|
||||
<div className='main-inner'>
|
||||
<div className='blog-page'>
|
||||
<div className='text'>
|
||||
<h1>{ post.title }</h1>
|
||||
<div dangerouslySetInnerHTML={ { __html: post.body} } />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
BlogPage.propTypes = {
|
||||
post: React.PropTypes.object.isRequired,
|
||||
pages: React.PropTypes.array,
|
||||
post: React.PropTypes.object.isRequired,
|
||||
pages: React.PropTypes.array,
|
||||
}
|
||||
|
||||
export default BlogPage
|
||||
@ -1,16 +1,16 @@
|
||||
.blog-page
|
||||
margin-bottom: 40px
|
||||
margin-bottom: 40px
|
||||
|
||||
.blog-page h1
|
||||
font-size: responsive 20px 36px
|
||||
margin-top: 0
|
||||
font-size: responsive 20px 36px
|
||||
margin-top: 0
|
||||
|
||||
.blog-page p
|
||||
font-size: responsive 14px 16px
|
||||
line-height: 1.5
|
||||
margin-top: 10px
|
||||
font-size: responsive 14px 16px
|
||||
line-height: 1.5
|
||||
margin-top: 10px
|
||||
|
||||
@media (max-width: 900px)
|
||||
.blog-single .text,
|
||||
.blog-single .footer
|
||||
padding: 0 15px
|
||||
.blog-single .text,
|
||||
.blog-single .footer
|
||||
padding: 0 15px
|
||||
@ -12,48 +12,45 @@ import './style.sss'
|
||||
import '../../static/css/highlight.css'
|
||||
|
||||
class BlogPost extends React.Component {
|
||||
render() {
|
||||
const { route } = this.props
|
||||
const post = route.page.data
|
||||
const home = (
|
||||
<div>
|
||||
<Link
|
||||
className='gohome'
|
||||
to={link('/')}
|
||||
>
|
||||
All Articles
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
render() {
|
||||
const {route} = this.props
|
||||
const post = route.page.data
|
||||
const home = (
|
||||
<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>
|
||||
<Link className='gohome' to={ link('/') }> All Articles
|
||||
</Link>
|
||||
</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 = {
|
||||
post: React.PropTypes.object.isRequired,
|
||||
pages: React.PropTypes.array,
|
||||
post: React.PropTypes.object.isRequired,
|
||||
pages: React.PropTypes.array,
|
||||
}
|
||||
|
||||
export default BlogPost
|
||||
@ -1,108 +1,108 @@
|
||||
.blog-post
|
||||
margin-bottom: 30px
|
||||
margin-bottom: 30px
|
||||
|
||||
.blog-post:last-child
|
||||
margin-bottom: 10px
|
||||
margin-bottom: 10px
|
||||
|
||||
.blog-post h2
|
||||
margin-top: 10px
|
||||
line-height: 30px
|
||||
margin-bottom: 20px
|
||||
margin-top: 10px
|
||||
line-height: 30px
|
||||
margin-bottom: 20px
|
||||
|
||||
.blog-post h2 a:hover
|
||||
border-bottom: 1px solid
|
||||
border-bottom: 1px solid
|
||||
|
||||
.blog-post p
|
||||
font-size: 16px
|
||||
line-height: 26px
|
||||
margin-bottom: 26px
|
||||
font-size: 16px
|
||||
line-height: 26px
|
||||
margin-bottom: 26px
|
||||
|
||||
.blog-post time
|
||||
font-size: 14px
|
||||
color: #222
|
||||
font-weight: 600
|
||||
text-transform: uppercase
|
||||
letter-spacing: 0.04rem
|
||||
font-family: "Roboto", Helvetica, Arial, sans-serif
|
||||
font-size: 14px
|
||||
color: #222
|
||||
font-weight: 600
|
||||
text-transform: uppercase
|
||||
letter-spacing: 0.04rem
|
||||
font-family: "Roboto", Helvetica, Arial, sans-serif
|
||||
|
||||
.blog-post .blog-category
|
||||
font-size: 14px
|
||||
color: #f7a046
|
||||
font-weight: 600
|
||||
text-transform: uppercase
|
||||
letter-spacing: 0.04rem
|
||||
font-family: "Roboto", Helvetica, Arial, sans-serif
|
||||
font-size: 14px
|
||||
color: #f7a046
|
||||
font-weight: 600
|
||||
text-transform: uppercase
|
||||
letter-spacing: 0.04rem
|
||||
font-family: "Roboto", Helvetica, Arial, sans-serif
|
||||
|
||||
.blog-post .readmore
|
||||
font-size: 16px
|
||||
color: #5d93ff
|
||||
font-weight: 600
|
||||
font-family: 'Raleway', Helvetica, Arial, sans-serif
|
||||
font-size: 16px
|
||||
color: #5d93ff
|
||||
font-weight: 600
|
||||
font-family: 'Raleway', Helvetica, Arial, sans-serif
|
||||
|
||||
.blog-post .readmore:hover
|
||||
border-bottom: 1px solid
|
||||
border-bottom: 1px solid
|
||||
|
||||
.blog-single h1
|
||||
text-align: center
|
||||
margin-top: 30px
|
||||
text-align: center
|
||||
margin-top: 30px
|
||||
|
||||
.blog-single .text
|
||||
line-height: 31px
|
||||
line-height: 1.722222222222222rem
|
||||
margin-bottom: 31px
|
||||
margin-bottom: 1.722222222222222rem
|
||||
line-height: 31px
|
||||
line-height: 1.722222222222222rem
|
||||
margin-bottom: 31px
|
||||
margin-bottom: 1.722222222222222rem
|
||||
|
||||
.blog-single h1,
|
||||
.blog-single .date-published,
|
||||
.blog-single .text div :not(figure)
|
||||
max-width: 35rem
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
max-width: 35rem
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
|
||||
.blog-single .text img
|
||||
max-width: 100%
|
||||
height: auto
|
||||
max-width: 100%
|
||||
height: auto
|
||||
|
||||
.blog-single .footer
|
||||
max-width: 35rem
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
line-height: 31px
|
||||
line-height: 1.722222222222222rem
|
||||
margin-bottom: 31px
|
||||
margin-bottom: 1.722222222222222rem
|
||||
max-width: 35rem
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
line-height: 31px
|
||||
line-height: 1.722222222222222rem
|
||||
margin-bottom: 31px
|
||||
margin-bottom: 1.722222222222222rem
|
||||
|
||||
.gohome
|
||||
font-family: 'Raleway', Helvetica, Arial, sans-serif
|
||||
font-size: 16px
|
||||
text-align: center
|
||||
color: #343e47
|
||||
font-weight: 600
|
||||
position: fixed
|
||||
left: 20px
|
||||
top: 20px
|
||||
opacity: 0.5
|
||||
padding: 8px 18px
|
||||
border: 2px solid #343e47 !important
|
||||
border-radius: 3px
|
||||
font-family: 'Raleway', Helvetica, Arial, sans-serif
|
||||
font-size: 16px
|
||||
text-align: center
|
||||
color: #343e47
|
||||
font-weight: 600
|
||||
position: fixed
|
||||
left: 20px
|
||||
top: 20px
|
||||
opacity: 0.5
|
||||
padding: 8px 18px
|
||||
border: 2px solid #343e47 !important
|
||||
border-radius: 3px
|
||||
|
||||
.gohome:hover
|
||||
color: #201e28
|
||||
opacity: 1
|
||||
color: #201e28
|
||||
opacity: 1
|
||||
|
||||
@media (max-width: 900px)
|
||||
.blog-single h1
|
||||
margin-top: 15px
|
||||
.blog-single .text,
|
||||
.blog-single .footer
|
||||
padding: 0 15px
|
||||
line-height: 26px
|
||||
line-height: 1.625rem
|
||||
margin: 0px 0px 26px
|
||||
margin: 0rem 0rem 1.625rem
|
||||
.gohome
|
||||
position: static
|
||||
margin: 20px auto 0
|
||||
text-align: center
|
||||
width: 85px
|
||||
display: block
|
||||
.blog-single h1
|
||||
margin-top: 15px
|
||||
.blog-single .text,
|
||||
.blog-single .footer
|
||||
padding: 0 15px
|
||||
line-height: 26px
|
||||
line-height: 1.625rem
|
||||
margin: 0px 0px 26px
|
||||
margin: 0rem 0rem 1.625rem
|
||||
.gohome
|
||||
position: static
|
||||
margin: 20px auto 0
|
||||
text-align: center
|
||||
width: 85px
|
||||
display: block
|
||||
@ -7,32 +7,44 @@ import './style.sss'
|
||||
import '../../static/fonts/fontawesome/style.css'
|
||||
|
||||
class BlogSocial extends React.Component {
|
||||
render() {
|
||||
render() {
|
||||
|
||||
const twitter = config.blogTitle
|
||||
const vk = config.vk
|
||||
const rss = config.rss
|
||||
const email = config.email
|
||||
const github = config.github
|
||||
const telegram = config.telegram
|
||||
const twitter = config.blogTitle
|
||||
const vk = config.vk
|
||||
const rss = config.rss
|
||||
const email = config.email
|
||||
const github = config.github
|
||||
const telegram = config.telegram
|
||||
|
||||
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>
|
||||
</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>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href={rss}><i className='fa fa-rss'></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
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>
|
||||
</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>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<a href={ rss }><i className='fa fa-rss'></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default BlogSocial
|
||||
@ -1,34 +1,34 @@
|
||||
.blog-social
|
||||
margin-top: 30px
|
||||
margin-top: 30px
|
||||
|
||||
.blog-social ul
|
||||
list-style: none
|
||||
padding: 0
|
||||
margin: 10px 0
|
||||
clear: fix-legacy
|
||||
list-style: none
|
||||
padding: 0
|
||||
margin: 10px 0
|
||||
clear: fix-legacy
|
||||
|
||||
.blog-social ul > li
|
||||
float: left
|
||||
margin-right: 5px
|
||||
text-align: center
|
||||
line-height: 21px
|
||||
height: 24px
|
||||
width: 24px
|
||||
border-radius: 3px
|
||||
background: #f4edde
|
||||
float: left
|
||||
margin-right: 5px
|
||||
text-align: center
|
||||
line-height: 21px
|
||||
height: 24px
|
||||
width: 24px
|
||||
border-radius: 3px
|
||||
background: #f4edde
|
||||
|
||||
.blog-social ul > li:hover
|
||||
background: #f4efe8
|
||||
background: #f4efe8
|
||||
|
||||
.blog-social ul > li > a
|
||||
border-bottom: 0
|
||||
line-height: 21px
|
||||
cursor: pointer
|
||||
border-bottom: 0
|
||||
line-height: 21px
|
||||
cursor: pointer
|
||||
|
||||
.blog-social ul > li > a > i
|
||||
color: #333
|
||||
font-size: 14px
|
||||
line-height: 21px
|
||||
color: #333
|
||||
font-size: 14px
|
||||
line-height: 21px
|
||||
|
||||
.blog-social ul > li:hover a > i
|
||||
color: #222
|
||||
color: #222
|
||||
@ -6,56 +6,38 @@ import find from 'lodash/find'
|
||||
import './style.sss'
|
||||
|
||||
class ReadNext extends React.Component {
|
||||
render() {
|
||||
const { pages, post } = this.props
|
||||
const { readNext } = post
|
||||
render() {
|
||||
const {pages, post} = this.props
|
||||
const {readNext} = post
|
||||
|
||||
let nextPost
|
||||
if (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))
|
||||
)
|
||||
const description = nextPost.data.description
|
||||
let nextPost
|
||||
if (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))
|
||||
)
|
||||
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>
|
||||
</div>
|
||||
);
|
||||
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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ReadNext.propTypes = {
|
||||
post: React.PropTypes.object.isRequired,
|
||||
pages: React.PropTypes.array,
|
||||
post: React.PropTypes.object.isRequired,
|
||||
pages: React.PropTypes.array,
|
||||
}
|
||||
|
||||
export default ReadNext
|
||||
@ -7,72 +7,48 @@ import BlogSocial from '../BlogSocial'
|
||||
import './style.sss'
|
||||
|
||||
class SidebarLeft extends React.Component {
|
||||
render() {
|
||||
const { location, children } = this.props
|
||||
let header
|
||||
render() {
|
||||
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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<div className='blog-options'>
|
||||
<BlogNav {...this.props}/>
|
||||
<footer>
|
||||
<BlogSocial {...this.props}/>
|
||||
<p className='copyright'>
|
||||
© All rights reserved.
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<div className='sidebar'>
|
||||
<div className='sidebar-inner'>
|
||||
<div className='blog-details'>
|
||||
<header>
|
||||
{ header }
|
||||
</header>
|
||||
</div>
|
||||
<div className='blog-options'>
|
||||
<BlogNav {...this.props}/>
|
||||
<footer>
|
||||
<BlogSocial {...this.props}/>
|
||||
<p className='copyright'>
|
||||
© All rights reserved.
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
SidebarLeft.propTypes = {
|
||||
children: React.PropTypes.any,
|
||||
location: React.PropTypes.object,
|
||||
children: React.PropTypes.any,
|
||||
location: React.PropTypes.object,
|
||||
}
|
||||
|
||||
export default SidebarLeft
|
||||
@ -1,59 +1,59 @@
|
||||
.sidebar
|
||||
lost-column: 1/3
|
||||
lost-column: 1/3
|
||||
|
||||
.sidebar .sidebar-inner
|
||||
position: relative
|
||||
padding: 40px
|
||||
position: relative
|
||||
padding: 40px
|
||||
|
||||
.sidebar .sidebar-inner:after
|
||||
background: #eee
|
||||
background: linear-gradient(to bottom, #eee 0%, #eee 48%, #fff 100%)
|
||||
position: absolute
|
||||
content: ''
|
||||
width: 1px
|
||||
height: 540px
|
||||
top: 30px
|
||||
right: -10px
|
||||
bottom: 0
|
||||
background: #eee
|
||||
background: linear-gradient(to bottom, #eee 0%, #eee 48%, #fff 100%)
|
||||
position: absolute
|
||||
content: ''
|
||||
width: 1px
|
||||
height: 540px
|
||||
top: 30px
|
||||
right: -10px
|
||||
bottom: 0
|
||||
|
||||
.sidebar .sidebar-inner img
|
||||
display: inline-block
|
||||
margin-bottom: 0
|
||||
border-radius: 50%
|
||||
background-clip: padding-box
|
||||
display: inline-block
|
||||
margin-bottom: 0
|
||||
border-radius: 50%
|
||||
background-clip: padding-box
|
||||
|
||||
.sidebar .sidebar-inner h1,
|
||||
.sidebar .sidebar-inner h2
|
||||
font-size: responsive 16px 18px
|
||||
line-height: 1
|
||||
margin: 20px 0 10px
|
||||
font-size: responsive 16px 18px
|
||||
line-height: 1
|
||||
margin: 20px 0 10px
|
||||
|
||||
.sidebar .sidebar-inner p
|
||||
font-size: 14px
|
||||
color: #888
|
||||
line-height: 23px
|
||||
margin-bottom: 23px
|
||||
font-size: 14px
|
||||
color: #888
|
||||
line-height: 23px
|
||||
margin-bottom: 23px
|
||||
|
||||
.sidebar .sidebar-inner p.copyright
|
||||
color: #b6b6b6
|
||||
font-size: 12px
|
||||
color: #b6b6b6
|
||||
font-size: 12px
|
||||
|
||||
@media (max-width: 1100px)
|
||||
.sidebar .sidebar-inner
|
||||
padding: 35px 20px 0
|
||||
.sidebar
|
||||
lost-column: 2/4
|
||||
.sidebar .sidebar-inner
|
||||
padding: 35px 20px 0
|
||||
.sidebar
|
||||
lost-column: 2/4
|
||||
|
||||
@media (max-width: 900px)
|
||||
.sidebar
|
||||
lost-column: 5/12
|
||||
.sidebar .sidebar-inner
|
||||
padding: 30px 20px 0
|
||||
.sidebar
|
||||
lost-column: 5/12
|
||||
.sidebar .sidebar-inner
|
||||
padding: 30px 20px 0
|
||||
|
||||
@media (max-width: 500px)
|
||||
.sidebar
|
||||
lost-column: 4/4
|
||||
.sidebar .sidebar-inner
|
||||
padding: 25px 20px 0
|
||||
.sidebar .sidebar-inner:after
|
||||
display: none
|
||||
.sidebar
|
||||
lost-column: 4/4
|
||||
.sidebar .sidebar-inner
|
||||
padding: 25px 20px 0
|
||||
.sidebar .sidebar-inner:after
|
||||
display: none
|
||||
@ -10,43 +10,45 @@ module.exports = function(config, env) {
|
||||
var is_production = env === 'production';
|
||||
|
||||
config.merge({
|
||||
postcss: [
|
||||
lost(),
|
||||
rucksack({
|
||||
autoprefixer: true
|
||||
})
|
||||
]
|
||||
postcss: [
|
||||
lost(),
|
||||
rucksack({
|
||||
autoprefixer: true
|
||||
})
|
||||
]
|
||||
});
|
||||
|
||||
config.removeLoader('css');
|
||||
|
||||
if (is_develop) {
|
||||
config.loader('css', function(cfg) {
|
||||
cfg.test = /\.css/;
|
||||
cfg.loaders = ['style', 'css-loader', 'postcss-loader'];
|
||||
return cfg
|
||||
})
|
||||
config.loader('postcss', function(cfg) {
|
||||
cfg.test = /\.sss/;
|
||||
cfg.loaders = ['style', 'css-loader', 'postcss-loader?parser=sugarss'];
|
||||
return cfg
|
||||
})
|
||||
config.loader('css', function(cfg) {
|
||||
cfg.test = /\.css/;
|
||||
cfg.loaders = ['style', 'css-loader', 'postcss-loader'];
|
||||
return cfg
|
||||
})
|
||||
config.loader('postcss', function(cfg) {
|
||||
cfg.test = /\.sss/;
|
||||
cfg.loaders = ['style', 'css-loader', 'postcss-loader?parser=sugarss'];
|
||||
return cfg
|
||||
})
|
||||
} else {
|
||||
config.loader('css', function(cfg) {
|
||||
cfg.test = /\.css/;
|
||||
cfg.loader = ExtractTextPlugin.extract(['css-loader', 'postcss-loader']);
|
||||
return cfg
|
||||
})
|
||||
config.loader('postcss', function(cfg) {
|
||||
cfg.test = /\.sss/;
|
||||
cfg.loader = ExtractTextPlugin.extract(['css-loader', 'postcss-loader?parser=sugarss']);
|
||||
return cfg
|
||||
})
|
||||
config.loader('css', function(cfg) {
|
||||
cfg.test = /\.css/;
|
||||
cfg.loader = ExtractTextPlugin.extract(['css-loader', 'postcss-loader']);
|
||||
return cfg
|
||||
})
|
||||
config.loader('postcss', function(cfg) {
|
||||
cfg.test = /\.sss/;
|
||||
cfg.loader = ExtractTextPlugin.extract(['css-loader', 'postcss-loader?parser=sugarss']);
|
||||
return cfg
|
||||
})
|
||||
}
|
||||
|
||||
config.plugin('extract-css',
|
||||
ExtractTextPlugin,
|
||||
["styles.css", { allChunks: true }]);
|
||||
|
||||
return config
|
||||
config.plugin('extract-css',
|
||||
ExtractTextPlugin,
|
||||
["styles.css", {
|
||||
allChunks: true
|
||||
}]);
|
||||
|
||||
return config
|
||||
};
|
||||
69
html.js
69
html.js
@ -3,41 +3,40 @@ import DocumentTitle from 'react-document-title'
|
||||
import { link } from 'gatsby-helpers'
|
||||
|
||||
module.exports = React.createClass({
|
||||
propTypes () {
|
||||
return {
|
||||
title: React.PropTypes.string,
|
||||
}
|
||||
},
|
||||
render () {
|
||||
let title = DocumentTitle.rewind()
|
||||
if (this.props.title) {
|
||||
title = this.props.title
|
||||
}
|
||||
propTypes() {
|
||||
return {
|
||||
title: React.PropTypes.string,
|
||||
}
|
||||
},
|
||||
render() {
|
||||
let title = DocumentTitle.rewind()
|
||||
if (this.props.title) {
|
||||
title = this.props.title
|
||||
}
|
||||
|
||||
let cssLink
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
cssLink = <link rel="stylesheet" href={link('/styles.css')} />
|
||||
}
|
||||
let cssLink
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
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}/>
|
||||
<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}
|
||||
</head>
|
||||
<body>
|
||||
<div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />
|
||||
<script src={link('/bundle.js')}/>
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
},
|
||||
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 } />
|
||||
<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 }
|
||||
</head>
|
||||
<body>
|
||||
<div id="react-mount" dangerouslySetInnerHTML={ { __html: this.props.body} } />
|
||||
<script src={ link('/bundle.js') } />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
@ -7,21 +7,21 @@ import '../static/css/reset.css'
|
||||
import '../static/css/typography.css'
|
||||
|
||||
class Template extends React.Component {
|
||||
render() {
|
||||
const { location, children } = this.props
|
||||
|
||||
return (
|
||||
<div className='wrapper'>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
render() {
|
||||
const {location, children} = this.props
|
||||
|
||||
return (
|
||||
<div className='wrapper'>
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Template.propTypes = {
|
||||
children: React.PropTypes.any,
|
||||
location: React.PropTypes.object,
|
||||
route: React.PropTypes.object,
|
||||
children: React.PropTypes.any,
|
||||
location: React.PropTypes.object,
|
||||
route: React.PropTypes.object,
|
||||
}
|
||||
|
||||
export default Template
|
||||
@ -11,70 +11,53 @@ import SidebarLeft from '../components/SidebarLeft'
|
||||
import BlogContent from '../components/BlogContent'
|
||||
|
||||
class BlogIndex extends React.Component {
|
||||
render() {
|
||||
const pageLinks = []
|
||||
// Sort pages.
|
||||
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') {
|
||||
const title = access(page, 'data.title') || page.path
|
||||
const description = access(page, 'data.description')
|
||||
const datePublished = access(page, 'data.date')
|
||||
const category = access(page, 'data.category')
|
||||
render() {
|
||||
const pageLinks = []
|
||||
// Sort pages.
|
||||
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') {
|
||||
const title = access(page, 'data.title') || page.path
|
||||
const description = access(page, 'data.description')
|
||||
const datePublished = access(page, 'data.date')
|
||||
const category = access(page, 'data.category')
|
||||
|
||||
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
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
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
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<DocumentTitle title={config.siteTitle}>
|
||||
<div>
|
||||
<SidebarLeft {...this.props}/>
|
||||
<div className='content'>
|
||||
<div className='main'>
|
||||
<div className='main-inner'>
|
||||
{pageLinks}
|
||||
return (
|
||||
<DocumentTitle title={ config.siteTitle }>
|
||||
<div>
|
||||
<SidebarLeft {...this.props}/>
|
||||
<div className='content'>
|
||||
<div className='main'>
|
||||
<div className='main-inner'>
|
||||
{ pageLinks }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentTitle>
|
||||
)
|
||||
}
|
||||
</DocumentTitle>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
BlogIndex.propTypes = {
|
||||
route: React.PropTypes.object,
|
||||
route: React.PropTypes.object,
|
||||
}
|
||||
|
||||
export default BlogIndex
|
||||
@ -1,115 +1,81 @@
|
||||
p > code, span > code {
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
white-space: pre-line;
|
||||
white-space: -pre-wrap;
|
||||
white-space: -o-pre-wrap;
|
||||
white-space: -moz-pre-wrap;
|
||||
white-space: -hp-pre-wrap;
|
||||
word-wrap: break-word;
|
||||
background: #f8f8f8;
|
||||
display: inline;
|
||||
font-family: Inconsolata, monospace, serif;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
padding: 0.25em 0.5em;
|
||||
p > code, span > code {
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
white-space: pre;
|
||||
white-space: pre-wrap;
|
||||
white-space: pre-line;
|
||||
white-space: -pre-wrap;
|
||||
white-space: -o-pre-wrap;
|
||||
white-space: -moz-pre-wrap;
|
||||
white-space: -hp-pre-wrap;
|
||||
word-wrap: break-word;
|
||||
background: #f8f8f8;
|
||||
display: inline;
|
||||
font-family: Inconsolata, monospace, serif;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
|
||||
|
||||
pre code {
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em 1em;
|
||||
color: #333;
|
||||
background: #f8f8f8;
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em 1em;
|
||||
color: #333;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #998;
|
||||
font-style: italic;
|
||||
.hljs-comment, .hljs-quote {
|
||||
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 {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.hljs-number,
|
||||
.hljs-literal,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-tag .hljs-attr {
|
||||
color: #008080;
|
||||
.hljs-type, .hljs-class .hljs-title {
|
||||
color: #458;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-doctag {
|
||||
color: #d14;
|
||||
.hljs-tag, .hljs-name, .hljs-attribute {
|
||||
color: #000080;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-selector-id {
|
||||
color: #900;
|
||||
font-weight: bold;
|
||||
.hljs-regexp, .hljs-link {
|
||||
color: #009926;
|
||||
}
|
||||
|
||||
.hljs-subst {
|
||||
font-weight: normal;
|
||||
.hljs-symbol, .hljs-bullet {
|
||||
color: #990073;
|
||||
}
|
||||
|
||||
.hljs-type,
|
||||
.hljs-class .hljs-title {
|
||||
color: #458;
|
||||
font-weight: bold;
|
||||
.hljs-built_in, .hljs-builtin-name {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.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 {
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
background: #fdd;
|
||||
background: #fdd;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
background: #dfd;
|
||||
background: #dfd;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -1,176 +1,118 @@
|
||||
html {
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* HTML5 display definitions
|
||||
========================================================================== */
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary,
|
||||
cite,
|
||||
code,
|
||||
small {
|
||||
display: block;
|
||||
========================================================================== */
|
||||
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 {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
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;
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
[hidden], template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Links
|
||||
========================================================================== */
|
||||
========================================================================== */
|
||||
a {
|
||||
background: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
a:active, a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
========================================================================== */
|
||||
abbr {
|
||||
letter-spacing: 0.1em;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
b, strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 70%;
|
||||
font-size: 70%;
|
||||
}
|
||||
sub, sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
em,
|
||||
i {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
em, i {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
========================================================================== */
|
||||
img {
|
||||
border: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
========================================================================== */
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
code, kbd, pre, samp {
|
||||
font-family: monospace, monospace;
|
||||
}
|
||||
|
||||
/* Tables
|
||||
========================================================================== */
|
||||
========================================================================== */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
td, th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Images
|
||||
========================================================================== */
|
||||
========================================================================== */
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: inherit auto;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: inherit auto;
|
||||
}
|
||||
@ -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 {
|
||||
font-size: 16px;
|
||||
font-size: 100%;
|
||||
font-family: "PT Sans", Georgia, Times, serif;
|
||||
color: #222;
|
||||
font-size: 16px;
|
||||
font-size: 100%;
|
||||
font-family: "PT Sans", Georgia, Times, serif;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
/* Paragraph
|
||||
========================================================================== */
|
||||
========================================================================== */
|
||||
|
||||
/* Headings
|
||||
========================================================================== */
|
||||
========================================================================== */
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: "Raleway", Helvetica, Arial, sans-serif;
|
||||
color: #222;
|
||||
font-family: "Raleway", Helvetica, Arial, sans-serif;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
font-size: 2.5rem;
|
||||
line-height: 52px;
|
||||
line-height: 3.25rem;
|
||||
margin-top: 104px;
|
||||
margin-top: 6.5rem;
|
||||
margin-bottom: 26px;
|
||||
margin-bottom: 1.625rem;
|
||||
font-size: 40px;
|
||||
font-size: 2.5rem;
|
||||
line-height: 52px;
|
||||
line-height: 3.25rem;
|
||||
margin-top: 104px;
|
||||
margin-top: 6.5rem;
|
||||
margin-bottom: 26px;
|
||||
margin-bottom: 1.625rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 27px;
|
||||
font-size: 1.6875rem;
|
||||
line-height: 39px;
|
||||
line-height: 2.4375rem;
|
||||
margin-top: 65px;
|
||||
margin-top: 4.0625rem;
|
||||
margin-bottom: 13px;
|
||||
margin-bottom: 0.8125rem;
|
||||
font-size: 27px;
|
||||
font-size: 1.6875rem;
|
||||
line-height: 39px;
|
||||
line-height: 2.4375rem;
|
||||
margin-top: 65px;
|
||||
margin-top: 4.0625rem;
|
||||
margin-bottom: 13px;
|
||||
margin-bottom: 0.8125rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 22px;
|
||||
font-size: 1.375rem;
|
||||
line-height: 26px;
|
||||
line-height: 1.625rem;
|
||||
margin-top: 52px;
|
||||
margin-top: 3.25rem;
|
||||
margin-bottom: 13px;
|
||||
margin-bottom: 0.8125rem;
|
||||
font-size: 22px;
|
||||
font-size: 1.375rem;
|
||||
line-height: 26px;
|
||||
line-height: 1.625rem;
|
||||
margin-top: 52px;
|
||||
margin-top: 3.25rem;
|
||||
margin-bottom: 13px;
|
||||
margin-bottom: 0.8125rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 19.2px;
|
||||
font-size: 1.2rem;
|
||||
line-height: 26px;
|
||||
line-height: 1.625rem;
|
||||
margin-top: 39px;
|
||||
margin-top: 2.4375rem;
|
||||
margin-bottom: 13px;
|
||||
margin-bottom: 0.8125rem;
|
||||
font-size: 19.2px;
|
||||
font-size: 1.2rem;
|
||||
line-height: 26px;
|
||||
line-height: 1.625rem;
|
||||
margin-top: 39px;
|
||||
margin-top: 2.4375rem;
|
||||
margin-bottom: 13px;
|
||||
margin-bottom: 0.8125rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
line-height: 26px;
|
||||
line-height: 1.625rem;
|
||||
margin-top: 65px;
|
||||
margin-top: 4.0625rem;
|
||||
margin-bottom: 13px;
|
||||
margin-bottom: 0.8125rem;
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
line-height: 26px;
|
||||
line-height: 1.625rem;
|
||||
margin-top: 65px;
|
||||
margin-top: 4.0625rem;
|
||||
margin-bottom: 13px;
|
||||
margin-bottom: 0.8125rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
line-height: 26px;
|
||||
line-height: 1.625rem;
|
||||
margin-top: 65px;
|
||||
margin-top: 4.0625rem;
|
||||
margin-bottom: 13px;
|
||||
margin-bottom: 0.8125rem;
|
||||
font-size: 16px;
|
||||
font-size: 1rem;
|
||||
line-height: 26px;
|
||||
line-height: 1.625rem;
|
||||
margin-top: 65px;
|
||||
margin-top: 4.0625rem;
|
||||
margin-bottom: 13px;
|
||||
margin-bottom: 0.8125rem;
|
||||
}
|
||||
|
||||
h1 + h2 {
|
||||
margin-top: 26px;
|
||||
margin-top: 1.625rem;
|
||||
margin-top: 26px;
|
||||
margin-top: 1.625rem;
|
||||
}
|
||||
|
||||
h2 + h3,
|
||||
h3 + h4,
|
||||
h4 + h5 {
|
||||
margin-top: 13px;
|
||||
margin-top: 0.8125rem;
|
||||
h2 + h3, h3 + h4, h4 + h5 {
|
||||
margin-top: 13px;
|
||||
margin-top: 0.8125rem;
|
||||
}
|
||||
|
||||
h5 + h6 {
|
||||
margin-top: -13px;
|
||||
margin-top: -0.8125rem;
|
||||
margin-top: -13px;
|
||||
margin-top: -0.8125rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Links
|
||||
========================================================================== */
|
||||
|
||||
========================================================================== */
|
||||
a {
|
||||
color: #5d93ff;
|
||||
text-decoration: none;
|
||||
transition: all .3s ease;
|
||||
color: #5d93ff;
|
||||
text-decoration: none;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
border-bottom: 1px solid;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #222;
|
||||
color: #222;
|
||||
}
|
||||
a:visited:hover {
|
||||
color: #222;
|
||||
border-bottom: 1px solid;
|
||||
color: #222;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
a:active {
|
||||
color: #222;
|
||||
border-bottom: 1px solid;
|
||||
color: #222;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
|
||||
h2 a {
|
||||
color: #222;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
/* Figures & other elements
|
||||
========================================================================== */
|
||||
========================================================================== */
|
||||
figcaption {
|
||||
line-height: 26px;
|
||||
line-height: 1.625rem;
|
||||
color: #222;
|
||||
font-size: .8125rem;
|
||||
font-style: italic;
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
line-height: 26px;
|
||||
line-height: 1.625rem;
|
||||
color: #222;
|
||||
font-size: .8125rem;
|
||||
font-style: italic;
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
padding-left: 1.4375rem;
|
||||
font-style: italic;
|
||||
padding-left: 1.4375rem;
|
||||
}
|
||||
|
||||
cite {
|
||||
font-style: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
figure blockquote {
|
||||
padding: 31px 0px;
|
||||
padding: 1.722222222222222rem 0rem;
|
||||
text-align: center;
|
||||
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;
|
||||
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, 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, 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;
|
||||
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;
|
||||
line-height: 31px;
|
||||
line-height: 1.722222222222222rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.floatLeft {
|
||||
float: left;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.floatCenter {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.floatRight {
|
||||
float: right;
|
||||
float: right;
|
||||
}
|
||||
|
||||
ul li,
|
||||
ol li {
|
||||
margin-bottom: 0;
|
||||
ul li, ol li {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: 52px;
|
||||
margin-top: 3.25rem;
|
||||
margin-bottom: 52px;
|
||||
margin-bottom: 3.25rem;
|
||||
border: 0;
|
||||
color: #222;
|
||||
display: block;
|
||||
height: 26px;
|
||||
height: 1.625rem;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
background-size: 100% 26px;
|
||||
background-size: 100% 1.625rem;
|
||||
background-image: linear-gradient(to bottom, transparent 1px, transparent 11px, #222 11px, #222 15px, transparent 15px, transparent 26px);
|
||||
width: 100px;
|
||||
margin-top: 52px;
|
||||
margin-top: 3.25rem;
|
||||
margin-bottom: 52px;
|
||||
margin-bottom: 3.25rem;
|
||||
border: 0;
|
||||
color: #222;
|
||||
display: block;
|
||||
height: 26px;
|
||||
height: 1.625rem;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
background-size: 100% 26px;
|
||||
background-size: 100% 1.625rem;
|
||||
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;
|
||||
line-height: 13px;
|
||||
line-height: 0.8125rem;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 26px;
|
||||
padding: 1.625rem;
|
||||
padding: 26px;
|
||||
padding: 1.625rem;
|
||||
}
|
||||
|
||||
.alignLeft {
|
||||
text-align: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.alignCenter {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.alignRight {
|
||||
text-align: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Put your styles below this line
|
||||
========================================================================== */
|
||||
@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;
|
||||
}
|
||||
========================================================================== */
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@ -5,31 +5,31 @@ import BlogPage from '../components/BlogPage'
|
||||
import { config } from 'config'
|
||||
|
||||
class MarkdownWrapper extends React.Component {
|
||||
render() {
|
||||
const { route } = this.props
|
||||
const post = route.page.data
|
||||
render() {
|
||||
const {route} = this.props
|
||||
const post = route.page.data
|
||||
|
||||
let layout, template
|
||||
layout = post.layout
|
||||
let layout, template
|
||||
layout = post.layout
|
||||
|
||||
if (layout != 'page') {
|
||||
template = <BlogPost {...this.props}/>
|
||||
} else {
|
||||
template = <BlogPage {...this.props}/>
|
||||
if (layout != 'page') {
|
||||
template = <BlogPost {...this.props}/>
|
||||
} else {
|
||||
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 = {
|
||||
route: React.PropTypes.object,
|
||||
route: React.PropTypes.object,
|
||||
}
|
||||
|
||||
export default MarkdownWrapper
|
||||
Loading…
Reference in New Issue
Block a user