Update

README.md

@@ -10,3 +10,25 @@ Install this starter (assuming Gatsby is installed) by running from your CLI:
 
 ![](http://i.imgur.com/422y5GV.png)
 
+## License
+The MIT license.
+
+Copyright (c) 2016 Alexandr Shelepenok [ashk.io](http://ashk.io)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

app.js

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

components/BlogContent/index.jsx

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

components/BlogNav/index.jsx

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

components/BlogPage/index.jsx

@@ -11,7 +11,7 @@ import './style.sss';
 
 class BlogPage extends React.Component {
     render() {
-    const { route } = this.props
+        const {route} = this.props
         const post = route.page.data
 
         return (
@@ -22,8 +22,8 @@ class BlogPage extends React.Component {
                   <div className='main-inner'>
                     <div className='blog-page'>
                       <div className='text'>
-                    <h1>{post.title}</h1>
+                        <h1>{ post.title }</h1>
-                    <div dangerouslySetInnerHTML={{__html: post.body}}/>
+                        <div dangerouslySetInnerHTML={ {    __html: post.body} } />
                       </div>
                     </div>
                   </div>

components/BlogPost/index.jsx

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

components/BlogSocial/index.jsx

@@ -19,16 +19,28 @@ class BlogSocial extends React.Component {
         return (
             <div className='blog-social'>
               <ul>
-          <li><a href={twitter}><i className='fa fa-twitter'></i></a></li>
+                <li>
-          <li><a href={github}><i className='fa fa-github-alt'></i></a></li>
+                  <a href={ twitter }><i className='fa fa-twitter'></i></a>
-          <li><a href={vk}><i className='fa fa-vk'></i></a></li>
+                </li>
+                <li>
+                  <a href={ github }><i className='fa fa-github-alt'></i></a>
+                </li>
+                <li>
+                  <a href={ vk }><i className='fa fa-vk'></i></a>
+                </li>
               </ul>
               <ul>
-          <li><a href={email}><i className='fa fa-envelope-o'></i></a></li>
+                <li>
-          <li><a href={telegram}><i className='fa fa-paper-plane'></i></a></li>
+                  <a href={ email }><i className='fa fa-envelope-o'></i></a>
+                </li>
+                <li>
+                  <a href={ telegram }><i className='fa fa-paper-plane'></i></a>
+                </li>
               </ul>
               <ul>
-          <li><a href={rss}><i className='fa fa-rss'></i></a></li>
+                <li>
+                  <a href={ rss }><i className='fa fa-rss'></i></a>
+                </li>
               </ul>
             </div>
             );

components/ReadNext/index.jsx

@@ -7,46 +7,28 @@ import './style.sss'
 
 class ReadNext extends React.Component {
     render() {
-    const { pages, post } = this.props
+        const {pages, post} = this.props
-    const { readNext } = post
+        const {readNext} = post
 
         let nextPost
         if (readNext) {
-      nextPost = find(pages, (page) =>
+            nextPost = find(pages, (page) => includes(page.path, readNext)
-        includes(page.path, readNext)
             )
         }
         if (!nextPost) {
             return React.createElement('noscript', null)
         } else {
-      nextPost = find(pages, (page) =>
+            nextPost = find(pages, (page) => includes(page.path, readNext.slice(1, -1))
-        includes(page.path, readNext.slice(1, -1))
             )
             const description = nextPost.data.description
 
             return (
                 <div>
-          <h6
+                  <h6 style={ {    fontSize: '16px',    margin: '20px 0 0'} }>READ THIS NEXT:</h6>
-            style={{
+                  <h3 style={ {    margin: '5px 0 0'} }><Link to={ nextPost.path } query={ {    readNext: true} } > { nextPost.data.title } </Link></h3>
-              fontSize: '16px',
+                  <p className='description'>
-              margin: '20px 0 0'
+                    { description }
-            }}
+                  </p>
-          >
-            READ THIS NEXT:
-          </h6>
-          <h3
-            style={{
-              margin: '5px 0 0'
-            }}
-          >
-            <Link
-              to={nextPost.path}
-              query={{readNext: true}}
-            >
-              {nextPost.data.title}
-            </Link>
-          </h3>
-          <p className='description'>{description}</p>
                 </div>
                 );
         }

components/SidebarLeft/index.jsx

@@ -8,41 +8,17 @@ import './style.sss'
 
 class SidebarLeft extends React.Component {
     render() {
-    const { location, children } = this.props
+        const {location, children} = this.props
         let header
 
         header = (
             <header>
-        <Link
+              <Link style={ {    textDecoration: 'none',    borderBottom: 'none',    outline: 'none'} } to={ link('/') }>
-          style={{
+              <img src='./images/photo9.jpg' width='75' height='75' />
-            textDecoration: 'none',
-            borderBottom: 'none',
-            outline: 'none'
-          }}
-          to={link('/')}
-        >
-          <img
-            src='./images/photo9.jpg'
-            width='75'
-            height='75'
-          />
               </Link>
-
+              <h1><Link style={ {    textDecoration: 'none',    borderBottom: 'none',    color: 'inherit'} } to={ link('/') } > { config.siteTitle } </Link></h1>
-        <h1>
-          <Link
-            style={{
-              textDecoration: 'none',
-              borderBottom: 'none',
-              color: 'inherit'
-            }}
-            to={link('/')}
-          >
-            {config.siteTitle}
-          </Link>
-        </h1>
-
               <p>
-          {config.siteDescr}
+                { config.siteDescr }
               </p>
             </header>
         );
@@ -52,7 +28,7 @@ class SidebarLeft extends React.Component {
               <div className='sidebar-inner'>
                 <div className='blog-details'>
                   <header>
-              {header}
+                    { header }
                   </header>
                 </div>
                 <div className='blog-options'>

gatsby.config.js

@@ -46,7 +46,9 @@ module.exports = function(config, env) {
 
     config.plugin('extract-css',
         ExtractTextPlugin,
-                  ["styles.css", { allChunks: true }]);
+        ["styles.css", {
+            allChunks: true
+        }]);
 
     return config
 };

html.js

@@ -3,12 +3,12 @@ import DocumentTitle from 'react-document-title'
 import { link } from 'gatsby-helpers'
 
 module.exports = React.createClass({
-  propTypes () {
+    propTypes() {
         return {
             title: React.PropTypes.string,
         }
     },
-  render () {
+    render() {
         let title = DocumentTitle.rewind()
         if (this.props.title) {
             title = this.props.title
@@ -16,26 +16,25 @@ module.exports = React.createClass({
 
         let cssLink
         if (process.env.NODE_ENV === 'production') {
-      cssLink = <link rel="stylesheet" href={link('/styles.css')} />
+            cssLink = <link rel="stylesheet" href={ link('/styles.css') } />
         }
 
         return (
             <html lang="en">
             <head>
-          <meta charSet="utf-8"/>
+              <meta charSet="utf-8" />
-          <meta httpEquiv="X-UA-Compatible" content="IE=edge"/>
+              <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
-          <meta
+              <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0" />
-            name="viewport"
+              <title>
-            content="width=device-width, initial-scale=1.0 maximum-scale=1.0"
+                { title }
-          />
+              </title>
-          <title>{title}</title>
+              <link rel="shortcut icon" href={ this.props.favicon } />
-          <link rel="shortcut icon" href={this.props.favicon}/>
               <link href='https://fonts.googleapis.com/css?family=Roboto:700|Raleway:600,700|PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css' />
-          {cssLink}
+              { cssLink }
             </head>
             <body>
-          <div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />
+              <div id="react-mount" dangerouslySetInnerHTML={ {    __html: this.props.body} } />
-          <script src={link('/bundle.js')}/>
+              <script src={ link('/bundle.js') } />
             </body>
             </html>
         )

pages/_template.jsx

@@ -8,11 +8,11 @@ import '../static/css/typography.css'
 
 class Template extends React.Component {
     render() {
-    const { location, children } = this.props
+        const {location, children} = this.props
 
         return (
             <div className='wrapper'>
-        {children}
+              { children }
             </div>
             );
     }

pages/index.jsx

@@ -14,8 +14,7 @@ class BlogIndex extends React.Component {
     render() {
         const pageLinks = []
         // Sort pages.
-    const sortedPages = sortBy(this.props.route.pages, (page) =>
+        const sortedPages = sortBy(this.props.route.pages, (page) => access(page, 'data.date')
-      access(page, 'data.date')
         ).reverse()
         sortedPages.forEach((page) => {
             if (access(page, 'file.ext') === 'md' && access(page, 'data.layout') === 'post') {
@@ -26,30 +25,14 @@ class BlogIndex extends React.Component {
 
                 pageLinks.push(
                     <div className='blog-post'>
-            <time dateTime={moment(datePublished).format('MMMM D, YYYY')}>{moment(datePublished).format('MMMM YYYY')}</time>
+                      <time dateTime={ moment(datePublished).format('MMMM D, YYYY') }>
-            <span
+                        { moment(datePublished).format('MMMM YYYY') }
-              style={{
+                      </time>
-                padding: '5px'
+                      <span style={ {    padding: '5px'} }></span>
-              }}
+                      <span className='blog-category'>{ category }</span>
-            >
+                      <h2><Link style={ {    borderBottom: 'none',} } to={ link(page.path) } > { title } </Link></h2>
-            </span>
+                      <p dangerouslySetInnerHTML={ {    __html: description} } />
-            <span className='blog-category'>{category}</span>
+                      <Link className='readmore' to={ link(page.path) }> Read
-            <h2>
-              <Link
-                style={{
-                  borderBottom: 'none',
-                }} 
-                to={link(page.path)}
-              >
-                {title}
-              </Link>
-            </h2>
-            <p dangerouslySetInnerHTML={{__html: description}}/>
-            <Link
-              className='readmore'
-              to={link(page.path)}
-            >
-              Read
                       </Link>
                     </div>
                 )
@@ -57,13 +40,13 @@ class BlogIndex extends React.Component {
         })
 
         return (
-      <DocumentTitle title={config.siteTitle}>
+            <DocumentTitle title={ config.siteTitle }>
               <div>
                 <SidebarLeft {...this.props}/>
                 <div className='content'>
                   <div className='main'>
                     <div className='main-inner'>
-                {pageLinks}
+                      { pageLinks }
                     </div>
                   </div>
                 </div>

static/css/highlight.css

@@ -17,8 +17,6 @@ p > code, span > code  {
 	overflow: auto;
 	padding: 0.25em 0.5em;
 }
-
-
 pre code {
 	display: block;
 	border-radius: 3px;
@@ -27,89 +25,57 @@ pre code {
 	color: #333;
 	background: #f8f8f8;
 }
-
+.hljs-comment, .hljs-quote {
-.hljs-comment,
-.hljs-quote {
 	color: #998;
 	font-style: italic;
 }
-
+.hljs-keyword, .hljs-selector-tag, .hljs-subst {
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-subst {
 	color: #333;
 	font-weight: bold;
 }
-
+.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr {
-.hljs-number,
-.hljs-literal,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-tag .hljs-attr {
 	color: #008080;
 }
-
+.hljs-string, .hljs-doctag {
-.hljs-string,
-.hljs-doctag {
 	color: #d14;
 }
-
+.hljs-title, .hljs-section, .hljs-selector-id {
-.hljs-title,
-.hljs-section,
-.hljs-selector-id {
 	color: #900;
 	font-weight: bold;
 }
-
 .hljs-subst {
 	font-weight: normal;
 }
-
+.hljs-type, .hljs-class .hljs-title {
-.hljs-type,
-.hljs-class .hljs-title {
 	color: #458;
 	font-weight: bold;
 }
-
+.hljs-tag, .hljs-name, .hljs-attribute {
-.hljs-tag,
-.hljs-name,
-.hljs-attribute {
 	color: #000080;
 	font-weight: normal;
 }
-
+.hljs-regexp, .hljs-link {
-.hljs-regexp,
-.hljs-link {
 	color: #009926;
 }
-
+.hljs-symbol, .hljs-bullet {
-.hljs-symbol,
-.hljs-bullet {
 	color: #990073;
 }
-
+.hljs-built_in, .hljs-builtin-name {
-.hljs-built_in,
-.hljs-builtin-name {
 	color: #0086b3;
 }
-
 .hljs-meta {
 	color: #999;
 	font-weight: bold;
 }
-
 .hljs-deletion {
 	background: #fdd;
 }
-
 .hljs-addition {
 	background: #dfd;
 }
-
 .hljs-emphasis {
 	font-style: italic;
 }
-
 .hljs-strong {
 	font-weight: bold;
 }

static/css/reset.css

@@ -2,65 +2,29 @@ html {
 	-ms-text-size-adjust: 100%;
 	-webkit-text-size-adjust: 100%;
 }
-
 body {
 	margin: 0;
 }
 
 /* HTML5 display definitions
 	 ========================================================================== */
-article,
+article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary, cite, code, small {
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-nav,
-section,
-summary,
-cite,
-code,
-small {
 	display: block;
 }
-
+body, article, section, footer, header, div, input, nav, article ol, article ul, blockquote, figure {
-body,
-article,
-section,
-footer,
-header,
-div,
-input,
-nav,
-article ol,
-article ul,
-blockquote,
-figure {
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 }
-
+audio, canvas, progress, video {
-audio,
+	display: inline-block;	/* 1 */
-canvas,
+	vertical-align: baseline;	/* 2 */
-progress,
-video {
-  display: inline-block;
-  /* 1 */
-  vertical-align: baseline;
-  /* 2 */
 }
-
 audio:not([controls]) {
 	display: none;
 	height: 0;
 }
-
+[hidden], template {
-[hidden],
-template {
 	display: none;
 }
 
@@ -69,9 +33,7 @@ template {
 a {
 	background: transparent;
 }
-
+a:active, a:hover {
-a:active,
-a:hover {
 	outline: 0;
 }
 
@@ -80,47 +42,35 @@ a:hover {
 abbr {
 	letter-spacing: 0.1em;
 }
-
 abbr[title] {
 	border-bottom: 1px dotted;
 }
-
+b, strong {
-b,
-strong {
 	font-weight: bold;
 }
-
 dfn {
 	font-style: italic;
 }
-
 mark {
 	background: #ff0;
 	color: #000;
 }
-
 small {
 	font-size: 70%;
 }
-
+sub, sup {
-sub,
-sup {
 	font-size: 75%;
 	line-height: 0;
 	position: relative;
 	vertical-align: baseline;
 }
-
 sup {
 	top: -0.5em;
 }
-
 sub {
 	bottom: -0.25em;
 }
-
+em, i {
-em,
-i {
 	line-height: 0;
 	position: relative;
 	vertical-align: baseline;
@@ -131,7 +81,6 @@ i {
 img {
 	border: 0;
 }
-
 svg:not(:root) {
 	overflow: hidden;
 }
@@ -143,15 +92,10 @@ hr {
 	box-sizing: content-box;
 	height: 0;
 }
-
 pre {
 	overflow: auto;
 }
-
+code, kbd, pre, samp {
-code,
-kbd,
-pre,
-samp {
 	font-family: monospace, monospace;
 }
 
@@ -161,9 +105,7 @@ table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }
-
+td, th {
-td,
-th {
 	padding: 0;
 }
 

static/css/typography.css

@@ -1,5 +1,4 @@
-/*! Gatsby Typography. Based on Gutengerg <- https://github.com/matejlatin/Gutenberg/ -> */
+/*! Gatsby Lumen Typography. Based on Gutengerg <- https://github.com/matejlatin/Gutenberg/ -> */
-
 html, body {
 	font-size: 16px;
 	font-size: 100%;
@@ -9,6 +8,7 @@ html, body {
 
 /* Paragraph
 	 ========================================================================== */
+
 /* Headings
 	 ========================================================================== */
 
@@ -16,7 +16,6 @@ h1, h2, h3, h4, h5, h6 {
 	font-family: "Raleway", Helvetica, Arial, sans-serif;
 	color: #222;
 }
-
 h1 {
 	font-size: 40px;
 	font-size: 2.5rem;
@@ -27,7 +26,6 @@ h1 {
 	margin-bottom: 26px;
 	margin-bottom: 1.625rem;
 }
-
 h2 {
 	font-size: 27px;
 	font-size: 1.6875rem;
@@ -38,7 +36,6 @@ h2 {
 	margin-bottom: 13px;
 	margin-bottom: 0.8125rem;
 }
-
 h3 {
 	font-size: 22px;
 	font-size: 1.375rem;
@@ -49,7 +46,6 @@ h3 {
 	margin-bottom: 13px;
 	margin-bottom: 0.8125rem;
 }
-
 h4 {
 	font-size: 19.2px;
 	font-size: 1.2rem;
@@ -60,7 +56,6 @@ h4 {
 	margin-bottom: 13px;
 	margin-bottom: 0.8125rem;
 }
-
 h5 {
 	font-size: 16px;
 	font-size: 1rem;
@@ -71,7 +66,6 @@ h5 {
 	margin-bottom: 13px;
 	margin-bottom: 0.8125rem;
 }
-
 h6 {
 	font-size: 16px;
 	font-size: 1rem;
@@ -82,24 +76,18 @@ h6 {
 	margin-bottom: 13px;
 	margin-bottom: 0.8125rem;
 }
-
 h1 + h2 {
 	margin-top: 26px;
 	margin-top: 1.625rem;
 }
-
+h2 + h3, h3 + h4, h4 + h5 {
-h2 + h3,
-h3 + h4,
-h4 + h5 {
 	margin-top: 13px;
 	margin-top: 0.8125rem;
 }
-
 h5 + h6 {
 	margin-top: -13px;
 	margin-top: -0.8125rem;
 }
-
 h6 {
 	font-style: italic;
 	font-weight: normal;
@@ -107,18 +95,15 @@ h6 {
 
 /* Links
 	 ========================================================================== */
-
 a {
 	color: #5d93ff;
 	text-decoration: none;
 	transition: all .3s ease;
 }
-
 a:hover {
 	border-bottom: 1px solid;
 	text-decoration: none;
 }
-
 a:visited {
 	color: #222;
 }
@@ -130,7 +115,6 @@ a:active {
 	color: #222;
 	border-bottom: 1px solid;
 }
-
 h2 a {
 	color: #222;
 }
@@ -146,17 +130,13 @@ figcaption {
 	margin-bottom: 0;
 	text-align: center;
 }
-
 blockquote {
 	font-style: italic;
 	padding-left: 1.4375rem;
 }
-
 cite {
 	font-style: normal;
 }
-
-
 figure blockquote {
 	padding: 31px 0px;
 	padding: 1.722222222222222rem 0rem;
@@ -169,52 +149,41 @@ figure blockquote p {
 	line-height: 46.5px;
 	line-height: 2.583333333333334rem;
 }
-
+figure.floatLeft, figure.floatRight {
-figure.floatLeft,
-figure.floatRight {
 	max-width: 315px;
 	max-width: 17.5rem;
 	padding: 0px 31px;
 	padding: 0rem 1.722222222222222rem;
 }
-figure.floatLeft blockquote,
+figure.floatLeft blockquote, figure.floatRight blockquote {
-figure.floatRight blockquote {
 	text-align: left;
 	padding: 0px;
 	padding: 0rem;
 }
-figure.floatLeft blockquote p,
+figure.floatLeft blockquote p, figure.floatRight blockquote p {
-figure.floatRight blockquote p {
 	font-size: 19.2px;
 	font-size: 1.2rem;
 	line-height: 31px;
 	line-height: 1.722222222222222rem;
 }
-
 figcaption {
 	line-height: 31px;
 	line-height: 1.722222222222222rem;
 	margin-bottom: 0;
 }
-
 .floatLeft {
 	float: left;
 }
-
 .floatCenter {
 	margin-left: auto;
 	margin-right: auto;
 }
-
 .floatRight {
 	float: right;
 }
-
+ul li, ol li {
-ul li,
-ol li {
 	margin-bottom: 0;
 }
-
 hr {
 	margin-top: 52px;
 	margin-top: 3.25rem;
@@ -232,51 +201,43 @@ hr {
 	background-image: linear-gradient(to bottom, transparent 1px, transparent 11px, #222 11px, #222 15px, transparent 15px, transparent 26px);
 	width: 100px;
 }
-
 small {
 	line-height: 13px;
 	line-height: 0.8125rem;
 }
-
 code {
 	padding: 26px;
 	padding: 1.625rem;
 }
-
 .alignLeft {
 	text-align: left;
 }
-
 .alignCenter {
 	text-align: center;
 }
-
 .alignRight {
 	text-align: right;
 }
 
 /* Put your styles below this line
 	 ========================================================================== */
-@media screen and (min-width: 40em) {
+@media screen and (min-width:40em) {
+
 	/* Mixins
 		 ========================================================================== */
-  body,
+	body, html {
-  html {
 		margin: 0;
 		width: 100%;
 		max-width: none;
 	}
-
 	html {
 		font-size: 18px;
 		font-size: 1.125rem;
 	}
-
 	article {
 		max-width: 945px;
 		max-width: 52.5rem;
 	}
-
 	h1 {
 		font-size: 40px;
 		font-size: 2.5rem;
@@ -287,7 +248,6 @@ code {
 		margin-bottom: 31px;
 		margin-bottom: 1.722222222222222rem;
 	}
-
 	h2 {
 		font-size: 27px;
 		font-size: 1.6875rem;
@@ -298,7 +258,6 @@ code {
 		margin-bottom: 15.5px;
 		margin-bottom: 0.861111111111111rem;
 	}
-
 	h3 {
 		font-size: 22px;
 		font-size: 1.375rem;
@@ -309,7 +268,6 @@ code {
 		margin-bottom: 15.5px;
 		margin-bottom: 0.861111111111111rem;
 	}
-
 	h4 {
 		font-size: 19.2px;
 		font-size: 1.2rem;
@@ -320,7 +278,6 @@ code {
 		margin-bottom: 15.5px;
 		margin-bottom: 0.861111111111111rem;
 	}
-
 	h5 {
 		font-size: 16px;
 		font-size: 1rem;
@@ -331,7 +288,6 @@ code {
 		margin-bottom: 15.5px;
 		margin-bottom: 0.861111111111111rem;
 	}
-
 	h6 {
 		font-size: 16px;
 		font-size: 1rem;
@@ -342,31 +298,23 @@ code {
 		margin-bottom: 15.5px;
 		margin-bottom: 0.861111111111111rem;
 	}
-
 	h1 + h2 {
 		margin-top: 31px;
 		margin-top: 1.722222222222222rem;
 	}
-
+	h2 + h3, h3 + h4, h4 + h5 {
-  h2 + h3,
-  h3 + h4,
-  h4 + h5 {
 		margin-top: 15.5px;
 		margin-top: 0.861111111111111rem;
 	}
-
 	h5 + h6 {
 		margin-top: -15.5px;
 		margin-top: -0.861111111111111rem;
 	}
-
 	figcaption {
 		line-height: 31px;
 		line-height: 1.722222222222222rem;
 		margin-bottom: 0;
 	}
-
-
 	figure blockquote {
 		padding: 31px 0px;
 		padding: 1.722222222222222rem 0rem;
@@ -379,56 +327,45 @@ code {
 		line-height: 46.5px;
 		line-height: 2.583333333333334rem;
 	}
-
+	figure.floatLeft, figure.floatRight {
-  figure.floatLeft,
-  figure.floatRight {
 		max-width: 315px;
 		max-width: 17.5rem;
 		padding: 0px 31px;
 		padding: 0rem 1.722222222222222rem;
 	}
-  figure.floatLeft blockquote,
+	figure.floatLeft blockquote, figure.floatRight blockquote {
-  figure.floatRight blockquote {
 		text-align: left;
 		padding: 0px;
 		padding: 0rem;
 	}
-  figure.floatLeft blockquote p,
+	figure.floatLeft blockquote p, figure.floatRight blockquote p {
-  figure.floatRight blockquote p {
 		font-size: 19.2px;
 		font-size: 1.2rem;
 		line-height: 31px;
 		line-height: 1.722222222222222rem;
 	}
-
 	figcaption {
 		line-height: 31px;
 		line-height: 1.722222222222222rem;
 		margin-bottom: 0;
 	}
-
 	.floatLeft {
 		float: left;
 	}
-
 	.floatCenter {
 		margin-left: auto;
 		margin-right: auto;
 	}
-
 	.floatRight {
 		float: right;
 	}
-
 	blockquote {
 		padding-left: 2rem;
 	}
-
 	small {
 		line-height: 15.5px;
 		line-height: 0.861111111111111rem;
 	}
-
 	hr {
 		margin-top: 62px;
 		margin-top: 3.444444444444445rem;
@@ -440,10 +377,8 @@ code {
 		background-size: 100% 1.722222222222222rem;
 		background-image: linear-gradient(to bottom, transparent 1px, transparent 13.5px, #222 13.5px, #222 17.5px, transparent 17.5px, transparent 31px);
 	}
-
 	code {
 		padding: 31px;
 		padding: 1.722222222222222rem;
 	}
-
 }

wrappers/md.jsx

@@ -6,7 +6,7 @@ import { config } from 'config'
 
 class MarkdownWrapper extends React.Component {
     render() {
-    const { route } = this.props
+        const {route} = this.props
         const post = route.page.data
 
         let layout, template
@@ -19,9 +19,9 @@ class MarkdownWrapper extends React.Component {
         }
 
         return (
-      <DocumentTitle title={`${post.title} - ${config.siteTitle}`}>
+            <DocumentTitle title={ `${post.title} - ${config.siteTitle}` }>
               <div>
-          {template}
+                { template }
               </div>
             </DocumentTitle>
             );