diff --git a/source/css/common/code-block/code-block.styl b/source/css/common/code-block/code-block.styl index feba4d1..00fea68 100644 --- a/source/css/common/code-block/code-block.styl +++ b/source/css/common/code-block/code-block.styl @@ -124,5 +124,4 @@ height 0 } } - } diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl index da7fb07..70e3d1e 100644 --- a/source/css/layout/page.styl +++ b/source/css/layout/page.styl @@ -137,7 +137,7 @@ top $header-height + $component-spacing-value left 'calc((100vw - %s / 2) - 5rem)' % $content-max-width opacity 0 - transition-t("top, transform, opacity", "0, 0, 0.2", "0.2, 0.2, 0.2", "ease, ease, ease") + transition-t("top, transform, opacity, left", "0, 0, 0.2, 0", "0.2, 0.2, 0.2, 0.2", "ease, ease, ease, ease") .header-shrink & { top $header-shrink-height + $component-spacing-value diff --git a/source/js/post-helper.js b/source/js/post-helper.js index 412927e..5a98f77 100644 --- a/source/js/post-helper.js +++ b/source/js/post-helper.js @@ -29,6 +29,10 @@ function initToggleShowToc() { this.postPageContainerDom.classList.remove('show-toc') document.body.classList.remove('has-toc') } + + setTimeout(() => { + this.setPostToolsLeft() + }, 120) }, hasToc(isOpen) { @@ -37,17 +41,18 @@ function initToggleShowToc() { this.handleToggleToc(isOpen) }, - setPostToolsLeft() { - const winWidth = window.innerWidth - const mcWidth = this.mainContentDom.getBoundingClientRect().width.toFixed(0) + setPostToolsLeft(mcw) { + const mainContainerWidth = mcw + ? mcw + : this.mainContentDom.getBoundingClientRect().width.toFixed(0) let offsetX = 5 - if (winWidth <= 800) { + if (window.innerWidth <= 800) { offsetX = 3 } this.postToolsDom.style.opacity = `1` - this.postToolsDom.style.left = `calc((100vw - ${mcWidth}px) / 2 - ${offsetX}rem)` + this.postToolsDom.style.left = `calc((100vw - ${mainContainerWidth}px) / 2 - ${offsetX}rem)` }, initSetPostToolsLeft() {