diff --git a/layout/_partials/widgets.njk b/layout/_partials/widgets.njk
index 5af3a75..5544189 100644
--- a/layout/_partials/widgets.njk
+++ b/layout/_partials/widgets.njk
@@ -11,7 +11,7 @@
{%- if theme.back2top.enable and not theme.back2top.sidebar %}
-
+
0%
{%- endif %}
diff --git a/source/css/_common/components/back-to-top.styl b/source/css/_common/components/back-to-top.styl
index d1c9152..8fa649e 100644
--- a/source/css/_common/components/back-to-top.styl
+++ b/source/css/_common/components/back-to-top.styl
@@ -2,14 +2,21 @@ if (hexo-config('back2top.enable')) {
.back-to-top {
font-size: $b2t-font-size;
- if (not hexo-config('back2top.scrollpercent')) {
- span {
+ span {
+ margin-right: 8px;
+ if (not hexo-config('back2top.scrollpercent')) {
display: none;
}
}
+ .fa {
+ text-align: center;
+ width: $sidebar-toggle-size;
+ }
+
if (hexo-config('back2top.sidebar')) {
margin: 20px - $sidebar-offset -10px -20px;
+ // FIXME: opacity override by motion
opacity: 0;
transition: opacity $transition-ease;
@@ -22,17 +29,14 @@ if (hexo-config('back2top.enable')) {
}
}
} else {
+ align-items: center;
bottom: $b2t-position-bottom;
- box-sizing: border-box;
color: $b2t-color;
- padding: 0 6px;
+ display: flex;
+ height: $sidebar-toggle-size;
transition: bottom $transition-ease;
sidebar-toggle();
- if (not hexo-config('back2top.scrollpercent')) {
- width: 24px;
- }
-
&:hover {
color: $sidebar-highlight;
}
diff --git a/source/css/_common/outline/sidebar/sidebar-toggle.styl b/source/css/_common/outline/sidebar/sidebar-toggle.styl
index 0d44434..0b19b89 100644
--- a/source/css/_common/outline/sidebar/sidebar-toggle.styl
+++ b/source/css/_common/outline/sidebar/sidebar-toggle.styl
@@ -1,8 +1,8 @@
.sidebar-toggle {
- bottom: 45px;
- height: 12px;
- padding: 6px 5px;
- width: 14px;
+ bottom: $b2t-position-bottom-on + $sidebar-toggle-size + 5px;
+ height: $sidebar-toggle-inner-size;
+ padding: $sidebar-toggle-padding;
+ width: $sidebar-toggle-inner-size;
sidebar-toggle();
}
diff --git a/source/css/_common/scaffolding/toggles.styl b/source/css/_common/scaffolding/toggles.styl
index 3b9eea5..163bd9e 100644
--- a/source/css/_common/scaffolding/toggles.styl
+++ b/source/css/_common/scaffolding/toggles.styl
@@ -11,8 +11,12 @@
transition: all .4s;
width: 100%;
+ &:first-child {
+ margin-top: 1px;
+ }
+
&:not(:first-child) {
- margin-top: 3px;
+ margin-top: 4px;
}
}
}
diff --git a/source/css/_mixins.styl b/source/css/_mixins.styl
index 1e365d0..f99e5d3 100644
--- a/source/css/_mixins.styl
+++ b/source/css/_mixins.styl
@@ -197,22 +197,22 @@ toggle-close($position) {
if ($position == 'right') {
.toggle-line:first-child {
- top: 5px;
+ top: 6px;
transform: rotate(-45deg);
}
.toggle-line:last-child {
- top: -5px;
+ top: -6px;
transform: rotate(45deg);
}
} else {
.toggle-line:first-child {
- top: 5px;
+ top: 6px;
transform: rotate(45deg);
}
.toggle-line:last-child {
- top: -5px;
+ top: -6px;
transform: rotate(-45deg);
}
}
diff --git a/source/css/_variables/Pisces.styl b/source/css/_variables/Pisces.styl
index fc2db1b..7442ea8 100644
--- a/source/css/_variables/Pisces.styl
+++ b/source/css/_variables/Pisces.styl
@@ -64,5 +64,3 @@ $btn-default-hover-color = white;
// Back to top
$b2t-opacity = .6;
$b2t-opacity-hover = .8;
-$b2t-position-bottom = -100px;
-$b2t-position-bottom-on = 30px;
diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl
index ca8519a..b16b775 100644
--- a/source/css/_variables/base.styl
+++ b/source/css/_variables/base.styl
@@ -265,13 +265,17 @@ $site-state-item-name-color = inherit;
$b2t-opacity = .8;
$b2t-opacity-hover = 1;
$b2t-position-bottom = -100px;
-$b2t-position-bottom-on = 19px;
+$b2t-position-bottom-on = 30px;
$b2t-position-right = 30px;
$b2t-position-right-mobile = 20px;
$b2t-font-size = 12px;
$b2t-color = white;
$b2t-bg-color = $black-deep;
+$sidebar-toggle-inner-size = 16px;
+$sidebar-toggle-padding = 5px;
+$sidebar-toggle-size = $sidebar-toggle-inner-size + $sidebar-toggle-padding * 2;
+
// .post-expand .post-eof
// In Muse scheme, margin above and below the post separator
$post-eof-margin-top = 80px; // or 160px for more white space;