diff --git a/src/components/widget/TOC.astro b/src/components/widget/TOC.astro index 1ef6e5fe..4fabe9fc 100644 --- a/src/components/widget/TOC.astro +++ b/src/components/widget/TOC.astro @@ -51,10 +51,10 @@ const maxLevel = siteConfig.toc.depth; ---
{headings.filter((heading) => heading.depth < minDepth + maxLevel).map((heading) => - -
))} + + + - @@ -138,8 +151,6 @@ const bannerOffset = - - :root { --hue: var(--configHue); - --page-width: 75rem; } @@ -210,7 +220,8 @@ import { BANNER_HEIGHT, BANNER_HEIGHT_HOME, BANNER_HEIGHT_EXTEND, - MAIN_PANEL_OVERLAPS_BANNER_HEIGHT + MAIN_PANEL_OVERLAPS_BANNER_HEIGHT, + PAGE_WIDTH } from "../constants/constants"; /* Preload fonts */ @@ -463,11 +474,17 @@ function scrollFunction() { } window.onscroll = scrollFunction -// calculate the --banner-height-extend, which needs to be a multiple of 4 to avoid blurry text window.onresize = () => { + // calculate the --banner-height-extend, which needs to be a multiple of 4 to avoid blurry text let offset = Math.floor(window.innerHeight * (BANNER_HEIGHT_EXTEND / 100)); offset = offset - offset % 4; document.documentElement.style.setProperty('--banner-height-extend', `${offset}px`); + + // calculate the width of TOC widget + const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) + const mainGridWidthPx = PAGE_WIDTH * rootFontSize + const tocWidth = (window.innerWidth - mainGridWidthPx) / 2 - rootFontSize + document.documentElement.style.setProperty('--toc-width', `${tocWidth}px`); } diff --git a/src/layouts/MainGridLayout.astro b/src/layouts/MainGridLayout.astro index 354855d9..189a9a69 100644 --- a/src/layouts/MainGridLayout.astro +++ b/src/layouts/MainGridLayout.astro @@ -93,8 +93,8 @@ const mainPanelTop = siteConfig.banner.enable ? `calc(${BANNER_HEIGHT}vh - ${MAI
- {siteConfig.toc.enable &&
-
+ {siteConfig.toc.enable &&
+