feat: Add Share Platform

source/css/_partial/reward.styl

@@ -30,6 +30,18 @@
   padding 0px 20px 20px
   background-color lighten(water,30%)
   display none
+  &.ready {
+    visibility: hidden;
+    display: block;
+    transform: translate(-50%, -100%);
+    transition: .3s;
+  }
+
+  &.in {
+    visibility: visible;
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
   .close
     height 28px
     line-height 28px

source/css/_partial/share.styl

@@ -0,0 +1,145 @@
+.share-wrap {
+  min-height: 20px;
+	display: none;
+	position: absolute;
+	right: 0;
+	bottom: -32px;
+	width: 250px;
+}
+
+.share-btn {
+  float: right;
+  position: relative;
+}
+.share-outer {
+			display inline-flex;
+      border: none;
+      text-shadow: none;
+			text-decoration: none;
+			width auto;
+    	color: main-color;
+			height: 28px;
+			line-height: 26px;
+			i{
+				font-size: 18px;
+				margin-right 5px;
+			}
+			&:hover {
+      transform: none;
+			cursor: pointer;
+    	}
+    }
+
+.share-icons {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-wrap: wrap;
+
+  a {
+    border-radius: 50%;
+    display: inline-block;
+    vertical-align: middle;
+    zoom: 1;
+    margin: 3px;
+    transition: 0.3s;
+    text-align: center;
+    color: main-color;
+    width: 28px;
+    height: 28px;
+    line-height: 26px;
+		font-size: 13px;
+    i	{
+			font-size: 24px
+    }
+		&.weibo	{
+			color weibo-color
+		}
+		&.weixin {
+			color wechat-color
+		}
+		&.qq {
+			color qq-color
+			}
+		&.douban {
+			color douban-color
+			}
+		&.twitter {
+			color twitter-color
+			}
+		&.facebook {
+			color facebook-color
+			}
+		&.google {
+			color google-color
+			}
+    &:active {
+      color: ocean;
+    }
+
+    &:hover {
+      transform: scale(1.2);
+    }
+  }
+}
+
+.wx-share-modal {
+  position: fixed;
+  top: 24%;
+  left: 50%;
+  z-index: 9999;
+  padding: 20px;
+  text-align: center;
+  color: #727272;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  opacity: 0;
+  transform: translate(-50%, -200%);
+
+  p {
+    margin-bottom: 10px;
+  }
+
+  &.ready {
+    visibility: 0;
+    display: block;
+    transform: translate(-50%, -100%);
+    transition: .3s;
+  }
+
+  &.in {
+		display: block;
+    visibility: visible;
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+
+  .modal-close {
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    color: rgba(0, 0, 0, .2);
+    font-size: 16px;
+    line-height: 20px;
+		i{
+			font-size: 24px;
+		}
+
+    &:hover,
+    &:active {
+      color: rgba(0, 0, 0, .4);
+    }
+  }
+}
+
+#share-mask{
+	position: fixed;
+	width: 100%;
+	height: 100%;
+	left: 0;
+	top: 0;
+	background-color rgba(0,0,0,.6);
+	z-index: 999;
+	display: none;
+	}

source/css/_variables.styl

@@ -28,6 +28,10 @@ sand-gray     = #bbb
 red           = #ea434a
 
 // Share Colors
+weibo-color      = #d81e06
+wechat-color     = #51c332
+qq-color         = #4cafe9
+douban-color     = #05b711
 twitter-color    = #00aced
 facebook-color   = #3b5998
 pinterest-color  = #cb2027

source/css/style.styl

@@ -68,6 +68,7 @@ button
 @import "_partial/gitalk"
 @import "_partial/apple"
 @import "_partial/reward"
+@import "_partial/share"
 
 if sidebar
   @import "_partial/sidebar"