From d549d35d6cee91f93e0427d9e75d7be8561d5157 Mon Sep 17 00:00:00 2001
From: xaoxuu <xaoxuu@gmail.com>
Date: Wed, 8 Apr 2020 23:54:14 +0800
Subject: [PATCH] share

---
 source/css/_layout/main.styl | 43 ++++++++++++++++++++++++++++--------
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/source/css/_layout/main.styl b/source/css/_layout/main.styl
index f14cfb7..7144dbd 100644
--- a/source/css/_layout/main.styl
+++ b/source/css/_layout/main.styl
@@ -242,7 +242,6 @@
               height: 1.2em
               width: 1.2em
               margin-right: 5px
-              transform: translateY(-1px)
             p
               margin: 0
               font-weight: normal
@@ -255,14 +254,31 @@
         .author
           img,i
             border-radius: 100%
+          img
+            transform: translateY(-1px)
+
+        @media screen and (max-width: $device-mobile)
+          .share
+            width: 100%
+            margin-top: $gap
+            background: $color-codeblock
 
         .share-body
+          position: relative
           display: flex
+          justify-content: center;
+          margin: 0
+          padding: 0 2px
+          border-radius: 2px
           a
             padding: 0
-            margin-right: 4px
+            margin: 0 1px
             img
-              height: 1.8em
+              margin: 2px
+              height: 24px
+              @media screen and (max-width: $device-mobile)
+                height: 32px
+                margin: 8px
               width: auto
               background: transparent
 
@@ -298,10 +314,11 @@
 
 
 div.hoverbox
-  display: flex
-  flex-direction: column
-  justify-content: center
-  align-items: center
+  // display: flex
+  // flex-direction: column
+  // justify-content: center
+  // align-items: center
+
   >div.target
     display: none
     position: absolute
@@ -309,16 +326,24 @@ div.hoverbox
     border-radius: $border-card
     box-shadow: $boxshadow-card-float
     padding: 8px
-    margin-left: -4px
-    margin-top: 0 - 4px - 64px - 40px
+    left: 50%
+    top: -20px
+    // margin-left: 50%
+    transform: translate(-50%, -100%)
+    // margin-left: -4px
+    // margin-top: 0 - 4px - 64px - 40px
     >img
       margin: 0
       padding: 0
       height: 128px
       width: 128px
+      min-width: 128px
   &:hover
     >div.target
       display: flex
+  @media screen and (max-width: $device-mobile)
+    >div.target
+      position: absolute
 
 .comments
   .article