refactor: Baidu Share

http://moxfive.xyz/2016/04/20/baidu-share-fontawesome/
MOxFIVE · Apr 20, 2016 · 9e9ab4d · 9e9ab4d
1 parent b25814d
commit 9e9ab4d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 42 deletions.
diff --git a/layout/_partial/post/share.ejs b/layout/_partial/post/share.ejs
@@ -2,13 +2,13 @@
 <div class="share">
     <% if (theme.share.baidu) { %>
         <div class="bdsharebuttonbox">
-            <li id="bds_twi"><a href="#" class="bds_twi" data-cmd="twi" title="分享到推特"></a></li>
-            <li id="bds_tsina"><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a></li>
-            <li id="bds_sqq"><a href="#" class="bds_sqq" data-cmd="sqq" title="分享给 QQ 好友"></a></li>
-            <li id="bds_copy"><a href="#" class="bds_copy" data-cmd="copy" title="复制网址"></a></li>
-            <li id="bds_mail"><a href="#" class="bds_mail" data-cmd="mail" title="通过邮件分享"></a></li>
-            <li id="bds_weixin"><a href="#" class="bds_weixin" data-cmd="weixin" title="生成文章二维码"></a></li>
-            <li id="bds_more"><a href="#" class="bds_more" data-cmd="more"></i></a></li>
+            <a href="#" class="fa fa-twitter bds_twi" data-cmd="twi" title="分享到推特"></a>
+            <a href="#" class="fa fa-weibo bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
+            <a href="#" class="fa fa-qq bds_sqq" data-cmd="sqq" title="分享给 QQ 好友"></a>
+            <a href="#" class="fa fa-files-o bds_copy" data-cmd="copy" title="复制网址"></a>
+            <a href="#" class="fa fa fa-envelope-o bds_mail" data-cmd="mail" title="通过邮件分享"></a>
+            <a href="#" class="fa fa-weixin bds_weixin" data-cmd="weixin" title="生成文章二维码"></a>
+            <a href="#" class="fa fa-share-alt bds_more" data-cmd="more"></i></a>
         </div>
         <script>
             window._bd_share_config={

diff --git a/source/css/_partial/share.styl b/source/css/_partial/share.styl
@@ -4,53 +4,37 @@ addthis-share = hexo-config("share.addthis")
 .share
     padding-left 40px
     margin 1em auto .5em
-    opacity .5
+    opacity i-opacity
     &:hover
         opacity 1
 
 if baidu-share
     .bdsharebuttonbox
-        font-family Arial
-        li
-            display inline-block
-            width 28px
-            height @width
-            margin-right 2px
-            font 20px FontAwesome
-            background #6f7170
+        a, .bds_more
+            width 30px
+            height @width !important
+            line-height @height
             text-align center
-            vertical-align middle
+            padding-left 0 !important
+            font-size .68*@width !important
+            text-decoration none
+            color white !important
             box-shadow 1px 1px 1px rgba(0,0,0, .1), 1px 1px 1px rgba(0,0,0, .3)
-            a, .bds_more
-                float none
-                margin 0
-                padding 0
-                font @font
-                background-image none
-                color white
-                line-height @width
-                &:hover
-                    opacity 1
             &:hover
-                opacity 1
                 transform scale(1.1)
-                a
-                    color white
+                color @color
 
         // http://share.baidu.com/help/webid
-        font-logo = bds_tsina f18a #db332f, 
-                    bds_sqq f1d6 #1cbcef,
-                    bds_copy f016 #8f8f8f,
-                    bds_mail f003 #6fc0e4,
-                    bds_weixin f1d7 #8cdc49,
-                    bds_more f1e0 #8cbcf5,
-                    bds_twi f099 #21abf4
-
+        font-logo = bds_tsina #db332f, 
+                    bds_sqq #1cbcef,
+                    bds_copy #8f8f8f,
+                    bds_mail #6fc0e4,
+                    bds_weixin #8cdc49,
+                    bds_more #8cbcf5,
+                    bds_twi #21abf4
         for i in font-logo
-            .{i[0]}:before
-                content '\' + i[1]
-            #{i[0]}
-                background i[2]
+            .{i[0]}
+                background i[1] !important
 
 if addthis-share
     .addthis_sharing_toolbox