back2top button on mobile, sidebar item margin and sidebar exturl…

… link color (theme-next#684) * Bugfix: show `back2top` button on mobile (theme-next#482) * Optimize sidebar item margin * Fix wrong `exturl` link color
tongluyang · Mar 16, 2019 · 932e7d2 · 932e7d2
1 parent 773ebe4
commit 932e7d2
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 48 deletions.
diff --git a/source/css/_common/components/back-to-top-sidebar.styl b/source/css/_common/components/back-to-top-sidebar.styl
@@ -8,13 +8,8 @@
   text-align: center;
   &:hover { opacity: 0.8; }
 
-  +tablet() {
-    fixbutton() if hexo-config('sidebar.onmobile');
-    hide() if not hexo-config('sidebar.onmobile');
-  }
-  +mobile() {
-    fixbutton() if hexo-config('sidebar.onmobile');
-    hide() if not hexo-config('sidebar.onmobile');
+  +tablet-mobile() {
+    hexo-config('sidebar.onmobile') ? fixbutton() : hide();
   }
 
   &.back-to-top-on {

diff --git a/source/css/_common/components/back-to-top.styl b/source/css/_common/components/back-to-top.styl
@@ -15,16 +15,10 @@
   transition-property: bottom;
   the-transition();
 
-  +tablet() {
-    fixbutton() if hexo-config('sidebar.onmobile');
-    hide() if not hexo-config('sidebar.onmobile');
-  }
-  +mobile() {
-    fixbutton() if hexo-config('sidebar.onmobile');
-    hide() if not hexo-config('sidebar.onmobile');
-  }
-
   &.back-to-top-on {
     bottom: $b2t-position-bottom-on;
   }
+  &:hover {
+    color: $sidebar-highlight;
+  }
 }
diff --git a/source/css/_common/components/post/post.styl b/source/css/_common/components/post/post.styl
@@ -3,7 +3,7 @@
   font-family: $font-family-posts;
 }
 
-.post-body .exturl {
+.post-body span.exturl {
   .fa {
     font-size: 14px;
     margin-left: 4px;

diff --git a/source/css/_common/components/sidebar/sidebar-author-links.styl b/source/css/_common/components/sidebar/sidebar-author-links.styl
@@ -1,25 +1,24 @@
 .links-of-author {
   margin-top: 20px;
-}
-
-.links-of-author a,
-.links-of-author .exturl {
-  display: inline-block;
-  vertical-align: middle;
-  margin-right: 10px;
-  margin-bottom: 10px;
-  border-bottom-color: $black-light;
-  font-size: 13px;
-  if hexo-config('social_icons.transition') { the-transition(); }
 
-  &:before {
+  a, span.exturl {
     display: inline-block;
     vertical-align: middle;
-    margin-right: 3px;
-    content: " ";
-    width: 4px;
-    height: 4px;
-    border-radius: 50%;
-    background: rgb(random-color(0, 255) - 50%, random-color(0, 255) - 50%, random-color(0, 255) - 50%);
+    margin-right: 10px;
+    margin-bottom: 10px;
+    border-bottom-color: $black-light;
+    font-size: 13px;
+    if hexo-config('social_icons.transition') { the-transition(); }
+
+    &:before {
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 3px;
+      content: " ";
+      width: 4px;
+      height: 4px;
+      border-radius: 50%;
+      background: rgb(random-color(0, 255) - 50%, random-color(0, 255) - 50%, random-color(0, 255) - 50%);
+    }
   }
 }
diff --git a/source/css/_common/components/sidebar/sidebar-blogroll.styl b/source/css/_common/components/sidebar/sidebar-blogroll.styl
@@ -1,7 +1,10 @@
-.links-of-blogroll { font-size: 13px; }
+.links-of-blogroll {
+  margin-top: 10px;
+  font-size: 13px;
+}
 
 .links-of-blogroll-title {
-  margin-top: 20px;
+  margin-top: 0;
   font-size: 14px;
   font-weight: $font-weight-bold;
 }

diff --git a/source/css/_common/components/sidebar/sidebar-toggle.styl b/source/css/_common/components/sidebar/sidebar-toggle.styl
@@ -1,4 +1,7 @@
 .sidebar-toggle {
+  &:hover .sidebar-toggle-line {
+    background: $sidebar-highlight;
+  }
   position: fixed;
   right: $b2t-position-right;
   bottom: 45px;

diff --git a/source/css/_common/components/sidebar/sidebar.styl b/source/css/_common/components/sidebar/sidebar.styl
@@ -9,11 +9,14 @@
   box-shadow: inset 0 2px 6px black;
   background: $black-deep;
 
-  a, .exturl {
+  a, span.exturl {
     color: $grey-dark;
     border-bottom-color: $black-light;
     &:hover { color: $gainsboro; }
   }
+  span.exturl:hover {
+    border-bottom-color: $gainsboro;
+  }
 
   +tablet() {
     hide() if not hexo-config('sidebar.onmobile');

diff --git a/source/css/_mixins/Pisces.styl b/source/css/_mixins/Pisces.styl
@@ -2,7 +2,7 @@ sidebar-inline-links-item() {
   margin: 5px 0 0;
   if !hexo-config('social_icons.icons_only') { width: 50%; }
 
-  & a, .exturl {
+  & a, span.exturl {
     max-width: 216px;
     box-sizing: border-box;
     display: inline-block;

diff --git a/source/css/_schemes/Pisces/_sidebar.styl b/source/css/_schemes/Pisces/_sidebar.styl
@@ -7,6 +7,13 @@
   // Do NOT delete this line
   // or Affix (position: fixed) will not work in Google Chrome.
   -webkit-transform: none;
+
+  a, span.exturl {
+    color: $black-light;
+
+    &:hover { color: $black-deep; }
+  }
+  span.exturl:hover { border-bottom-color: $black-deep; }
 }
 
 .sidebar-inner {
@@ -38,13 +45,6 @@
   clearfix();
 }
 
-.sidebar a,
-.sidebar span.exturl {
-  color: $black-light;
-
-  &:hover { color: $black-deep; }
-}
-
 .site-state-item {
   padding: 0 10px;
 }
@@ -127,10 +127,8 @@
 
 .links-of-blogroll {
   text-align: center;
-  margin-top: 5px;
   padding: 3px 0 0;
 }
-.links-of-blogroll-title { margin-top: 0; }
 .links-of-blogroll-item { padding: 0; }
 .links-of-blogroll-inline {
   clearfix();