mirror of
https://github.com/mastermindzh/rickvanlieshout.com
synced 2025-10-31 08:40:27 +01:00
upgrade to Gatsby 0.11
This commit is contained in:
wpioneer
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],
|
"no-else-return": [0],
|
||||||
"space-infix-ops": [0],
|
"space-infix-ops": [0],
|
||||||
"react/prefer-es6-class": [0],
|
"react/prefer-es6-class": [0],
|
||||||
|
"react/prefer-stateless-function": [0],
|
||||||
|
"import/no-unresolved": [0],
|
||||||
|
"global-require": [0],
|
||||||
},
|
},
|
||||||
"globals": {
|
"globals": {
|
||||||
"__PREFIX_LINKS__": true,
|
"__PREFIX_LINKS__": true,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
30
.gitignore
vendored
30
.gitignore
vendored
@@ -1,27 +1,5 @@
|
|||||||
# Logs
|
node_modules/
|
||||||
logs
|
public
|
||||||
*.log
|
|
||||||
|
|
||||||
# Runtime data
|
.gatsby-context.js
|
||||||
pids
|
pages/.manifest
|
||||||
*.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
|
|
||||||
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 React from 'react'
|
||||||
import { RouteHandler, Link } from 'react-router'
|
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 {
|
class BlogNav extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
@@ -11,15 +11,15 @@ class BlogNav extends React.Component {
|
|||||||
<nav className='blog-nav'>
|
<nav className='blog-nav'>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<Link to="/" className={ location.pathname === link('/') ? "current" : null }> Articles
|
<Link to="/" className={ location.pathname === prefixLink('/') ? "current" : null }> Articles
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<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>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
<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>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</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 React from 'react'
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
import { RouteHandler, Link } from 'react-router'
|
import { RouteHandler, Link } from 'react-router'
|
||||||
import { link } from 'gatsby-helpers'
|
import { prefixLink } from 'gatsby-helpers'
|
||||||
import DocumentTitle from 'react-document-title'
|
import DocumentTitle from 'react-document-title'
|
||||||
import SidebarLeft from '../SidebarLeft'
|
import SidebarLeft from '../SidebarLeft'
|
||||||
import access from 'safe-access'
|
import access from 'safe-access'
|
||||||
import { config } from 'config'
|
import { config } from 'config'
|
||||||
|
|
||||||
import './style.sss';
|
import './style.css';
|
||||||
|
|
||||||
class BlogPage extends React.Component {
|
class BlogPage extends React.Component {
|
||||||
render() {
|
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 moment from 'moment'
|
||||||
import { RouteHandler, Link } from 'react-router'
|
import { RouteHandler, Link } from 'react-router'
|
||||||
import DocumentTitle from 'react-document-title'
|
import DocumentTitle from 'react-document-title'
|
||||||
import { link } from 'gatsby-helpers'
|
import { prefixLink } from 'gatsby-helpers'
|
||||||
import access from 'safe-access'
|
import access from 'safe-access'
|
||||||
import ReadNext from '../ReadNext'
|
|
||||||
import { config } from 'config'
|
import { config } from 'config'
|
||||||
|
import ReadNext from '../ReadNext'
|
||||||
import './style.sss'
|
import './style.css'
|
||||||
|
|
||||||
import '../../static/css/highlight.css'
|
import '../../static/css/highlight.css'
|
||||||
|
|
||||||
class BlogPost extends React.Component {
|
class BlogPost extends React.Component {
|
||||||
@@ -17,7 +15,7 @@ class BlogPost extends React.Component {
|
|||||||
const post = route.page.data
|
const post = route.page.data
|
||||||
const home = (
|
const home = (
|
||||||
<div>
|
<div>
|
||||||
<Link className='gohome' to={ link('/') }> All Articles
|
<Link className='gohome' to={ prefixLink('/') }> All Articles
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
@@ -39,7 +37,7 @@ class BlogPost extends React.Component {
|
|||||||
<p>
|
<p>
|
||||||
{ config.siteDescr }
|
{ config.siteDescr }
|
||||||
<a href={ config.twitter }>
|
<a href={ config.twitter }>
|
||||||
<br></br> <strong>{ config.authorName }</strong> on Twitter</a>
|
<br></br> <strong>{ config.siteAuthor }</strong> on Twitter</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</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 React from 'react'
|
||||||
import { RouteHandler, Link } from 'react-router'
|
import { RouteHandler, Link } from 'react-router'
|
||||||
import { link } from 'gatsby-helpers'
|
import { prefixLink } from 'gatsby-helpers'
|
||||||
import { config } from 'config'
|
import { config } from 'config'
|
||||||
|
|
||||||
import './style.sss'
|
import './style.css'
|
||||||
import '../../static/fonts/fontawesome/style.css'
|
import '../../static/fonts/fontawesome/style.css'
|
||||||
|
|
||||||
class BlogSocial extends React.Component {
|
class BlogSocial extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
|
|
||||||
const twitter = config.blogTitle
|
|
||||||
const vk = config.vk
|
|
||||||
const rss = config.rss
|
|
||||||
const email = config.email
|
|
||||||
const github = config.github
|
|
||||||
const telegram = config.telegram
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='blog-social'>
|
<div className='blog-social'>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a href={ twitter }><i className='fa fa-twitter'></i></a>
|
<a href={ config.siteTwitterUrl }><i className='fa fa-twitter'></i></a>
|
||||||
</li>
|
</li>
|
||||||
<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>
|
||||||
<li>
|
<li>
|
||||||
<a href={ vk }><i className='fa fa-vk'></i></a>
|
<a href={ config.siteVkUrl }><i className='fa fa-vk'></i></a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<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>
|
||||||
<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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a href={ rss }><i className='fa fa-rss'></i></a>
|
<a href={ config.siteRssUrl }><i className='fa fa-rss'></i></a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</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 { prune, include as includes } from 'underscore.string'
|
||||||
import find from 'lodash/find'
|
import find from 'lodash/find'
|
||||||
|
|
||||||
import './style.sss'
|
import './style.css'
|
||||||
|
|
||||||
class ReadNext extends React.Component {
|
class ReadNext extends React.Component {
|
||||||
render() {
|
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 React from 'react'
|
||||||
import { RouteHandler, Link } from 'react-router'
|
import { RouteHandler, Link } from 'react-router'
|
||||||
import { link } from 'gatsby-helpers'
|
import { prefixLink } from 'gatsby-helpers'
|
||||||
import { config } from 'config'
|
import { config } from 'config'
|
||||||
import BlogNav from '../BlogNav'
|
import BlogNav from '../BlogNav'
|
||||||
import BlogSocial from '../BlogSocial'
|
import BlogSocial from '../BlogSocial'
|
||||||
import './style.sss'
|
import './style.css'
|
||||||
|
|
||||||
class SidebarLeft extends React.Component {
|
class SidebarLeft extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
const {location, children} = this.props
|
const {location, children} = this.props
|
||||||
let header
|
const isHome = location.pathname === prefixLink('/')
|
||||||
|
|
||||||
header = (
|
let header = (
|
||||||
<header>
|
<header>
|
||||||
<Link style={ { textDecoration: 'none', borderBottom: 'none', outline: 'none'} } to={ link('/') }>
|
<Link style={ { textDecoration: 'none', borderBottom: 'none', outline: 'none'} } to={ prefixLink('/') }>
|
||||||
<img src='./images/photo9.jpg' width='75' height='75' />
|
<img src='./photo.jpg' width='75' height='75' />
|
||||||
</Link>
|
</Link>
|
||||||
<h1><Link style={ { textDecoration: 'none', borderBottom: 'none', color: 'inherit'} } to={ link('/') } > { config.siteTitle } </Link></h1>
|
{ isHome ? (
|
||||||
<p>
|
<h1><Link style={ { textDecoration: 'none', borderBottom: 'none', color: 'inherit'} } to={ prefixLink('/') }> { config.siteAuthor } </Link></h1>
|
||||||
{ config.siteDescr }
|
) :
|
||||||
</p>
|
<h2><Link style={ { textDecoration: 'none', borderBottom: 'none', color: 'inherit'} } to={ prefixLink('/') }> { config.siteAuthor } </Link></h2> }
|
||||||
</header>
|
<p>
|
||||||
);
|
{ config.siteDescr }
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='sidebar'>
|
<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"
|
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"
|
siteTelegramUrl = "#"
|
||||||
|
siteTwitterUrl = "#"
|
||||||
linkTelegram = "#"
|
siteGithubUrl = "#"
|
||||||
linkTwitter = "#"
|
siteEmailUrl = "#"
|
||||||
linkGithub = "#"
|
siteRssUrl = "#"
|
||||||
linkEmail = "#"
|
siteVkUrl = "#"
|
||||||
linkRss = "/feed.xml"
|
|
||||||
linkVk = "#"
|
|
||||||
|
|
||||||
linkPrefix = "/lumen"
|
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 React from 'react'
|
||||||
import DocumentTitle from 'react-document-title'
|
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({
|
module.exports = React.createClass({
|
||||||
propTypes() {
|
displayName: 'HTML',
|
||||||
return {
|
propTypes: {
|
||||||
title: React.PropTypes.string,
|
body: React.PropTypes.string,
|
||||||
}
|
|
||||||
},
|
},
|
||||||
render() {
|
render() {
|
||||||
let title = DocumentTitle.rewind()
|
const {body, route} = this.props
|
||||||
if (this.props.title) {
|
const title = DocumentTitle.rewind()
|
||||||
title = this.props.title
|
|
||||||
}
|
|
||||||
|
|
||||||
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') {
|
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 (
|
return (
|
||||||
@@ -24,19 +36,18 @@ module.exports = React.createClass({
|
|||||||
<head>
|
<head>
|
||||||
<meta charSet="utf-8" />
|
<meta charSet="utf-8" />
|
||||||
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
||||||
<meta 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 }
|
{ 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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="react-mount" dangerouslySetInnerHTML={ { __html: this.props.body} } />
|
<div id="react-mount" dangerouslySetInnerHTML={ { __html: this.props.body} } />
|
||||||
<script src={ link('/bundle.js') } />
|
<script dangerouslySetInnerHTML={ { __html: font} } />
|
||||||
|
{ css }
|
||||||
|
<script src={ prefixLink(`/bundle.js?t=${BUILD_TIME}`) } />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
57
package.json
57
package.json
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "gatsby-theme-lumen",
|
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "Awesome Theme for Gatsby",
|
"name": "gatsby-starter-lumen",
|
||||||
|
"description": "Simple starter for Gatsby",
|
||||||
"main": "n/a",
|
"main": "n/a",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
|
"lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
|
||||||
@@ -9,41 +9,40 @@
|
|||||||
},
|
},
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"gatsby",
|
"gatsby",
|
||||||
"theme",
|
"lumen",
|
||||||
"lumen"
|
"starter"
|
||||||
],
|
],
|
||||||
"author": "Alexander Shelepenok <a.shelepenok@gmail.com>",
|
"author": "Alexander Shelepenok <a.shelepenok@gmail.com>",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"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-document-title": "^2.0.1",
|
||||||
"react-dom": "^0.14.7",
|
"react-google-analytics": "^0.2.0",
|
||||||
"react-router": "^2.0.0",
|
"react-router": "^2.4.0",
|
||||||
"lodash": "^4.5.0",
|
|
||||||
"safe-access": "^0.1.0",
|
"safe-access": "^0.1.0",
|
||||||
"underscore.string": "^3.2.3",
|
"underscore.string": "^3.2.3"
|
||||||
"moment": "^2.11.2"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"webpack": "^1.12.2",
|
"autoprefixer": "^6.3.6",
|
||||||
"webpack-dev-server": "^1.12.0",
|
"file-loader": "^0.8.5",
|
||||||
"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",
|
|
||||||
"rucksack-css": "^0.8.5",
|
"rucksack-css": "^0.8.5",
|
||||||
"babel-plugin-react-transform": "^1.1.1",
|
"lost": "^6.7.2",
|
||||||
"eslint": "^2.3.0",
|
"babel-preset-react-hmre": "^1.1.1",
|
||||||
"eslint-config-airbnb": "^6.1.0",
|
"eslint": "^2.9.0",
|
||||||
"eslint-plugin-react": "^4.2.0",
|
"eslint-config-airbnb": "^9.0.1",
|
||||||
"react-transform-catch-errors": "^1.0.0",
|
"eslint-plugin-import": "^1.8.0",
|
||||||
"react-transform-hmr": "^1.0.0",
|
"eslint-plugin-jsx-a11y": "^1.2.0",
|
||||||
"redbox-react": "^1.0.1"
|
"eslint-plugin-react": "^5.1.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
|
path: /404.html
|
||||||
layout: page
|
layout: page
|
||||||
---
|
---
|
||||||
|
|
||||||
# NOT FOUND
|
# NOT FOUND
|
||||||
|
|
||||||
You just hit a route that doesn't exist... the sadness.
|
You just hit a route that doesn't exist... the sadness.
|
||||||
|
|||||||
@@ -1,9 +1,10 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { Link } from 'react-router'
|
import { Link } from 'react-router'
|
||||||
import { link } from 'gatsby-helpers'
|
import { prefixLink } from 'gatsby-helpers'
|
||||||
import { config } from 'config'
|
import { config } from 'config'
|
||||||
|
|
||||||
import '../static/css/reset.css'
|
import '../static/css/reset.css'
|
||||||
|
import '../static/css/base.css'
|
||||||
import '../static/css/typography.css'
|
import '../static/css/typography.css'
|
||||||
|
|
||||||
class Template extends React.Component {
|
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 React from 'react'
|
||||||
import { Link } from 'react-router'
|
import { Link } from 'react-router'
|
||||||
import sortBy from 'lodash/sortBy'
|
import sortBy from 'lodash/sortBy'
|
||||||
import moment from 'moment';
|
import moment from 'moment'
|
||||||
import DocumentTitle from 'react-document-title'
|
import DocumentTitle from 'react-document-title'
|
||||||
import { link } from 'gatsby-helpers'
|
import { prefixLink } from 'gatsby-helpers'
|
||||||
import access from 'safe-access'
|
import access from 'safe-access'
|
||||||
import { config } from 'config'
|
import { config } from 'config'
|
||||||
|
|
||||||
import BlogPost from '../components/BlogPost'
|
import BlogPost from '../components/BlogPost'
|
||||||
import SidebarLeft from '../components/SidebarLeft'
|
import SidebarLeft from '../components/SidebarLeft'
|
||||||
import BlogContent from '../components/BlogContent'
|
|
||||||
|
|
||||||
class BlogIndex extends React.Component {
|
class BlogIndex extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
@@ -30,9 +30,9 @@ class BlogIndex extends React.Component {
|
|||||||
</time>
|
</time>
|
||||||
<span style={ { padding: '5px'} }></span>
|
<span style={ { padding: '5px'} }></span>
|
||||||
<span className='blog-category'>{ category }</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} } />
|
<p dangerouslySetInnerHTML={ { __html: description} } />
|
||||||
<Link className='readmore' to={ link(page.path) }> Read
|
<Link className='readmore' to={ prefixLink(page.path) }> Read
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</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: 16px;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
font-family: "PT Sans", Georgia, Times, serif;
|
font-family: "Roboto", Arial, sans-serif;
|
||||||
color: #222;
|
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
|
/* Headings
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
font-family: "Raleway", Helvetica, Arial, sans-serif;
|
|
||||||
color: #222;
|
|
||||||
}
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
@@ -76,168 +243,7 @@ h6 {
|
|||||||
margin-bottom: 13px;
|
margin-bottom: 13px;
|
||||||
margin-bottom: 0.8125rem;
|
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) {
|
@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 {
|
h1 {
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
@@ -298,74 +304,63 @@ code {
|
|||||||
margin-bottom: 15.5px;
|
margin-bottom: 15.5px;
|
||||||
margin-bottom: 0.861111111111111rem;
|
margin-bottom: 0.861111111111111rem;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
h1 + h2 {
|
||||||
|
margin-top: 26px;
|
||||||
|
margin-top: 1.625rem;
|
||||||
|
}
|
||||||
|
@media screen and (min-width:40em) {
|
||||||
h1 + h2 {
|
h1 + h2 {
|
||||||
margin-top: 31px;
|
margin-top: 31px;
|
||||||
margin-top: 1.722222222222222rem;
|
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 {
|
h2 + h3, h3 + h4, h4 + h5 {
|
||||||
margin-top: 15.5px;
|
margin-top: 15.5px;
|
||||||
margin-top: 0.861111111111111rem;
|
margin-top: 0.861111111111111rem;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
h5 + h6 {
|
||||||
|
margin-top: -13px;
|
||||||
|
margin-top: -0.8125rem;
|
||||||
|
}
|
||||||
|
@media screen and (min-width:40em) {
|
||||||
h5 + h6 {
|
h5 + h6 {
|
||||||
margin-top: -15.5px;
|
margin-top: -15.5px;
|
||||||
margin-top: -0.861111111111111rem;
|
margin-top: -0.861111111111111rem;
|
||||||
}
|
}
|
||||||
figcaption {
|
}
|
||||||
line-height: 31px;
|
h6 {
|
||||||
line-height: 1.722222222222222rem;
|
font-style: italic;
|
||||||
margin-bottom: 0;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
figure blockquote {
|
hgroup {
|
||||||
padding: 31px 0px;
|
display: block;
|
||||||
padding: 1.722222222222222rem 0rem;
|
}
|
||||||
text-align: center;
|
hr {
|
||||||
}
|
margin-top: 52px;
|
||||||
figure blockquote p {
|
margin-top: 3.25rem;
|
||||||
font-size: 27px;
|
margin-bottom: 52px;
|
||||||
font-size: 1.6875rem;
|
margin-bottom: 3.25rem;
|
||||||
margin-top: 0;
|
box-sizing: content-box;
|
||||||
line-height: 46.5px;
|
border: 0;
|
||||||
line-height: 2.583333333333334rem;
|
color: #222;
|
||||||
}
|
display: block;
|
||||||
figure.floatLeft, figure.floatRight {
|
height: 26px;
|
||||||
max-width: 315px;
|
height: 1.625rem;
|
||||||
max-width: 17.5rem;
|
margin-right: auto;
|
||||||
padding: 0px 31px;
|
margin-left: auto;
|
||||||
padding: 0rem 1.722222222222222rem;
|
background-size: 100% 26px;
|
||||||
}
|
background-size: 100% 1.625rem;
|
||||||
figure.floatLeft blockquote, figure.floatRight blockquote {
|
background-image: linear-gradient(to bottom, transparent 1px, transparent 11px, #222 11px, #222 15px, transparent 15px, transparent 26px);
|
||||||
text-align: left;
|
width: 100px;
|
||||||
padding: 0px;
|
}
|
||||||
padding: 0rem;
|
@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;
|
|
||||||
}
|
|
||||||
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 {
|
hr {
|
||||||
margin-top: 62px;
|
margin-top: 62px;
|
||||||
margin-top: 3.444444444444445rem;
|
margin-top: 3.444444444444445rem;
|
||||||
@@ -373,12 +368,147 @@ code {
|
|||||||
margin-bottom: 3.444444444444445rem;
|
margin-bottom: 3.444444444444445rem;
|
||||||
height: 31px;
|
height: 31px;
|
||||||
height: 1.722222222222222rem;
|
height: 1.722222222222222rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width:40em) {
|
||||||
|
hr {
|
||||||
background-size: 100% 31px;
|
background-size: 100% 31px;
|
||||||
background-size: 100% 1.722222222222222rem;
|
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);
|
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;
|
img {
|
||||||
padding: 1.722222222222222rem;
|
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() {
|
render() {
|
||||||
const {route} = this.props
|
const {route} = this.props
|
||||||
const post = route.page.data
|
const post = route.page.data
|
||||||
|
|
||||||
let layout, template
|
let layout, template
|
||||||
|
|
||||||
layout = post.layout
|
layout = post.layout
|
||||||
|
|
||||||
if (layout != 'page') {
|
if (layout != 'page') {
|
||||||
|
|||||||
Reference in New Issue
Block a user