From 01fe877ebba1810dde4ca08a83d0f88180620ba8 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sat, 29 Feb 2020 21:51:18 +0800
Subject: [PATCH] Optimize the tooltip position of sharing icons.

---
 _includes/post-sharing.html |  6 +++---
 assets/css/post.scss        | 24 ++++++++++++++++--------
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/_includes/post-sharing.html b/_includes/post-sharing.html
index 808e67d..24a0315 100644
--- a/_includes/post-sharing.html
+++ b/_includes/post-sharing.html
@@ -9,7 +9,7 @@
 
 <div class="share-wrapper">
   <span class="share-label ml-1 mr-1">{{ site.data.share.label }}</span>
-  <span class="share-icon">
+  <span class="share-icons">
     {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
     {% assign url = page.url | relative_url | prepend: site.url %}
 
@@ -17,11 +17,11 @@
       {% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
         <a href="{{ link }}" data-toggle="tooltip" data-placement="top"
           title="{{ share.type }}" target="_blank">
-          <i class="fa-fw {{ share.icon }} mr-1"></i>
+          <i class="fa-fw {{ share.icon }}"></i>
         </a>
     {% endfor %}
 
-    <i class="fa-fw fas fa-link mr-1 small" onclick="copyLink()"
+    <i class="fa-fw fas fa-link small" onclick="copyLink()"
         data-toggle="tooltip" data-placement="top" title="Copy link"></i>
 
   </span>
diff --git a/assets/css/post.scss b/assets/css/post.scss
index f412c9c..0992a82 100644
--- a/assets/css/post.scss
+++ b/assets/css/post.scss
@@ -216,16 +216,24 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
 .share-wrapper {
   vertical-align: middle;
   user-select: none;
-  .share-icon {
+  .share-icons {
     font-size: 1.2rem;
-    a:hover {
-      text-decoration: none;
-      >i {
-        @extend %btn-share-hovor;
+    a {
+      &:not(:last-child) {
+        margin-right: .25rem;
+      }
+      &:hover {
+        text-decoration: none;
+        >i {
+          @extend %btn-share-hovor;
+        }
       }
     }
-    i:hover {
-      @extend %btn-share-hovor;
+    >i {
+      padding-top: .35rem;
+      &:hover {
+        @extend %btn-share-hovor;
+      }
     }
     .fab {
       &.fa-twitter {
@@ -242,7 +250,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}";
       }
     }
 
-  } // .share-icon
+  } // .share-icons
 
   .fas.fa-link {
     @include btn-sharing-color(rgb(171, 171, 171));