Init

components/BlogSocial/index.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { RouteHandler, Link } from 'react-router'
+import { link } from 'gatsby-helpers'
+import { config } from 'config'
+
+import './style.sss'
+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></li>
+          <li><a href={github}><i className='fa fa-github-alt'></i></a></li>
+          <li><a href={vk}><i className='fa fa-vk'></i></a></li>
+        </ul>
+        <ul>
+          <li><a href={email}><i className='fa fa-envelope-o'></i></a></li>
+          <li><a href={telegram}><i className='fa fa-paper-plane'></i></a></li>
+        </ul>
+        <ul>
+          <li><a href={rss}><i className='fa fa-rss'></i></a></li>
+        </ul>
+      </div>
+    );
+  }
+}
+
+export default BlogSocial

components/BlogSocial/style.sss

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