mirror of
https://github.com/mastermindzh/rickvanlieshout.com
synced 2024-12-25 14:29:36 +01:00
upgrade to Gatsby 0.11
This commit is contained in:
wpioneer
parent
b00aff65ad
commit
05ee70daab
5
.babelrc
5
.babelrc
@ -1,3 +1,4 @@
|
||||
{
|
||||
"stage": 2,
|
||||
}
|
||||
"presets": ['react', 'es2015', 'stage-0'],
|
||||
"plugins": ['add-module-exports']
|
||||
}
|
||||
@ -10,8 +10,11 @@
|
||||
"no-else-return": [0],
|
||||
"space-infix-ops": [0],
|
||||
"react/prefer-es6-class": [0],
|
||||
"react/prefer-stateless-function": [0],
|
||||
"import/no-unresolved": [0],
|
||||
"global-require": [0],
|
||||
},
|
||||
"globals": {
|
||||
"__PREFIX_LINKS__": true,
|
||||
},
|
||||
}
|
||||
}
|
||||
30
.gitignore
vendored
30
.gitignore
vendored
@ -1,27 +1,5 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
node_modules/
|
||||
public
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directory
|
||||
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
|
||||
node_modules
|
||||
.gatsby-context.js
|
||||
pages/.manifest
|
||||
11
.project
Normal file
11
.project
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<projectDescription>
|
||||
<name>gatsby-starter-lumen</name>
|
||||
<comment></comment>
|
||||
<projects>
|
||||
</projects>
|
||||
<buildSpec>
|
||||
</buildSpec>
|
||||
<natures>
|
||||
</natures>
|
||||
</projectDescription>
|
||||
10
app.js
10
app.js
@ -1,10 +0,0 @@
|
||||
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)
|
||||
}
|
||||
6
browserlist
Normal file
6
browserlist
Normal file
@ -0,0 +1,6 @@
|
||||
# Browsers that we support
|
||||
|
||||
>1%
|
||||
ie >= 9
|
||||
safari >= 6
|
||||
last 3 versions
|
||||
@ -1 +0,0 @@
|
||||
import './style.sss'
|
||||
@ -1,24 +0,0 @@
|
||||
.wrapper
|
||||
lost-center: 1070px
|
||||
.content
|
||||
lost-column: 2/3
|
||||
.main-inner
|
||||
padding: 40px 35px
|
||||
|
||||
@media screen and (max-width: 1100px)
|
||||
.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
|
||||
|
||||
@media screen and (max-width: 500px)
|
||||
.content
|
||||
lost-column: 4/4
|
||||
.main-inner
|
||||
padding: 25px 20px
|
||||
@ -1,8 +1,8 @@
|
||||
import React from 'react'
|
||||
import { RouteHandler, Link } from 'react-router'
|
||||
import { link } from 'gatsby-helpers'
|
||||
import { prefixLink } from 'gatsby-helpers'
|
||||
|
||||
import './style.sss'
|
||||
import './style.css'
|
||||
|
||||
class BlogNav extends React.Component {
|
||||
render() {
|
||||
@ -11,15 +11,15 @@ class BlogNav extends React.Component {
|
||||
<nav className='blog-nav'>
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/" className={ location.pathname === link('/') ? "current" : null }> Articles
|
||||
<Link to="/" className={ location.pathname === prefixLink('/') ? "current" : null }> Articles
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/about" className={ location.pathname === link('/about') ? "current" : null }> About me
|
||||
<Link to="/about" className={ location.pathname === prefixLink('/about') ? "current" : null }> About me
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/contact" className={ location.pathname === link('/contact') ? "current" : null }> Contact me
|
||||
<Link to="/contact" className={ location.pathname === prefixLink('/contact') ? "current" : null }> Contact me
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
24
components/BlogNav/style.css
Normal file
24
components/BlogNav/style.css
Normal file
@ -0,0 +1,24 @@
|
||||
.blog-nav {
|
||||
margin: 20px 0px 10px;
|
||||
}
|
||||
.blog-nav ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
.blog-nav ul li {
|
||||
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;
|
||||
}
|
||||
.blog-nav ul li a.current {
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
.blog-nav ul li a:hover {
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
.blog-nav
|
||||
margin: 20px 0px 10px
|
||||
|
||||
.blog-nav ul
|
||||
list-style: none
|
||||
padding-left: 0
|
||||
|
||||
.blog-nav ul li
|
||||
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
|
||||
|
||||
.blog-nav ul li a.current
|
||||
border-bottom: 1px solid
|
||||
|
||||
.blog-nav ul li a:hover
|
||||
border-bottom: 1px solid
|
||||
@ -1,13 +1,13 @@
|
||||
import React from 'react'
|
||||
import moment from 'moment'
|
||||
import { RouteHandler, Link } from 'react-router'
|
||||
import { link } from 'gatsby-helpers'
|
||||
import { prefixLink } from 'gatsby-helpers'
|
||||
import DocumentTitle from 'react-document-title'
|
||||
import SidebarLeft from '../SidebarLeft'
|
||||
import access from 'safe-access'
|
||||
import { config } from 'config'
|
||||
|
||||
import './style.sss';
|
||||
import './style.css';
|
||||
|
||||
class BlogPage extends React.Component {
|
||||
render() {
|
||||
|
||||
17
components/BlogPage/style.css
Normal file
17
components/BlogPage/style.css
Normal file
@ -0,0 +1,17 @@
|
||||
.blog-page {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.blog-page h1 {
|
||||
font-size: responsive 20px 36px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.blog-page p {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
@media (max-width:900px) {
|
||||
.blog-single .text, .blog-single .footer {
|
||||
padding: 0 15px;
|
||||
}
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
.blog-page
|
||||
margin-bottom: 40px
|
||||
|
||||
.blog-page h1
|
||||
font-size: responsive 20px 36px
|
||||
margin-top: 0
|
||||
|
||||
.blog-page p
|
||||
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
|
||||
@ -2,13 +2,11 @@ import React from 'react'
|
||||
import moment from 'moment'
|
||||
import { RouteHandler, Link } from 'react-router'
|
||||
import DocumentTitle from 'react-document-title'
|
||||
import { link } from 'gatsby-helpers'
|
||||
import { prefixLink } from 'gatsby-helpers'
|
||||
import access from 'safe-access'
|
||||
import ReadNext from '../ReadNext'
|
||||
import { config } from 'config'
|
||||
|
||||
import './style.sss'
|
||||
|
||||
import ReadNext from '../ReadNext'
|
||||
import './style.css'
|
||||
import '../../static/css/highlight.css'
|
||||
|
||||
class BlogPost extends React.Component {
|
||||
@ -17,7 +15,7 @@ class BlogPost extends React.Component {
|
||||
const post = route.page.data
|
||||
const home = (
|
||||
<div>
|
||||
<Link className='gohome' to={ link('/') }> All Articles
|
||||
<Link className='gohome' to={ prefixLink('/') }> All Articles
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
@ -39,7 +37,7 @@ class BlogPost extends React.Component {
|
||||
<p>
|
||||
{ config.siteDescr }
|
||||
<a href={ config.twitter }>
|
||||
<br></br> <strong>{ config.authorName }</strong> on Twitter</a>
|
||||
<br></br> <strong>{ config.siteAuthor }</strong> on Twitter</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
105
components/BlogPost/style.css
Normal file
105
components/BlogPost/style.css
Normal file
@ -0,0 +1,105 @@
|
||||
.blog-post {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.blog-post:last-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.blog-post h2 {
|
||||
margin-top: 10px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.blog-post h2 a:hover {
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
.blog-post p {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
.blog-post time {
|
||||
font-size: 14px;
|
||||
color: #222;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.blog-post .blog-category {
|
||||
font-size: 14px;
|
||||
color: #f7a046;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.blog-post .readmore {
|
||||
font-size: 16px;
|
||||
color: #5d93ff;
|
||||
}
|
||||
.blog-post .readmore:hover {
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
.blog-single {
|
||||
max-width: 945px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.blog-single h1 {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.blog-single .text {
|
||||
line-height: 31px;
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
.blog-single h1, .blog-single .date-published, .blog-single .text *:not(div) {
|
||||
max-width: 630px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.blog-single .text img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.blog-single .footer {
|
||||
max-width: 630px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
line-height: 31px;
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
.gohome {
|
||||
position: fixed;
|
||||
left: 20px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
padding: 8px 16px;
|
||||
color: #999;
|
||||
background: #f4f4f4;
|
||||
font-weight: 400;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.gohome:focus {
|
||||
color: #444;
|
||||
background: #f4f4f4;
|
||||
border: 0;
|
||||
}
|
||||
.gohome:hover {
|
||||
color: #444;
|
||||
background: #f4f4f4;
|
||||
border: 0;
|
||||
}
|
||||
@media (max-width:900px) {
|
||||
.blog-single h1 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.blog-single .text, .blog-single .footer {
|
||||
padding: 0 15px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
.gohome {
|
||||
position: static;
|
||||
margin: 20px auto 0;
|
||||
text-align: center;
|
||||
width: 85px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@ -1,108 +0,0 @@
|
||||
.blog-post
|
||||
margin-bottom: 30px
|
||||
|
||||
.blog-post:last-child
|
||||
margin-bottom: 10px
|
||||
|
||||
.blog-post h2
|
||||
margin-top: 10px
|
||||
line-height: 30px
|
||||
margin-bottom: 20px
|
||||
|
||||
.blog-post h2 a:hover
|
||||
border-bottom: 1px solid
|
||||
|
||||
.blog-post p
|
||||
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
|
||||
|
||||
.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
|
||||
|
||||
.blog-post .readmore
|
||||
font-size: 16px
|
||||
color: #5d93ff
|
||||
font-weight: 600
|
||||
font-family: 'Raleway', Helvetica, Arial, sans-serif
|
||||
|
||||
.blog-post .readmore:hover
|
||||
border-bottom: 1px solid
|
||||
|
||||
.blog-single h1
|
||||
text-align: center
|
||||
margin-top: 30px
|
||||
|
||||
.blog-single .text
|
||||
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
|
||||
|
||||
.blog-single .text img
|
||||
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
|
||||
|
||||
.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
|
||||
|
||||
.gohome:hover
|
||||
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
|
||||
@ -1,45 +1,38 @@
|
||||
import React from 'react'
|
||||
import { RouteHandler, Link } from 'react-router'
|
||||
import { link } from 'gatsby-helpers'
|
||||
import { prefixLink } from 'gatsby-helpers'
|
||||
import { config } from 'config'
|
||||
|
||||
import './style.sss'
|
||||
import './style.css'
|
||||
import '../../static/fonts/fontawesome/style.css'
|
||||
|
||||
class BlogSocial extends React.Component {
|
||||
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
|
||||
|
||||
return (
|
||||
<div className='blog-social'>
|
||||
<ul>
|
||||
<li>
|
||||
<a href={ twitter }><i className='fa fa-twitter'></i></a>
|
||||
<a href={ config.siteTwitterUrl }><i className='fa fa-twitter'></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={ github }><i className='fa fa-github-alt'></i></a>
|
||||
<a href={ config.siteGithubUrl }><i className='fa fa-github-alt'></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={ vk }><i className='fa fa-vk'></i></a>
|
||||
<a href={ config.siteVkUrl }><i className='fa fa-vk'></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<a href={ email }><i className='fa fa-envelope-o'></i></a>
|
||||
<a href={ config.siteEmailUrl }><i className='fa fa-envelope-o'></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={ telegram }><i className='fa fa-paper-plane'></i></a>
|
||||
<a href={ config.siteTelegramUrl }><i className='fa fa-paper-plane'></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>
|
||||
<a href={ rss }><i className='fa fa-rss'></i></a>
|
||||
<a href={ config.siteRssUrl }><i className='fa fa-rss'></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
32
components/BlogSocial/style.css
Normal file
32
components/BlogSocial/style.css
Normal file
@ -0,0 +1,32 @@
|
||||
.blog-social {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.blog-social ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 10px 0;
|
||||
clear: fix-legacy;
|
||||
}
|
||||
.blog-social ul > li {
|
||||
float: left;
|
||||
margin-right: 5px;
|
||||
text-align: center;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
border-radius: 3px;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.blog-social ul > li:hover {
|
||||
background: #f4f4f4;
|
||||
}
|
||||
.blog-social ul > li > a {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.blog-social ul > li > a > i {
|
||||
color: #606060;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.blog-social ul > li:hover a > i {
|
||||
color: #444;
|
||||
}
|
||||
@ -1,34 +0,0 @@
|
||||
.blog-social
|
||||
margin-top: 30px
|
||||
|
||||
.blog-social ul
|
||||
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
|
||||
|
||||
.blog-social ul > li:hover
|
||||
background: #f4efe8
|
||||
|
||||
.blog-social ul > li > a
|
||||
border-bottom: 0
|
||||
line-height: 21px
|
||||
cursor: pointer
|
||||
|
||||
.blog-social ul > li > a > i
|
||||
color: #333
|
||||
font-size: 14px
|
||||
line-height: 21px
|
||||
|
||||
.blog-social ul > li:hover a > i
|
||||
color: #222
|
||||
@ -3,7 +3,7 @@ import { Link } from 'react-router'
|
||||
import { prune, include as includes } from 'underscore.string'
|
||||
import find from 'lodash/find'
|
||||
|
||||
import './style.sss'
|
||||
import './style.css'
|
||||
|
||||
class ReadNext extends React.Component {
|
||||
render() {
|
||||
|
||||
4
components/ReadNext/style.css
Normal file
4
components/ReadNext/style.css
Normal file
@ -0,0 +1,4 @@
|
||||
.description {
|
||||
font-size: responsive 12px 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
.description
|
||||
font-size: responsive 12px 14px
|
||||
line-height: 1.6
|
||||
@ -1,27 +1,30 @@
|
||||
import React from 'react'
|
||||
import { RouteHandler, Link } from 'react-router'
|
||||
import { link } from 'gatsby-helpers'
|
||||
import { prefixLink } from 'gatsby-helpers'
|
||||
import { config } from 'config'
|
||||
import BlogNav from '../BlogNav'
|
||||
import BlogSocial from '../BlogSocial'
|
||||
import './style.sss'
|
||||
import './style.css'
|
||||
|
||||
class SidebarLeft extends React.Component {
|
||||
render() {
|
||||
const {location, children} = this.props
|
||||
let header
|
||||
const isHome = location.pathname === prefixLink('/')
|
||||
|
||||
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>
|
||||
);
|
||||
let header = (
|
||||
<header>
|
||||
<Link style={ { textDecoration: 'none', borderBottom: 'none', outline: 'none'} } to={ prefixLink('/') }>
|
||||
<img src='./photo.jpg' width='75' height='75' />
|
||||
</Link>
|
||||
{ isHome ? (
|
||||
<h1><Link style={ { textDecoration: 'none', borderBottom: 'none', color: 'inherit'} } to={ prefixLink('/') }> { config.siteAuthor } </Link></h1>
|
||||
) :
|
||||
<h2><Link style={ { textDecoration: 'none', borderBottom: 'none', color: 'inherit'} } to={ prefixLink('/') }> { config.siteAuthor } </Link></h2> }
|
||||
<p>
|
||||
{ config.siteDescr }
|
||||
</p>
|
||||
</header>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className='sidebar'>
|
||||
|
||||
67
components/SidebarLeft/style.css
Normal file
67
components/SidebarLeft/style.css
Normal file
@ -0,0 +1,67 @@
|
||||
.sidebar {
|
||||
lost-column: 1/3;
|
||||
}
|
||||
.sidebar .sidebar-inner {
|
||||
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;
|
||||
}
|
||||
.sidebar .sidebar-inner img {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
border-radius: 50%;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.sidebar .sidebar-inner h1, .sidebar .sidebar-inner h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 18px;
|
||||
margin: 20px 0 10px;
|
||||
}
|
||||
.sidebar .sidebar-inner p {
|
||||
color: #888;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
.sidebar .sidebar-inner p.copyright {
|
||||
color: #b6b6b6;
|
||||
font-size: 14px;
|
||||
}
|
||||
@media (max-width:1100px) {
|
||||
.sidebar .sidebar-inner {
|
||||
padding: 35px 20px 0;
|
||||
}
|
||||
.sidebar {
|
||||
lost-column: 1/2;
|
||||
}
|
||||
}
|
||||
@media (max-width:900px) {
|
||||
.sidebar {
|
||||
lost-column: 5/12;
|
||||
}
|
||||
.sidebar .sidebar-inner {
|
||||
padding: 30px 20px 0;
|
||||
}
|
||||
}
|
||||
@media (max-width:500px) {
|
||||
.sidebar {
|
||||
lost-column: 1;
|
||||
}
|
||||
.sidebar .sidebar-inner {
|
||||
padding: 25px 20px 0;
|
||||
}
|
||||
.sidebar .sidebar-inner:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@ -1,59 +0,0 @@
|
||||
.sidebar
|
||||
lost-column: 1/3
|
||||
|
||||
.sidebar .sidebar-inner
|
||||
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
|
||||
|
||||
.sidebar .sidebar-inner img
|
||||
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
|
||||
|
||||
.sidebar .sidebar-inner p
|
||||
font-size: 14px
|
||||
color: #888
|
||||
line-height: 23px
|
||||
margin-bottom: 23px
|
||||
|
||||
.sidebar .sidebar-inner p.copyright
|
||||
color: #b6b6b6
|
||||
font-size: 12px
|
||||
|
||||
@media (max-width: 1100px)
|
||||
.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
|
||||
|
||||
@media (max-width: 500px)
|
||||
.sidebar
|
||||
lost-column: 4/4
|
||||
.sidebar .sidebar-inner
|
||||
padding: 25px 20px 0
|
||||
.sidebar .sidebar-inner:after
|
||||
display: none
|
||||
17
config.toml
17
config.toml
@ -1,13 +1,12 @@
|
||||
siteTitle = "Blog by John Doe"
|
||||
siteDescr = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. "
|
||||
siteDescr = "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
|
||||
siteAuthor = "John Doe"
|
||||
|
||||
authorName = "John Doe"
|
||||
|
||||
linkTelegram = "#"
|
||||
linkTwitter = "#"
|
||||
linkGithub = "#"
|
||||
linkEmail = "#"
|
||||
linkRss = "/feed.xml"
|
||||
linkVk = "#"
|
||||
siteTelegramUrl = "#"
|
||||
siteTwitterUrl = "#"
|
||||
siteGithubUrl = "#"
|
||||
siteEmailUrl = "#"
|
||||
siteRssUrl = "#"
|
||||
siteVkUrl = "#"
|
||||
|
||||
linkPrefix = "/lumen"
|
||||
13
gatsby-node.js
Normal file
13
gatsby-node.js
Normal file
@ -0,0 +1,13 @@
|
||||
var rucksack = require('rucksack-css')
|
||||
var lost = require("lost")
|
||||
|
||||
exports.modifyWebpackConfig = function(config, env) {
|
||||
config.merge({
|
||||
postcss: [
|
||||
lost(),
|
||||
rucksack()
|
||||
]
|
||||
})
|
||||
|
||||
return config
|
||||
};
|
||||
@ -1,54 +0,0 @@
|
||||
import webpack from 'webpack'
|
||||
import precss from 'precss'
|
||||
import lost from 'lost'
|
||||
import rucksack from 'rucksack-css'
|
||||
import ExtractTextPlugin from 'extract-text-webpack-plugin'
|
||||
|
||||
module.exports = function(config, env) {
|
||||
var is_static = env === 'static';
|
||||
var is_develop = env === 'develop';
|
||||
var is_production = env === 'production';
|
||||
|
||||
config.merge({
|
||||
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
|
||||
})
|
||||
} 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.plugin('extract-css',
|
||||
ExtractTextPlugin,
|
||||
["styles.css", {
|
||||
allChunks: true
|
||||
}]);
|
||||
|
||||
return config
|
||||
};
|
||||
45
html.js
45
html.js
@ -1,22 +1,34 @@
|
||||
import React from 'react'
|
||||
import DocumentTitle from 'react-document-title'
|
||||
import { link } from 'gatsby-helpers'
|
||||
import { prefixLink } from 'gatsby-helpers'
|
||||
|
||||
const BUILD_TIME = new Date().getTime()
|
||||
|
||||
module.exports = React.createClass({
|
||||
propTypes() {
|
||||
return {
|
||||
title: React.PropTypes.string,
|
||||
}
|
||||
displayName: 'HTML',
|
||||
propTypes: {
|
||||
body: React.PropTypes.string,
|
||||
},
|
||||
render() {
|
||||
let title = DocumentTitle.rewind()
|
||||
if (this.props.title) {
|
||||
title = this.props.title
|
||||
}
|
||||
const {body, route} = this.props
|
||||
const title = DocumentTitle.rewind()
|
||||
|
||||
let cssLink
|
||||
const font = `
|
||||
WebFontConfig = {
|
||||
google: { families: [ 'Roboto:400,500,700:latin,cyrillic' ] }
|
||||
};
|
||||
(function() {
|
||||
var wf = document.createElement('script');
|
||||
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
|
||||
wf.type = 'text/javascript';
|
||||
wf.async = 'true';
|
||||
var s = document.getElementsByTagName('script')[0];
|
||||
s.parentNode.insertBefore(wf, s);
|
||||
})();
|
||||
`
|
||||
let css
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
cssLink = <link rel="stylesheet" href={ link('/styles.css') } />
|
||||
css = <style dangerouslySetInnerHTML={ { __html: require('!raw!postcss!./public/styles.css')} } />
|
||||
}
|
||||
|
||||
return (
|
||||
@ -24,19 +36,18 @@ module.exports = React.createClass({
|
||||
<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" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=5.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') } />
|
||||
<script dangerouslySetInnerHTML={ { __html: font} } />
|
||||
{ css }
|
||||
<script src={ prefixLink(`/bundle.js?t=${BUILD_TIME}`) } />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
},
|
||||
})
|
||||
})
|
||||
57
package.json
57
package.json
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "gatsby-theme-lumen",
|
||||
"version": "1.0.0",
|
||||
"description": "Awesome Theme for Gatsby",
|
||||
"name": "gatsby-starter-lumen",
|
||||
"description": "Simple starter for Gatsby",
|
||||
"main": "n/a",
|
||||
"scripts": {
|
||||
"lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
|
||||
@ -9,41 +9,40 @@
|
||||
},
|
||||
"keywords": [
|
||||
"gatsby",
|
||||
"theme",
|
||||
"lumen"
|
||||
"lumen",
|
||||
"starter"
|
||||
],
|
||||
"author": "Alexander Shelepenok <a.shelepenok@gmail.com>",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"react": "^0.14.7",
|
||||
"babel-plugin-add-module-exports": "^0.2.0",
|
||||
"babel-preset-es2015": "^6.6.0",
|
||||
"babel-preset-react": "^6.5.0",
|
||||
"babel-preset-stage-0": "^6.5.0",
|
||||
"babel-preset-stage-1": "^6.5.0",
|
||||
"classnames": "^2.1.2",
|
||||
"front-matter": "^2.0.8",
|
||||
"gatsby": "^0.11.2",
|
||||
"history": "^2.1.1",
|
||||
"lodash": "^4.12.0",
|
||||
"moment": "^2.12.0",
|
||||
"markdown-it": "^6.0.2",
|
||||
"react-document-title": "^2.0.1",
|
||||
"react-dom": "^0.14.7",
|
||||
"react-router": "^2.0.0",
|
||||
"lodash": "^4.5.0",
|
||||
"react-google-analytics": "^0.2.0",
|
||||
"react-router": "^2.4.0",
|
||||
"safe-access": "^0.1.0",
|
||||
"underscore.string": "^3.2.3",
|
||||
"moment": "^2.11.2"
|
||||
"underscore.string": "^3.2.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"webpack": "^1.12.2",
|
||||
"webpack-dev-server": "^1.12.0",
|
||||
"webpack-hot-middleware": "^2.2.0",
|
||||
"extract-text-webpack-plugin": "^1.0.1",
|
||||
"file-loader": "^0.8.4",
|
||||
"url-loader": "^0.5.7",
|
||||
"sugarss": "^0.1.0",
|
||||
"precss": "^1.4.0",
|
||||
"postcss-scss": "^0.1.7",
|
||||
"postcss-loader": "^0.8.0",
|
||||
"postcss-modules": "^0.1.3",
|
||||
"lost": "^6.7.0",
|
||||
"autoprefixer": "^6.3.6",
|
||||
"file-loader": "^0.8.5",
|
||||
"rucksack-css": "^0.8.5",
|
||||
"babel-plugin-react-transform": "^1.1.1",
|
||||
"eslint": "^2.3.0",
|
||||
"eslint-config-airbnb": "^6.1.0",
|
||||
"eslint-plugin-react": "^4.2.0",
|
||||
"react-transform-catch-errors": "^1.0.0",
|
||||
"react-transform-hmr": "^1.0.0",
|
||||
"redbox-react": "^1.0.1"
|
||||
"lost": "^6.7.2",
|
||||
"babel-preset-react-hmre": "^1.1.1",
|
||||
"eslint": "^2.9.0",
|
||||
"eslint-config-airbnb": "^9.0.1",
|
||||
"eslint-plugin-import": "^1.8.0",
|
||||
"eslint-plugin-jsx-a11y": "^1.2.0",
|
||||
"eslint-plugin-react": "^5.1.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
path: /404.html
|
||||
layout: page
|
||||
---
|
||||
|
||||
# NOT FOUND
|
||||
|
||||
You just hit a route that doesn't exist... the sadness.
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router'
|
||||
import { link } from 'gatsby-helpers'
|
||||
import { prefixLink } from 'gatsby-helpers'
|
||||
import { config } from 'config'
|
||||
|
||||
import '../static/css/reset.css'
|
||||
import '../static/css/base.css'
|
||||
import '../static/css/typography.css'
|
||||
|
||||
class Template extends React.Component {
|
||||
|
||||
|
Before Width: | Height: | Size: 151 KiB After Width: | Height: | Size: 151 KiB |
|
Before Width: | Height: | Size: 319 KiB After Width: | Height: | Size: 319 KiB |
|
Before Width: | Height: | Size: 1.8 MiB After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
@ -1,14 +1,14 @@
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router'
|
||||
import sortBy from 'lodash/sortBy'
|
||||
import moment from 'moment';
|
||||
import moment from 'moment'
|
||||
import DocumentTitle from 'react-document-title'
|
||||
import { link } from 'gatsby-helpers'
|
||||
import { prefixLink } from 'gatsby-helpers'
|
||||
import access from 'safe-access'
|
||||
import { config } from 'config'
|
||||
|
||||
import BlogPost from '../components/BlogPost'
|
||||
import SidebarLeft from '../components/SidebarLeft'
|
||||
import BlogContent from '../components/BlogContent'
|
||||
|
||||
class BlogIndex extends React.Component {
|
||||
render() {
|
||||
@ -30,9 +30,9 @@ class BlogIndex extends React.Component {
|
||||
</time>
|
||||
<span style={ { padding: '5px'} }></span>
|
||||
<span className='blog-category'>{ category }</span>
|
||||
<h2><Link style={ { borderBottom: 'none',} } to={ link(page.path) } > { title } </Link></h2>
|
||||
<h2><Link style={ { borderBottom: 'none',} } to={ prefixLink(page.path) } > { title } </Link></h2>
|
||||
<p dangerouslySetInnerHTML={ { __html: description} } />
|
||||
<Link className='readmore' to={ link(page.path) }> Read
|
||||
<Link className='readmore' to={ prefixLink(page.path) }> Read
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
|
||||
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
33
static/css/base.css
Normal file
33
static/css/base.css
Normal file
@ -0,0 +1,33 @@
|
||||
.wrapper {
|
||||
lost-center: 1070px;
|
||||
}
|
||||
.content {
|
||||
lost-column: 2/3;
|
||||
}
|
||||
.main-inner {
|
||||
padding: 40px 35px;
|
||||
}
|
||||
@media screen and (max-width:1100px) {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:500px) {
|
||||
.content {
|
||||
lost-column: 4/4;
|
||||
}
|
||||
.main-inner {
|
||||
padding: 25px 20px;
|
||||
}
|
||||
}
|
||||
@ -1,21 +1,188 @@
|
||||
/*! Gatsby Lumen Typography. Based on Gutengerg <- https://github.com/matejlatin/Gutenberg/ -> */
|
||||
html, body {
|
||||
/*
|
||||
Gutenberg: Web Typography Starter Kit
|
||||
Website ....... http://matejlatin.github.io/Gutenberg/
|
||||
Version ....... 1.1
|
||||
Github ........ https://github.com/matejlatin/Gutenberg
|
||||
Authors ....... Matej Latin (@matejlatin)
|
||||
License ....... Creative Commmons Attribution 3.0
|
||||
License URL ... https://raw.githubusercontent.com/matejlatin/Gutenberg/master/license.txt
|
||||
*/
|
||||
|
||||
/* Font themes
|
||||
========================================================================== */
|
||||
@media screen and (min-width:40em) {
|
||||
.floatLeft {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width:40em) {
|
||||
.floatCenter {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width:40em) {
|
||||
.floatRight {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
/* Defaults
|
||||
========================================================================== */
|
||||
@media screen and (min-width:40em) {
|
||||
body, html {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
font-size: 100%;
|
||||
font-family: "PT Sans", Georgia, Times, serif;
|
||||
font-family: "Roboto", Arial, sans-serif;
|
||||
color: #222;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
@media screen and (min-width:40em) {
|
||||
html {
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
footer {
|
||||
display: block;
|
||||
}
|
||||
body > footer {
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
}
|
||||
header {
|
||||
display: block;
|
||||
}
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Paragraph
|
||||
========================================================================== */
|
||||
/* Links
|
||||
========================================================================== */
|
||||
a {
|
||||
background: transparent;
|
||||
color: #222;
|
||||
text-decoration: none;
|
||||
transition: all .3s;
|
||||
}
|
||||
a:active, a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
a:hover {
|
||||
color: #222;
|
||||
}
|
||||
a:active {
|
||||
color: #222;
|
||||
}
|
||||
article {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 80%;
|
||||
}
|
||||
@media screen and (min-width:40em) {
|
||||
article {
|
||||
max-width: 945px;
|
||||
max-width: 52.5rem;
|
||||
}
|
||||
}
|
||||
audio {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
canvas {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
code, kbd, pre, samp {
|
||||
font-family: monospace, monospace;
|
||||
}
|
||||
code {
|
||||
padding: 26px;
|
||||
padding: 1.625rem;
|
||||
display: block;
|
||||
}
|
||||
@media screen and (min-width:40em) {
|
||||
code {
|
||||
padding: 31px;
|
||||
padding: 1.722222222222222rem;
|
||||
}
|
||||
}
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
figcaption {
|
||||
line-height: 26px;
|
||||
line-height: 1.625rem;
|
||||
color: #222;
|
||||
display: block;
|
||||
font-size: .8125rem;
|
||||
font-style: italic;
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
@media screen and (min-width:40em) {
|
||||
figcaption {
|
||||
line-height: 31px;
|
||||
line-height: 1.722222222222222rem;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
figure {
|
||||
display: block;
|
||||
}
|
||||
@media screen and (min-width:40em) {
|
||||
figure.floatLeft, figure.floatRight {
|
||||
max-width: 315px;
|
||||
max-width: 17.5rem;
|
||||
padding: 0px 31px;
|
||||
padding: 0rem 1.722222222222222rem;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width:40em) {
|
||||
figure.floatLeft blockquote, figure.floatRight blockquote {
|
||||
padding: 0px;
|
||||
padding: 0rem;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width:40em) {
|
||||
figure.floatLeft blockquote p, figure.floatRight blockquote p {
|
||||
font-size: 19.2px;
|
||||
font-size: 1.2rem;
|
||||
line-height: 31px;
|
||||
line-height: 1.722222222222222rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Headings
|
||||
========================================================================== */
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: "Raleway", Helvetica, Arial, sans-serif;
|
||||
color: #222;
|
||||
}
|
||||
========================================================================== */
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
font-size: 2.5rem;
|
||||
@ -76,168 +243,7 @@ h6 {
|
||||
margin-bottom: 13px;
|
||||
margin-bottom: 0.8125rem;
|
||||
}
|
||||
h1 + h2 {
|
||||
margin-top: 26px;
|
||||
margin-top: 1.625rem;
|
||||
}
|
||||
h2 + h3, h3 + h4, h4 + h5 {
|
||||
margin-top: 13px;
|
||||
margin-top: 0.8125rem;
|
||||
}
|
||||
h5 + h6 {
|
||||
margin-top: -13px;
|
||||
margin-top: -0.8125rem;
|
||||
}
|
||||
h6 {
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Links
|
||||
========================================================================== */
|
||||
a {
|
||||
color: #5d93ff;
|
||||
text-decoration: none;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
a:hover {
|
||||
border-bottom: 1px solid;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:visited {
|
||||
color: #222;
|
||||
}
|
||||
a:visited:hover {
|
||||
color: #222;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
a:active {
|
||||
color: #222;
|
||||
border-bottom: 1px solid;
|
||||
}
|
||||
h2 a {
|
||||
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;
|
||||
}
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
padding-left: 1.4375rem;
|
||||
}
|
||||
cite {
|
||||
font-style: normal;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
small {
|
||||
line-height: 13px;
|
||||
line-height: 0.8125rem;
|
||||
}
|
||||
code {
|
||||
padding: 26px;
|
||||
padding: 1.625rem;
|
||||
}
|
||||
.alignLeft {
|
||||
text-align: left;
|
||||
}
|
||||
.alignCenter {
|
||||
text-align: center;
|
||||
}
|
||||
.alignRight {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Put your styles below this line
|
||||
========================================================================== */
|
||||
@media screen and (min-width:40em) {
|
||||
|
||||
/* 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;
|
||||
@ -298,74 +304,63 @@ code {
|
||||
margin-bottom: 15.5px;
|
||||
margin-bottom: 0.861111111111111rem;
|
||||
}
|
||||
}
|
||||
h1 + h2 {
|
||||
margin-top: 26px;
|
||||
margin-top: 1.625rem;
|
||||
}
|
||||
@media screen and (min-width:40em) {
|
||||
h1 + h2 {
|
||||
margin-top: 31px;
|
||||
margin-top: 1.722222222222222rem;
|
||||
}
|
||||
}
|
||||
h2 + h3, h3 + h4, h4 + h5 {
|
||||
margin-top: 13px;
|
||||
margin-top: 0.8125rem;
|
||||
}
|
||||
@media screen and (min-width:40em) {
|
||||
h2 + h3, h3 + h4, h4 + h5 {
|
||||
margin-top: 15.5px;
|
||||
margin-top: 0.861111111111111rem;
|
||||
}
|
||||
}
|
||||
h5 + h6 {
|
||||
margin-top: -13px;
|
||||
margin-top: -0.8125rem;
|
||||
}
|
||||
@media screen and (min-width:40em) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
}
|
||||
hgroup {
|
||||
display: block;
|
||||
}
|
||||
hr {
|
||||
margin-top: 52px;
|
||||
margin-top: 3.25rem;
|
||||
margin-bottom: 52px;
|
||||
margin-bottom: 3.25rem;
|
||||
box-sizing: content-box;
|
||||
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;
|
||||
}
|
||||
@media screen and (min-width:40em) {
|
||||
hr {
|
||||
margin-top: 62px;
|
||||
margin-top: 3.444444444444445rem;
|
||||
@ -373,12 +368,147 @@ code {
|
||||
margin-bottom: 3.444444444444445rem;
|
||||
height: 31px;
|
||||
height: 1.722222222222222rem;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width:40em) {
|
||||
hr {
|
||||
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;
|
||||
}
|
||||
img {
|
||||
border: 0;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin: inherit auto;
|
||||
}
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
ul li, ol li {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
nav {
|
||||
display: block;
|
||||
}
|
||||
progress {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
padding-left: 1.4375rem;
|
||||
}
|
||||
@media screen and (min-width:40em) {
|
||||
blockquote {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
}
|
||||
cite {
|
||||
display: block;
|
||||
font-style: normal;
|
||||
}
|
||||
figure blockquote {
|
||||
padding: 26px 0px;
|
||||
padding: 1.625rem 0rem;
|
||||
}
|
||||
@media screen and (min-width:40em) {
|
||||
figure blockquote {
|
||||
padding: 62px 0px 31px;
|
||||
padding: 3.444444444444445rem 0rem 1.722222222222222rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
figure blockquote p {
|
||||
font-size: 27px;
|
||||
font-size: 1.6875rem;
|
||||
line-height: 39px;
|
||||
line-height: 2.4375rem;
|
||||
}
|
||||
@media screen and (min-width:40em) {
|
||||
figure blockquote p {
|
||||
font-size: 27px;
|
||||
font-size: 1.6875rem;
|
||||
line-height: 46.5px;
|
||||
line-height: 2.583333333333334rem;
|
||||
}
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
td, th {
|
||||
padding: 0;
|
||||
}
|
||||
[hidden], template {
|
||||
display: none;
|
||||
}
|
||||
abbr {
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
b, strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
em, i {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
small {
|
||||
line-height: 13px;
|
||||
line-height: 0.8125rem;
|
||||
font-size: 70%;
|
||||
}
|
||||
@media screen and (min-width:40em) {
|
||||
small {
|
||||
line-height: 15.5px;
|
||||
line-height: 0.861111111111111rem;
|
||||
}
|
||||
}
|
||||
sub, sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* Paragraph
|
||||
========================================================================== */
|
||||
.attention-grabber {
|
||||
font-size: 19.2px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.alignLeft {
|
||||
text-align: left;
|
||||
}
|
||||
.alignCenter {
|
||||
text-align: center;
|
||||
}
|
||||
.alignRight {
|
||||
text-align: right;
|
||||
}
|
||||
.uppercase {
|
||||
letter-spacing: .1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
video {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
@ -8,8 +8,8 @@ class MarkdownWrapper extends React.Component {
|
||||
render() {
|
||||
const {route} = this.props
|
||||
const post = route.page.data
|
||||
|
||||
let layout, template
|
||||
|
||||
layout = post.layout
|
||||
|
||||
if (layout != 'page') {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user