Init

components/SidebarLeft/index.jsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { RouteHandler, Link } from 'react-router'
+import { link } from 'gatsby-helpers'
+import { config } from 'config'
+import BlogNav from '../BlogNav'
+import BlogSocial from '../BlogSocial'
+import './style.sss'
+
+class SidebarLeft extends React.Component {
+  render() {
+    const { location, children } = this.props
+    let header
+
+    header = (
+      <header>
+        <Link
+          style={{
+            textDecoration: 'none',
+            borderBottom: 'none',
+            outline: 'none'
+          }}
+          to={link('/')}
+        >
+          <img
+            src='./images/photo9.jpg'
+            width='75'
+            height='75'
+          />
+        </Link>
+
+        <h1>
+          <Link
+            style={{
+              textDecoration: 'none',
+              borderBottom: 'none',
+              color: 'inherit'
+            }}
+            to={link('/')}
+          >
+            {config.siteTitle}
+          </Link>
+        </h1>
+
+        <p>
+          {config.siteDescr}
+        </p>
+      </header>
+    );
+
+    return (
+      <div className='sidebar'>
+        <div className='sidebar-inner'>
+          <div className='blog-details'>
+            <header>
+              {header}
+            </header>
+          </div>
+          <div className='blog-options'>
+            <BlogNav {...this.props}/>
+            <footer>
+            <BlogSocial {...this.props}/>
+            <p className='copyright'>
+              &copy; All rights reserved.
+            </p>
+            </footer>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+SidebarLeft.propTypes = {
+  children: React.PropTypes.any,
+  location: React.PropTypes.object,
+}
+
+export default SidebarLeft

components/SidebarLeft/style.sss

@@ -0,0 +1,59 @@
+.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