From d9044aa566802a0c1b998a2070e9ef86b513bdba Mon Sep 17 00:00:00 2001 From: triccsr Date: Thu, 19 Oct 2023 11:43:12 +0800 Subject: [PATCH 1/8] Feature: sidebar toggle button on Picses&Gemini --- .directory | 7 + layout/_partials/widgets.njk | 2 +- layout/_scripts/index.njk | 2 +- scripts/filters/minify.js | 2 +- source/css/_mixins.styl | 5 +- source/css/_schemes/Pisces/_sidebar.styl | 264 +++++++++++++++++------ source/css/main.styl | 2 + 7 files changed, 219 insertions(+), 65 deletions(-) create mode 100644 .directory diff --git a/.directory b/.directory new file mode 100644 index 000000000..6a18d0034 --- /dev/null +++ b/.directory @@ -0,0 +1,7 @@ +[Dolphin] +Timestamp=2023,10,19,10,25,46.932 +Version=4 +ViewMode=1 + +[Settings] +HiddenFilesShown=true diff --git a/layout/_partials/widgets.njk b/layout/_partials/widgets.njk index 4e5b2d31d..f47fa1cb4 100644 --- a/layout/_partials/widgets.njk +++ b/layout/_partials/widgets.njk @@ -1,6 +1,6 @@ {# Widgets with fixed position #} -{%- if theme.sidebar.display !== 'remove' and (theme.scheme === 'Muse' or theme.scheme === 'Mist') %} +{%- if theme.sidebar.display !== 'remove' and (theme.scheme === 'Muse' or theme.scheme === 'Mist' or theme.sidebar.on_mobile) %}
diff --git a/layout/_scripts/index.njk b/layout/_scripts/index.njk index 6a3788b86..8d31f1d1a 100644 --- a/layout/_scripts/index.njk +++ b/layout/_scripts/index.njk @@ -7,7 +7,7 @@ {{- next_js('motion.js') }} {%- endif %} -{%- if theme.scheme === 'Muse' or theme.scheme === 'Mist' %} +{%- if theme.scheme === 'Muse' or theme.scheme === 'Mist' or theme.sidebar.on_mobile%} {{- next_js('schemes/muse.js') }} {%- endif %} diff --git a/scripts/filters/minify.js b/scripts/filters/minify.js index 0f3371105..0400c12dd 100644 --- a/scripts/filters/minify.js +++ b/scripts/filters/minify.js @@ -40,7 +40,7 @@ hexo.extend.filter.register('after_generate', () => { hexo.route.remove('js/comments-buttons.js'); } - if (theme.scheme === 'Pisces' || theme.scheme === 'Gemini') { + if ((theme.scheme === 'Pisces' || theme.scheme === 'Gemini') && !theme.sidebar.on_mobile) { hexo.route.remove('js/schemes/muse.js'); } diff --git a/source/css/_mixins.styl b/source/css/_mixins.styl index 7c172d2c5..f32fda4e9 100644 --- a/source/css/_mixins.styl +++ b/source/css/_mixins.styl @@ -126,7 +126,10 @@ main-container() { sidebar-toggle-alignment($reverse) { $condition = hexo-config('sidebar.position') == 'right'; - if (($scheme == 'Muse') or ($scheme == 'Mist')) { + if ((($scheme == 'Muse') or ($scheme == 'Mist')) and !$button_reverse) { + $condition = $condition == $reverse; + } + if ((($scheme == 'Pisces') or ($scheme == 'Gemini')) and $button_reverse) { $condition = $condition == $reverse; } return $condition ? ('left' 'right') : ('right' 'left'); diff --git a/source/css/_schemes/Pisces/_sidebar.styl b/source/css/_schemes/Pisces/_sidebar.styl index 2ce83a726..d5956e443 100644 --- a/source/css/_schemes/Pisces/_sidebar.styl +++ b/source/css/_schemes/Pisces/_sidebar.styl @@ -1,88 +1,230 @@ -.sidebar { - // https://caniuse.com/css-sticky - position: -webkit-sticky; - position: sticky; - top: $sidebar-offset; ++desktop() { + .sidebar { + // https://caniuse.com/css-sticky + position: -webkit-sticky; + position: sticky; + top: $sidebar-offset; - +tablet-mobile() { - display: none; + +tablet-mobile() { + display: none; + } + } + .sidebar-toggle { + display: none; } -} -.sidebar-inner { - background: var(--content-bg-color); - border-radius: $border-radius; - box-shadow: $box-shadow; - box-sizing: border-box; - color: var(--text-color); - margin-top: $sidebar-offset; - max-height: 'calc(100vh - %s)' % unit($sidebar-offset * 2, 'px'); + .sidebar-inner { + background: var(--content-bg-color); + border-radius: $border-radius; + box-shadow: $box-shadow; + box-sizing: border-box; + color: var(--text-color); + margin-top: $sidebar-offset; + max-height: 'calc(100vh - %s)' % unit($sidebar-offset * 2, 'px'); - if (hexo-config('motion.enable') and hexo-config('motion.transition.sidebar')) { - visibility: hidden; + if (hexo-config('motion.enable') and hexo-config('motion.transition.sidebar')) { + visibility: hidden; + } } -} - -.site-state-item { - padding: 0 10px; -} -.sidebar .sidebar-button { - border-bottom: 1px dotted $grey-light; - border-top: 1px dotted $grey-light; + .site-state-item { + padding: 0 10px; + } - button { - border: 0; - color: $orange; - display: block; - width: 100%; + .sidebar .sidebar-button { + border-bottom: 1px dotted $grey-light; + border-top: 1px dotted $grey-light; - &:hover { - background: none; + button { border: 0; - color: darken($orange, 20%); + color: $orange; + display: block; + width: 100%; + + &:hover { + background: none; + border: 0; + color: darken($orange, 20%); + } } } -} -.links-of-author { - flex-wrap(); -} + .links-of-author { + flex-wrap(); + } + + .links-of-author-item { + sidebar-inline-links-item(); + + if (not hexo-config('social_icons.icons_only')) { + width: 50%; + } -.links-of-author-item { - sidebar-inline-links-item(); + a { + border-bottom: 0; + border-radius: 4px; + display: block; - if (not hexo-config('social_icons.icons_only')) { - width: 50%; + &:hover { + background: var(--body-bg-color); + } + } } - a { - border-bottom: 0; - border-radius: 4px; - display: block; + .links-of-blogroll-item { + if (hexo-config('links_settings.layout') == 'inline') { + display: inline-block; + max-width: 100%; + sidebar-inline-links-item(); + } + } - &:hover { + if (hexo-config('back2top.sidebar')) { + // Only when back2top.sidebar is true, apply the following styles + .back-to-top { background: var(--body-bg-color); + margin: 8px - $sidebar-offset -10px -18px; + + &.back-to-top-on { + margin-top: 16px; + } } } } ++tablet-mobile() { + if (hexo-config('sidebar.position') == 'right') { + .sidebar-active { + // Note: $sidebar-desktop + $content-desktop-large should be less than desktop-large threshold + // Otherwise a horizontal scrollbar will appear + +desktop-large() { + padding-right: $sidebar-desktop; -.links-of-blogroll-item { - if (hexo-config('links_settings.layout') == 'inline') { - display: inline-block; - max-width: 100%; - sidebar-inline-links-item(); + .footer-fixed { + right: $sidebar-desktop; + } + } + } + + .sidebar { + right: 0 - $sidebar-desktop; + + .sidebar-active & { + right: 0; + } + } + } else { + .sidebar-active { + +desktop-large() { + padding-left: $sidebar-desktop; + + .footer-fixed { + left: $sidebar-desktop; + } + } + } + + .sidebar { + left: 0 - $sidebar-desktop; + + .sidebar-active & { + left: 0; + } + } } -} -if (hexo-config('back2top.sidebar')) { - // Only when back2top.sidebar is true, apply the following styles - .back-to-top { - background: var(--body-bg-color); - margin: 8px - $sidebar-offset -10px -18px; + .sidebar { + background: $black-deep; + bottom: 0; + if (not hexo-config('back2top.sidebar')) { + box-shadow: inset 0 2px 6px black; + } + max-height: 100vh; + overflow-y: auto; + position: fixed; + top: 0; + transition: all $transition-ease-out; + width: $sidebar-desktop; + z-index: $zindex-2; + + a { + border-bottom-color: $black-light; + color: $grey-dark; - &.back-to-top-on { - margin-top: 16px; + &:hover { + border-bottom-color: $gainsboro; + color: $gainsboro; + } } } -} + + .links-of-author { + &:not(:first-child) { + margin-top: 15px; + } + + a { + border-bottom-color: $black-light; + display: inline-block; + margin-bottom: 10px; + margin-right: 10px; + vertical-align: middle; + + if (hexo-config('social_icons.transition')) { + transition: all $transition-ease; + } + + &::before { + background: rgb(random-color(0, 255) - 50%, random-color(0, 255) - 50%, random-color(0, 255) - 50%); + display: inline-block; + margin-right: 3px; + transform: translateY(-2px); + round-icon(4px); + } + } + } + + .links-of-blogroll-item { + if (hexo-config('links_settings.layout') == 'inline') { + display: inline-block; + } + padding: 2px 10px; + + a { + box-sizing: border-box; + display: inline-block; + max-width: 280px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + .popular-posts .popular-posts-item .popular-posts-link:hover { + background: none; + } + + .sidebar-dimmer { + background: black; + height: 100%; + left: 0; + opacity: 0; + position: fixed; + top: 0; + transition: visibility .4s, opacity .4s; + visibility: hidden; + width: 100%; + z-index: $zindex-1; + + .sidebar-active & { + opacity: .7; + visibility: visible; + } + } + + +desktop-large() { + .sidebar-dimmer { + display: none; + } + } + +} \ No newline at end of file diff --git a/source/css/main.styl b/source/css/main.styl index d75c4a1c5..2c1d137cb 100644 --- a/source/css/main.styl +++ b/source/css/main.styl @@ -5,6 +5,8 @@ vendors = official; $scheme = hexo-config('scheme') ? hexo-config('scheme') : 'Muse'; +$button_reverse = hexo-config('sidebar.button_reverse') ? hexo-config('sidebar.button_reverse') : false; + // Variables Layer // -------------------------------------------------- From 284a366c9a529f980a94091744f3ce31e9061910 Mon Sep 17 00:00:00 2001 From: triccsr Date: Thu, 19 Oct 2023 12:01:01 +0800 Subject: [PATCH 2/8] Delete .directory --- .directory | 7 ------- 1 file changed, 7 deletions(-) delete mode 100644 .directory diff --git a/.directory b/.directory deleted file mode 100644 index 6a18d0034..000000000 --- a/.directory +++ /dev/null @@ -1,7 +0,0 @@ -[Dolphin] -Timestamp=2023,10,19,10,25,46.932 -Version=4 -ViewMode=1 - -[Settings] -HiddenFilesShown=true From 1aa645e8f043efccae5996042464db929053d621 Mon Sep 17 00:00:00 2001 From: Mimi <1119186082@qq.com> Date: Fri, 26 Apr 2024 17:39:25 +0800 Subject: [PATCH 3/8] Remove options --- layout/_partials/widgets.njk | 2 +- layout/_scripts/index.njk | 6 +++- scripts/filters/minify.js | 6 +++- source/css/_mixins.styl | 8 +----- source/css/_variables/base.styl | 2 ++ source/css/main.styl | 2 -- source/js/schemes/muse.js | 46 ------------------------------ source/js/sidebar.js | 50 +++++++++++++++++++++++++++++++++ 8 files changed, 64 insertions(+), 58 deletions(-) create mode 100644 source/js/sidebar.js diff --git a/layout/_partials/widgets.njk b/layout/_partials/widgets.njk index f47fa1cb4..b312d0acd 100644 --- a/layout/_partials/widgets.njk +++ b/layout/_partials/widgets.njk @@ -1,6 +1,6 @@ {# Widgets with fixed position #} -{%- if theme.sidebar.display !== 'remove' and (theme.scheme === 'Muse' or theme.scheme === 'Mist' or theme.sidebar.on_mobile) %} +{%- if theme.sidebar.display !== 'remove' %}
diff --git a/layout/_scripts/index.njk b/layout/_scripts/index.njk index 8d31f1d1a..e988032da 100644 --- a/layout/_scripts/index.njk +++ b/layout/_scripts/index.njk @@ -7,10 +7,14 @@ {{- next_js('motion.js') }} {%- endif %} -{%- if theme.scheme === 'Muse' or theme.scheme === 'Mist' or theme.sidebar.on_mobile%} +{%- if theme.scheme === 'Muse' or theme.scheme === 'Mist' %} {{- next_js('schemes/muse.js') }} {%- endif %} +{%- if theme.sidebar.display !== 'remove' %} + {{- next_js('sidebar.js') }} +{%- endif %} + {{- next_js('next-boot.js') }} {%- if theme.bookmark.enable %} {{- next_js('bookmark.js') }} diff --git a/scripts/filters/minify.js b/scripts/filters/minify.js index 0400c12dd..b28011462 100644 --- a/scripts/filters/minify.js +++ b/scripts/filters/minify.js @@ -40,10 +40,14 @@ hexo.extend.filter.register('after_generate', () => { hexo.route.remove('js/comments-buttons.js'); } - if ((theme.scheme === 'Pisces' || theme.scheme === 'Gemini') && !theme.sidebar.on_mobile) { + if ((theme.scheme === 'Pisces' || theme.scheme === 'Gemini')) { hexo.route.remove('js/schemes/muse.js'); } + if (theme.sidebar.display === 'remove') { + hexo.route.remove('js/sidebar.js'); + } + // Third Party Scripts // Analytics if (!theme.baidu_analytics) { diff --git a/source/css/_mixins.styl b/source/css/_mixins.styl index f32fda4e9..80cbc92cd 100644 --- a/source/css/_mixins.styl +++ b/source/css/_mixins.styl @@ -125,13 +125,7 @@ main-container() { } sidebar-toggle-alignment($reverse) { - $condition = hexo-config('sidebar.position') == 'right'; - if ((($scheme == 'Muse') or ($scheme == 'Mist')) and !$button_reverse) { - $condition = $condition == $reverse; - } - if ((($scheme == 'Pisces') or ($scheme == 'Gemini')) and $button_reverse) { - $condition = $condition == $reverse; - } + $condition = ($sidebar-toggle-position == 'right') == $reverse; return $condition ? ('left' 'right') : ('right' 'left'); } diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl index 6faafe36f..03de1b293 100644 --- a/source/css/_variables/base.styl +++ b/source/css/_variables/base.styl @@ -281,6 +281,8 @@ $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; +$sidebar-toggle-position = hexo-config('sidebar.position') == 'left' ? 'left' : 'right'; + // .post-expand .post-eof // In Muse scheme, margin above and below the post separator diff --git a/source/css/main.styl b/source/css/main.styl index 2c1d137cb..d75c4a1c5 100644 --- a/source/css/main.styl +++ b/source/css/main.styl @@ -5,8 +5,6 @@ vendors = official; $scheme = hexo-config('scheme') ? hexo-config('scheme') : 'Muse'; -$button_reverse = hexo-config('sidebar.button_reverse') ? hexo-config('sidebar.button_reverse') : false; - // Variables Layer // -------------------------------------------------- diff --git a/source/js/schemes/muse.js b/source/js/schemes/muse.js index ba60b5156..75bf06657 100644 --- a/source/js/schemes/muse.js +++ b/source/js/schemes/muse.js @@ -2,52 +2,6 @@ document.addEventListener('DOMContentLoaded', () => { - const isRight = CONFIG.sidebar.position === 'right'; - - const sidebarToggleMotion = { - mouse: {}, - init : function() { - window.addEventListener('mousedown', this.mousedownHandler.bind(this)); - window.addEventListener('mouseup', this.mouseupHandler.bind(this)); - document.querySelector('.sidebar-dimmer').addEventListener('click', this.clickHandler.bind(this)); - document.querySelector('.sidebar-toggle').addEventListener('click', this.clickHandler.bind(this)); - window.addEventListener('sidebar:show', this.showSidebar); - window.addEventListener('sidebar:hide', this.hideSidebar); - }, - mousedownHandler: function(event) { - this.mouse.X = event.pageX; - this.mouse.Y = event.pageY; - }, - mouseupHandler: function(event) { - const deltaX = event.pageX - this.mouse.X; - const deltaY = event.pageY - this.mouse.Y; - const clickingBlankPart = Math.hypot(deltaX, deltaY) < 20 && event.target.matches('.main'); - // Fancybox has z-index property, but medium-zoom does not, so the sidebar will overlay the zoomed image. - if (clickingBlankPart || event.target.matches('img.medium-zoom-image')) { - this.hideSidebar(); - } - }, - clickHandler: function() { - document.body.classList.contains('sidebar-active') ? this.hideSidebar() : this.showSidebar(); - }, - showSidebar: function() { - document.body.classList.add('sidebar-active'); - const animateAction = isRight ? 'fadeInRight' : 'fadeInLeft'; - document.querySelectorAll('.sidebar .animated').forEach((element, index) => { - element.style.animationDelay = (100 * index) + 'ms'; - element.classList.remove(animateAction); - setTimeout(() => { - // Trigger a DOM reflow - element.classList.add(animateAction); - }); - }); - }, - hideSidebar: function() { - document.body.classList.remove('sidebar-active'); - } - }; - if (CONFIG.sidebar.display !== 'remove') sidebarToggleMotion.init(); - function updateFooterPosition() { const footer = document.querySelector('.footer'); const containerHeight = document.querySelector('.main').offsetHeight + footer.offsetHeight; diff --git a/source/js/sidebar.js b/source/js/sidebar.js new file mode 100644 index 000000000..1e82c5c80 --- /dev/null +++ b/source/js/sidebar.js @@ -0,0 +1,50 @@ +/* global CONFIG */ + +document.addEventListener('DOMContentLoaded', () => { + + const isRight = CONFIG.sidebar.position === 'right'; + + const sidebarToggleMotion = { + mouse: {}, + init: function() { + window.addEventListener('mousedown', this.mousedownHandler.bind(this)); + window.addEventListener('mouseup', this.mouseupHandler.bind(this)); + document.querySelector('.sidebar-dimmer').addEventListener('click', this.clickHandler.bind(this)); + document.querySelector('.sidebar-toggle').addEventListener('click', this.clickHandler.bind(this)); + window.addEventListener('sidebar:show', this.showSidebar); + window.addEventListener('sidebar:hide', this.hideSidebar); + }, + mousedownHandler: function(event) { + this.mouse.X = event.pageX; + this.mouse.Y = event.pageY; + }, + mouseupHandler: function(event) { + const deltaX = event.pageX - this.mouse.X; + const deltaY = event.pageY - this.mouse.Y; + const clickingBlankPart = Math.hypot(deltaX, deltaY) < 20 && event.target.matches('.main'); + // Fancybox has z-index property, but medium-zoom does not, so the sidebar will overlay the zoomed image. + if (clickingBlankPart || event.target.matches('img.medium-zoom-image')) { + this.hideSidebar(); + } + }, + clickHandler: function() { + document.body.classList.contains('sidebar-active') ? this.hideSidebar() : this.showSidebar(); + }, + showSidebar: function() { + document.body.classList.add('sidebar-active'); + const animateAction = isRight ? 'fadeInRight' : 'fadeInLeft'; + document.querySelectorAll('.sidebar .animated').forEach((element, index) => { + element.style.animationDelay = (100 * index) + 'ms'; + element.classList.remove(animateAction); + setTimeout(() => { + // Trigger a DOM reflow + element.classList.add(animateAction); + }); + }); + }, + hideSidebar: function() { + document.body.classList.remove('sidebar-active'); + } + }; + sidebarToggleMotion.init(); +}); From 0aa2597d8112e594e6b6c8bd206422dd44f1e406 Mon Sep 17 00:00:00 2001 From: Mimi <1119186082@qq.com> Date: Fri, 26 Apr 2024 18:06:20 +0800 Subject: [PATCH 4/8] Fix duplicate code --- scripts/filters/minify.js | 2 +- source/css/_common/outline/sidebar/index.styl | 109 ++++++++++++++ source/css/_mixins.styl | 10 ++ source/css/_schemes/Muse/_sidebar.styl | 125 +--------------- source/css/_schemes/Pisces/_sidebar.styl | 140 +----------------- 5 files changed, 129 insertions(+), 257 deletions(-) diff --git a/scripts/filters/minify.js b/scripts/filters/minify.js index b28011462..310e1a8f8 100644 --- a/scripts/filters/minify.js +++ b/scripts/filters/minify.js @@ -40,7 +40,7 @@ hexo.extend.filter.register('after_generate', () => { hexo.route.remove('js/comments-buttons.js'); } - if ((theme.scheme === 'Pisces' || theme.scheme === 'Gemini')) { + if (theme.scheme === 'Pisces' || theme.scheme === 'Gemini') { hexo.route.remove('js/schemes/muse.js'); } diff --git a/source/css/_common/outline/sidebar/index.styl b/source/css/_common/outline/sidebar/index.styl index 5b0471615..e769720e9 100644 --- a/source/css/_common/outline/sidebar/index.styl +++ b/source/css/_common/outline/sidebar/index.styl @@ -1,3 +1,112 @@ ++sidebar() { + if (hexo-config('sidebar.position') == 'right') { + .sidebar { + right: 0 - $sidebar-desktop; + + .sidebar-active & { + right: 0; + } + } + } else { + .sidebar { + left: 0 - $sidebar-desktop; + + .sidebar-active & { + left: 0; + } + } + } + + .sidebar { + background: $black-deep; + bottom: 0; + if (not hexo-config('back2top.sidebar')) { + box-shadow: inset 0 2px 6px black; + } + max-height: 100vh; + overflow-y: auto; + position: fixed; + top: 0; + transition: all $transition-ease-out; + width: $sidebar-desktop; + z-index: $zindex-2; + + a { + border-bottom-color: $black-light; + color: $grey-dark; + + &:hover { + border-bottom-color: $gainsboro; + color: $gainsboro; + } + } + } + + .links-of-author { + &:not(:first-child) { + margin-top: 15px; + } + + a { + border-bottom-color: $black-light; + display: inline-block; + margin-bottom: 10px; + margin-right: 10px; + vertical-align: middle; + + if (hexo-config('social_icons.transition')) { + transition: all $transition-ease; + } + + &::before { + background: rgb(random-color(0, 255) - 50%, random-color(0, 255) - 50%, random-color(0, 255) - 50%); + display: inline-block; + margin-right: 3px; + transform: translateY(-2px); + round-icon(4px); + } + } + } + + .links-of-blogroll-item { + if (hexo-config('links_settings.layout') == 'inline') { + display: inline-block; + } + padding: 2px 10px; + + a { + box-sizing: border-box; + display: inline-block; + max-width: 280px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + .popular-posts .popular-posts-item .popular-posts-link:hover { + background: none; + } + + .sidebar-dimmer { + background: black; + height: 100%; + left: 0; + opacity: 0; + position: fixed; + top: 0; + transition: visibility .4s, opacity .4s; + visibility: hidden; + width: 100%; + z-index: $zindex-1; + + .sidebar-active & { + opacity: .7; + visibility: visible; + } + } +} + .sidebar-inner { color: $grey-dark; padding: $sidebar-padding 10px; diff --git a/source/css/_mixins.styl b/source/css/_mixins.styl index 80cbc92cd..e17ba3e2d 100644 --- a/source/css/_mixins.styl +++ b/source/css/_mixins.styl @@ -52,6 +52,16 @@ desktop-largest() { } } +sidebar() { + if (($scheme == 'Muse') or ($scheme == 'Mist')) { + {block} + } else { + +tablet-mobile() { + {block} + } + } +} + random-color($min, $max) { return floor(math(0, 'random') * ($max - $min + 1) + $min); } diff --git a/source/css/_schemes/Muse/_sidebar.styl b/source/css/_schemes/Muse/_sidebar.styl index 87b0ef261..38f940254 100644 --- a/source/css/_schemes/Muse/_sidebar.styl +++ b/source/css/_schemes/Muse/_sidebar.styl @@ -1,26 +1,18 @@ -if (hexo-config('sidebar.position') == 'right') { ++desktop-large() { + .sidebar-dimmer { + display: none; + } + .sidebar-active { // Note: $sidebar-desktop + $content-desktop-large should be less than desktop-large threshold // Otherwise a horizontal scrollbar will appear - +desktop-large() { + if (hexo-config('sidebar.position') == 'right') { padding-right: $sidebar-desktop; .footer-fixed { right: $sidebar-desktop; } - } - } - - .sidebar { - right: 0 - $sidebar-desktop; - - .sidebar-active & { - right: 0; - } - } -} else { - .sidebar-active { - +desktop-large() { + } else { padding-left: $sidebar-desktop; .footer-fixed { @@ -28,107 +20,4 @@ if (hexo-config('sidebar.position') == 'right') { } } } - - .sidebar { - left: 0 - $sidebar-desktop; - - .sidebar-active & { - left: 0; - } - } -} - -.sidebar { - background: $black-deep; - bottom: 0; - if (not hexo-config('back2top.sidebar')) { - box-shadow: inset 0 2px 6px black; - } - max-height: 100vh; - overflow-y: auto; - position: fixed; - top: 0; - transition: all $transition-ease-out; - width: $sidebar-desktop; - z-index: $zindex-2; - - a { - border-bottom-color: $black-light; - color: $grey-dark; - - &:hover { - border-bottom-color: $gainsboro; - color: $gainsboro; - } - } -} - -.links-of-author { - &:not(:first-child) { - margin-top: 15px; - } - - a { - border-bottom-color: $black-light; - display: inline-block; - margin-bottom: 10px; - margin-right: 10px; - vertical-align: middle; - - if (hexo-config('social_icons.transition')) { - transition: all $transition-ease; - } - - &::before { - background: rgb(random-color(0, 255) - 50%, random-color(0, 255) - 50%, random-color(0, 255) - 50%); - display: inline-block; - margin-right: 3px; - transform: translateY(-2px); - round-icon(4px); - } - } -} - -.links-of-blogroll-item { - if (hexo-config('links_settings.layout') == 'inline') { - display: inline-block; - } - padding: 2px 10px; - - a { - box-sizing: border-box; - display: inline-block; - max-width: 280px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } -} - -.popular-posts .popular-posts-item .popular-posts-link:hover { - background: none; -} - -.sidebar-dimmer { - background: black; - height: 100%; - left: 0; - opacity: 0; - position: fixed; - top: 0; - transition: visibility .4s, opacity .4s; - visibility: hidden; - width: 100%; - z-index: $zindex-1; - - .sidebar-active & { - opacity: .7; - visibility: visible; - } -} - -+desktop-large() { - .sidebar-dimmer { - display: none; - } } diff --git a/source/css/_schemes/Pisces/_sidebar.styl b/source/css/_schemes/Pisces/_sidebar.styl index d5956e443..3a43a4c23 100644 --- a/source/css/_schemes/Pisces/_sidebar.styl +++ b/source/css/_schemes/Pisces/_sidebar.styl @@ -9,8 +9,9 @@ display: none; } } + .sidebar-toggle { - display: none; + display: none; } .sidebar-inner { @@ -91,140 +92,3 @@ } } } -+tablet-mobile() { - if (hexo-config('sidebar.position') == 'right') { - .sidebar-active { - // Note: $sidebar-desktop + $content-desktop-large should be less than desktop-large threshold - // Otherwise a horizontal scrollbar will appear - +desktop-large() { - padding-right: $sidebar-desktop; - - .footer-fixed { - right: $sidebar-desktop; - } - } - } - - .sidebar { - right: 0 - $sidebar-desktop; - - .sidebar-active & { - right: 0; - } - } - } else { - .sidebar-active { - +desktop-large() { - padding-left: $sidebar-desktop; - - .footer-fixed { - left: $sidebar-desktop; - } - } - } - - .sidebar { - left: 0 - $sidebar-desktop; - - .sidebar-active & { - left: 0; - } - } - } - - .sidebar { - background: $black-deep; - bottom: 0; - if (not hexo-config('back2top.sidebar')) { - box-shadow: inset 0 2px 6px black; - } - max-height: 100vh; - overflow-y: auto; - position: fixed; - top: 0; - transition: all $transition-ease-out; - width: $sidebar-desktop; - z-index: $zindex-2; - - a { - border-bottom-color: $black-light; - color: $grey-dark; - - &:hover { - border-bottom-color: $gainsboro; - color: $gainsboro; - } - } - } - - .links-of-author { - &:not(:first-child) { - margin-top: 15px; - } - - a { - border-bottom-color: $black-light; - display: inline-block; - margin-bottom: 10px; - margin-right: 10px; - vertical-align: middle; - - if (hexo-config('social_icons.transition')) { - transition: all $transition-ease; - } - - &::before { - background: rgb(random-color(0, 255) - 50%, random-color(0, 255) - 50%, random-color(0, 255) - 50%); - display: inline-block; - margin-right: 3px; - transform: translateY(-2px); - round-icon(4px); - } - } - } - - .links-of-blogroll-item { - if (hexo-config('links_settings.layout') == 'inline') { - display: inline-block; - } - padding: 2px 10px; - - a { - box-sizing: border-box; - display: inline-block; - max-width: 280px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - - .popular-posts .popular-posts-item .popular-posts-link:hover { - background: none; - } - - .sidebar-dimmer { - background: black; - height: 100%; - left: 0; - opacity: 0; - position: fixed; - top: 0; - transition: visibility .4s, opacity .4s; - visibility: hidden; - width: 100%; - z-index: $zindex-1; - - .sidebar-active & { - opacity: .7; - visibility: visible; - } - } - - +desktop-large() { - .sidebar-dimmer { - display: none; - } - } - -} \ No newline at end of file From 14def6736624620b4c2a8ab12d2d6085ff15e840 Mon Sep 17 00:00:00 2001 From: Mimi <1119186082@qq.com> Date: Fri, 26 Apr 2024 20:56:46 +0800 Subject: [PATCH 5/8] Fix eslint --- source/css/_variables/base.styl | 1 - source/js/schemes/muse.js | 2 -- source/js/sidebar.js | 2 +- 3 files changed, 1 insertion(+), 4 deletions(-) diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl index 03de1b293..f8312c5c0 100644 --- a/source/css/_variables/base.styl +++ b/source/css/_variables/base.styl @@ -283,7 +283,6 @@ $sidebar-toggle-padding = 5px; $sidebar-toggle-size = $sidebar-toggle-inner-size + $sidebar-toggle-padding * 2; $sidebar-toggle-position = hexo-config('sidebar.position') == 'left' ? 'left' : 'right'; - // .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; diff --git a/source/js/schemes/muse.js b/source/js/schemes/muse.js index 75bf06657..bdd9fc51e 100644 --- a/source/js/schemes/muse.js +++ b/source/js/schemes/muse.js @@ -1,5 +1,3 @@ -/* global CONFIG */ - document.addEventListener('DOMContentLoaded', () => { function updateFooterPosition() { diff --git a/source/js/sidebar.js b/source/js/sidebar.js index 1e82c5c80..6ab3c6b05 100644 --- a/source/js/sidebar.js +++ b/source/js/sidebar.js @@ -6,7 +6,7 @@ document.addEventListener('DOMContentLoaded', () => { const sidebarToggleMotion = { mouse: {}, - init: function() { + init : function() { window.addEventListener('mousedown', this.mousedownHandler.bind(this)); window.addEventListener('mouseup', this.mouseupHandler.bind(this)); document.querySelector('.sidebar-dimmer').addEventListener('click', this.clickHandler.bind(this)); From d927c23f63c8d000e32f9b3488307d9b2906e8e3 Mon Sep 17 00:00:00 2001 From: Mimi <1119186082@qq.com> Date: Fri, 26 Apr 2024 21:11:05 +0800 Subject: [PATCH 6/8] Rename --- source/css/_mixins.styl | 8 ++------ source/css/_variables/base.styl | 2 +- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/source/css/_mixins.styl b/source/css/_mixins.styl index e17ba3e2d..0ca778b61 100644 --- a/source/css/_mixins.styl +++ b/source/css/_mixins.styl @@ -134,13 +134,9 @@ main-container() { } } -sidebar-toggle-alignment($reverse) { - $condition = ($sidebar-toggle-position == 'right') == $reverse; - return $condition ? ('left' 'right') : ('right' 'left'); -} - sidebar-toggle-position($reverse) { - $alignment = sidebar-toggle-alignment($reverse)[0]; + $condition = ($sidebar-toggle-alignment == 'right') == $reverse; + $alignment = $condition ? 'left' : 'right'; {$alignment}: $b2t-position-right; +tablet-mobile() { {$alignment}: $b2t-position-right-mobile; diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl index f8312c5c0..7b41f02e5 100644 --- a/source/css/_variables/base.styl +++ b/source/css/_variables/base.styl @@ -281,7 +281,7 @@ $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; -$sidebar-toggle-position = hexo-config('sidebar.position') == 'left' ? 'left' : 'right'; +$sidebar-toggle-alignment = hexo-config('sidebar.position') == 'left' ? 'left' : 'right'; // .post-expand .post-eof // In Muse scheme, margin above and below the post separator From 77f0efbc7233874b7f36f7ae9adb3f86ef06fa99 Mon Sep 17 00:00:00 2001 From: Mimi <1119186082@qq.com> Date: Fri, 26 Apr 2024 21:32:33 +0800 Subject: [PATCH 7/8] Fix sidebar-width --- source/css/_common/outline/sidebar/index.styl | 6 +++--- source/css/_schemes/Muse/_sidebar.styl | 10 +++++----- source/css/_schemes/Pisces/_header.styl | 2 +- source/css/_schemes/Pisces/_layout.styl | 4 ++-- source/css/_variables/Muse.styl | 2 +- source/css/_variables/Pisces.styl | 3 ++- 6 files changed, 14 insertions(+), 13 deletions(-) diff --git a/source/css/_common/outline/sidebar/index.styl b/source/css/_common/outline/sidebar/index.styl index e769720e9..34288a3b1 100644 --- a/source/css/_common/outline/sidebar/index.styl +++ b/source/css/_common/outline/sidebar/index.styl @@ -1,7 +1,7 @@ +sidebar() { if (hexo-config('sidebar.position') == 'right') { .sidebar { - right: 0 - $sidebar-desktop; + right: 0 - $sidebar-width-expanded; .sidebar-active & { right: 0; @@ -9,7 +9,7 @@ } } else { .sidebar { - left: 0 - $sidebar-desktop; + left: 0 - $sidebar-width-expanded; .sidebar-active & { left: 0; @@ -28,7 +28,7 @@ position: fixed; top: 0; transition: all $transition-ease-out; - width: $sidebar-desktop; + width: $sidebar-width-expanded; z-index: $zindex-2; a { diff --git a/source/css/_schemes/Muse/_sidebar.styl b/source/css/_schemes/Muse/_sidebar.styl index 38f940254..befff2da5 100644 --- a/source/css/_schemes/Muse/_sidebar.styl +++ b/source/css/_schemes/Muse/_sidebar.styl @@ -4,19 +4,19 @@ } .sidebar-active { - // Note: $sidebar-desktop + $content-desktop-large should be less than desktop-large threshold + // Note: $sidebar-width-expanded + $content-desktop-large should be less than desktop-large threshold // Otherwise a horizontal scrollbar will appear if (hexo-config('sidebar.position') == 'right') { - padding-right: $sidebar-desktop; + padding-right: $sidebar-width-expanded; .footer-fixed { - right: $sidebar-desktop; + right: $sidebar-width-expanded; } } else { - padding-left: $sidebar-desktop; + padding-left: $sidebar-width-expanded; .footer-fixed { - left: $sidebar-desktop; + left: $sidebar-width-expanded; } } } diff --git a/source/css/_schemes/Pisces/_header.styl b/source/css/_schemes/Pisces/_header.styl index 67168861c..443bcb394 100644 --- a/source/css/_schemes/Pisces/_header.styl +++ b/source/css/_schemes/Pisces/_header.styl @@ -1,5 +1,5 @@ .column { - width: $sidebar-desktop; + width: $sidebar-width-dual-column; +tablet-mobile() { width: auto; diff --git a/source/css/_schemes/Pisces/_layout.styl b/source/css/_schemes/Pisces/_layout.styl index 2d74dc77e..28293efa6 100644 --- a/source/css/_schemes/Pisces/_layout.styl +++ b/source/css/_schemes/Pisces/_layout.styl @@ -37,9 +37,9 @@ header.header { .footer-inner { if (hexo-config('sidebar.position') == 'right') { - padding-right: $sidebar-desktop + $sidebar-offset; + padding-right: $sidebar-width-dual-column + $sidebar-offset; } else { - padding-left: $sidebar-desktop + $sidebar-offset; + padding-left: $sidebar-width-dual-column + $sidebar-offset; } +tablet-mobile() { diff --git a/source/css/_variables/Muse.styl b/source/css/_variables/Muse.styl index b63b6975d..e3fe8b489 100644 --- a/source/css/_variables/Muse.styl +++ b/source/css/_variables/Muse.styl @@ -2,7 +2,7 @@ // ================================================== $sidebar-width = hexo-config('sidebar.width') is a 'unit' ? hexo-config('sidebar.width') : 320; -$sidebar-desktop = unit($sidebar-width, 'px'); +$sidebar-width-expanded = unit($sidebar-width, 'px'); $content-padding-bottom = 60px; $posts-first-padding = 70px; diff --git a/source/css/_variables/Pisces.styl b/source/css/_variables/Pisces.styl index 34b84f869..79485530a 100644 --- a/source/css/_variables/Pisces.styl +++ b/source/css/_variables/Pisces.styl @@ -6,7 +6,8 @@ $body-bg-color = #f5f7f9; $sidebar-width = hexo-config('sidebar.width') is a 'unit' ? hexo-config('sidebar.width') : 240; -$sidebar-desktop = unit($sidebar-width, 'px'); +$sidebar-width-dual-column = unit($sidebar-width, 'px'); +$sidebar-width-expanded = 320px; $content-wrap = 'calc(100% - %s)' % unit($sidebar-width + $sidebar-offset, 'px'); $content-desktop = 'calc(100% - %s)' % unit($content-desktop-padding / 2, 'px'); From 908ebc440f7cb346113e8583a0c07b2dea0f21f7 Mon Sep 17 00:00:00 2001 From: Mimi <1119186082@qq.com> Date: Fri, 26 Apr 2024 22:01:38 +0800 Subject: [PATCH 8/8] Update variable name --- _config.yml | 16 +++++++++------- source/css/_common/outline/sidebar/index.styl | 2 +- .../_common/outline/sidebar/sidebar-toggle.styl | 4 ++-- source/css/_common/scaffolding/toggles.styl | 4 ++-- source/css/_schemes/Muse/_sidebar.styl | 2 +- source/css/_schemes/Pisces/_layout.styl | 4 ++-- source/css/_variables/Muse.styl | 3 --- source/css/_variables/Pisces.styl | 3 +-- source/css/_variables/base.styl | 2 ++ 9 files changed, 20 insertions(+), 20 deletions(-) diff --git a/_config.yml b/_config.yml index 3e8c96c70..a4f27bf6f 100644 --- a/_config.yml +++ b/_config.yml @@ -117,16 +117,18 @@ menu_settings: # --------------------------------------------------------------- sidebar: - # Sidebar Position. + # Sidebar position. Available values: left | right position: left - #position: right - # Manual define the sidebar width. If commented, will be default for: - # Muse | Mist: 320 - # Pisces | Gemini: 240 - #width: 300 + # Sidebar width. + # Applicable to Muse | Mist and mobile of Pisces | Gemini. + width_expanded: 320 + # Applicable to desktop of Pisces | Gemini. + width_dual_column: 240 - # Sidebar Display (only for Muse | Mist), available values: + # Sidebar display. + # Applicable to Muse | Mist and mobile of Pisces | Gemini. + # Available values: # - post expand on posts automatically. Default. # - always expand for all pages automatically. # - hide expand only when click on the sidebar toggle icon. diff --git a/source/css/_common/outline/sidebar/index.styl b/source/css/_common/outline/sidebar/index.styl index 34288a3b1..682cee479 100644 --- a/source/css/_common/outline/sidebar/index.styl +++ b/source/css/_common/outline/sidebar/index.styl @@ -1,5 +1,5 @@ +sidebar() { - if (hexo-config('sidebar.position') == 'right') { + if ($sidebar-toggle-alignment == 'right') { .sidebar { right: 0 - $sidebar-width-expanded; diff --git a/source/css/_common/outline/sidebar/sidebar-toggle.styl b/source/css/_common/outline/sidebar/sidebar-toggle.styl index 0b19b89f3..2b5273d6e 100644 --- a/source/css/_common/outline/sidebar/sidebar-toggle.styl +++ b/source/css/_common/outline/sidebar/sidebar-toggle.styl @@ -12,10 +12,10 @@ @media (any-hover: hover) { body:not(.sidebar-active) .sidebar-toggle:hover { - toggle-arrow(hexo-config('sidebar.position')); + toggle-arrow($sidebar-toggle-alignment); } } .sidebar-active .sidebar-toggle { - toggle-close(hexo-config('sidebar.position')); + toggle-close($sidebar-toggle-alignment); } diff --git a/source/css/_common/scaffolding/toggles.styl b/source/css/_common/scaffolding/toggles.styl index 163bd9e48..96fe4606c 100644 --- a/source/css/_common/scaffolding/toggles.styl +++ b/source/css/_common/scaffolding/toggles.styl @@ -22,9 +22,9 @@ } .toggle.toggle-arrow { - toggle-arrow(hexo-config('sidebar.position')); + toggle-arrow($sidebar-toggle-alignment); } .toggle.toggle-close { - toggle-close(hexo-config('sidebar.position')); + toggle-close($sidebar-toggle-alignment); } diff --git a/source/css/_schemes/Muse/_sidebar.styl b/source/css/_schemes/Muse/_sidebar.styl index befff2da5..655625967 100644 --- a/source/css/_schemes/Muse/_sidebar.styl +++ b/source/css/_schemes/Muse/_sidebar.styl @@ -6,7 +6,7 @@ .sidebar-active { // Note: $sidebar-width-expanded + $content-desktop-large should be less than desktop-large threshold // Otherwise a horizontal scrollbar will appear - if (hexo-config('sidebar.position') == 'right') { + if ($sidebar-toggle-alignment == 'right') { padding-right: $sidebar-width-expanded; .footer-fixed { diff --git a/source/css/_schemes/Pisces/_layout.styl b/source/css/_schemes/Pisces/_layout.styl index 28293efa6..451fc2380 100644 --- a/source/css/_schemes/Pisces/_layout.styl +++ b/source/css/_schemes/Pisces/_layout.styl @@ -14,7 +14,7 @@ header.header { justify-content: space-between; main-container(); - if (hexo-config('sidebar.position') == 'right') { + if ($sidebar-toggle-alignment == 'right') { flex-direction: row-reverse; } @@ -36,7 +36,7 @@ header.header { } .footer-inner { - if (hexo-config('sidebar.position') == 'right') { + if ($sidebar-toggle-alignment == 'right') { padding-right: $sidebar-width-dual-column + $sidebar-offset; } else { padding-left: $sidebar-width-dual-column + $sidebar-offset; diff --git a/source/css/_variables/Muse.styl b/source/css/_variables/Muse.styl index e3fe8b489..190b7cd9b 100644 --- a/source/css/_variables/Muse.styl +++ b/source/css/_variables/Muse.styl @@ -1,9 +1,6 @@ // Variables of Muse scheme // ================================================== -$sidebar-width = hexo-config('sidebar.width') is a 'unit' ? hexo-config('sidebar.width') : 320; -$sidebar-width-expanded = unit($sidebar-width, 'px'); - $content-padding-bottom = 60px; $posts-first-padding = 70px; $posts-first-padding-mobile = 35px; diff --git a/source/css/_variables/Pisces.styl b/source/css/_variables/Pisces.styl index 79485530a..99b55143e 100644 --- a/source/css/_variables/Pisces.styl +++ b/source/css/_variables/Pisces.styl @@ -5,9 +5,8 @@ // -------------------------------------------------- $body-bg-color = #f5f7f9; -$sidebar-width = hexo-config('sidebar.width') is a 'unit' ? hexo-config('sidebar.width') : 240; +$sidebar-width = hexo-config('sidebar.width_dual_column') is a 'unit' ? hexo-config('sidebar.width_dual_column') : 240; $sidebar-width-dual-column = unit($sidebar-width, 'px'); -$sidebar-width-expanded = 320px; $content-wrap = 'calc(100% - %s)' % unit($sidebar-width + $sidebar-offset, 'px'); $content-desktop = 'calc(100% - %s)' % unit($content-desktop-padding / 2, 'px'); diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl index 7b41f02e5..4562c091a 100644 --- a/source/css/_variables/base.styl +++ b/source/css/_variables/base.styl @@ -242,6 +242,8 @@ $tag-cloud-end-dark = #eee; // Variables for sidebar section elements. // -------------------------------------------------- +$sidebar-width = hexo-config('sidebar.width_expanded') is a 'unit' ? hexo-config('sidebar.width_expanded') : 320; +$sidebar-width-expanded = unit($sidebar-width, 'px'); $sidebar-padding = hexo-config('sidebar.padding') is a 'unit' ? unit(hexo-config('sidebar.padding'), px) : 18px; $sidebar-offset = hexo-config('sidebar.offset') is a 'unit' ? unit(hexo-config('sidebar.offset'), px) : 12px; $sidebar-nav-color = $grey-dim;