Fix body.sidebar-active content width

This commit is contained in:
Mimi 2022-11-11 20:14:07 +08:00
parent c90f82ef4f
commit 0e79d308ed
3 changed files with 28 additions and 25 deletions

View File

@ -1,6 +1,8 @@
if (hexo-config('sidebar.position') == 'right') { if (hexo-config('sidebar.position') == 'right') {
.sidebar-active { .sidebar-active {
+desktop() { // Note: $sidebar-desktop + $content-desktop-large should be greater than desktop-large threshold
// Otherwise a horizontal scrollbar will appear
+desktop-large() {
padding-right: $sidebar-desktop; padding-right: $sidebar-desktop;
} }
} }
@ -14,7 +16,7 @@ if (hexo-config('sidebar.position') == 'right') {
} }
} else { } else {
.sidebar-active { .sidebar-active {
+desktop() { +desktop-large() {
padding-left: $sidebar-desktop; padding-left: $sidebar-desktop;
} }
} }
@ -94,26 +96,25 @@ if (hexo-config('sidebar.position') == 'right') {
} }
.sidebar-dimmer { .sidebar-dimmer {
display: none; 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;
+tablet-mobile() { .sidebar-active & {
.sidebar-dimmer { opacity: .7;
background: black; visibility: visible;
display: block; }
height: 100%; }
left: 0;
opacity: 0; +desktop-large() {
position: fixed; .sidebar-dimmer {
top: 0; display: none;
transition: visibility .4s, opacity .4s;
visibility: hidden;
width: 100%;
z-index: $zindex-1;
.sidebar-active & {
opacity: .7;
visibility: visible;
}
} }
} }

View File

@ -1,3 +1,5 @@
@import '_variables/base';
body { margin-top: 2rem; } body { margin-top: 2rem; }
.use-motion .menu-item, .use-motion .menu-item,
@ -30,7 +32,7 @@ body { margin-top: 2rem; }
.sidebar-panel { display: block; } .sidebar-panel { display: block; }
.noscript-warning { .noscript-warning {
background-color: #f55; background-color: lighten($red, 20%);
color: white; color: white;
font-family: sans-serif; font-family: sans-serif;
font-size: 1rem; font-size: 1rem;
@ -40,5 +42,5 @@ body { margin-top: 2rem; }
text-align: center; text-align: center;
top: 0; top: 0;
width: 100%; width: 100%;
z-index: 50; z-index: $zindex-5;
} }

View File

@ -286,7 +286,7 @@ NexT.utils = {
}, },
updateSidebarPosition: function() { updateSidebarPosition: function() {
if (window.innerWidth < 992 || CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') return; if (window.innerWidth < 1200 || CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') return;
// Expand sidebar on post detail page by default, when post has a toc. // Expand sidebar on post detail page by default, when post has a toc.
const hasTOC = document.querySelector('.post-toc'); const hasTOC = document.querySelector('.post-toc');
let display = CONFIG.page.sidebar; let display = CONFIG.page.sidebar;