refactor: Optimizing ths animation of avatar in sidebar

_config.yml

@@ -101,7 +101,7 @@ header:
     url:
   # Mask effect of the background image.
   mask:
-    enable: true
+    enable: false
     # Opacity of mask (value: 0 ~ 1).
     opacity: 0.5
 

layout/_partials/sidebar/sidebar.pug

@@ -17,7 +17,8 @@ section.sidebar-ov(class=`${isShowToc ? "hide" : ""}`)
   if theme.author.enable
     div.sidebar-ov-author
       if theme.author.avatar.url
-        img.sidebar-ov-author__img(src=theme.author.avatar.url alt="avatar")
+        div.sidebar-ov-author__avatar
+          img.sidebar-ov-author__avatar_img(src=theme.author.avatar.url alt="avatar")
       if theme.author.motto
         p.sidebar-ov-author__p= theme.author.motto
 

source/css/_common/components/sidebar/index.styl

@@ -93,11 +93,9 @@ if (hexo-config('sidebar.enable')) {
     }
 
     &-ov {
-      & > div {
+      & > div + div {
         if (hexo-config('sidebar.horizon_line')) {
-          &:not(:last-child) {
-            border-bottom: 1px dashed $sidebar-horizon-line-color;
-          }
+          border-top: 1px dashed $sidebar-horizon-line-color;
         }
       }
 
@@ -106,18 +104,20 @@ if (hexo-config('sidebar.enable')) {
           width: 100%;
           text-align: center;
 
-          &__img {
+          &__avatar {
+            margin: 0 auto;
             width: 120px;
             height: 120px;
-            opacity: hexo-config('author.avatar.opacity');
 
-            if (hexo-config('author.avatar.rounded')) {
-              border-radius: 50%;
-            } else {
-              border-radius: 2px;
+            &_img {
+              opacity: hexo-config('author.avatar.opacity');
+
+              if (hexo-config('author.avatar.rounded')) {
+                border-radius: 50%;
+              }
             }
 
-            &:hover {
+            &:hover &_img {
               animation: convert('avatar-' + (hexo-config('author.avatar.animation') || 'turn')) .8s both ease-out;
             }
           }