From f180083219741e369bb33d6767baa7a540f2c030 Mon Sep 17 00:00:00 2001 From: Evan You Date: Fri, 6 Nov 2020 18:56:05 -0500 Subject: [PATCH] refactor: adjust css --- src/client/app/router.ts | 3 ++- src/client/theme-default/composables/activeSidebarLink.ts | 3 ++- src/client/theme-default/styles/layout.css | 4 ++-- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/client/app/router.ts b/src/client/app/router.ts index a52f37c7..9212efb7 100644 --- a/src/client/app/router.ts +++ b/src/client/app/router.ts @@ -170,7 +170,8 @@ export function useRoute(): Route { } function scrollTo(el: HTMLElement, hash: string, smooth = false) { - const pageOffset = document.getElementById('app')!.offsetTop + const pageOffset = (document.querySelector('.navbar') as HTMLElement) + .offsetHeight const target = el.classList.contains('.header-anchor') ? el : document.querySelector(decodeURIComponent(hash)) diff --git a/src/client/theme-default/composables/activeSidebarLink.ts b/src/client/theme-default/composables/activeSidebarLink.ts index bae901da..2af89ed3 100644 --- a/src/client/theme-default/composables/activeSidebarLink.ts +++ b/src/client/theme-default/composables/activeSidebarLink.ts @@ -36,7 +36,8 @@ export function useActiveSidebarLinks() { sidebarLinks.some((sidebarLink) => sidebarLink.hash === anchor.hash) ) as HTMLAnchorElement[] - const pageOffset = document.getElementById('app')!.offsetTop + const pageOffset = (document.querySelector('.navbar') as HTMLElement) + .offsetHeight const scrollTop = window.scrollY const getAnchorTop = (anchor: HTMLAnchorElement): number => diff --git a/src/client/theme-default/styles/layout.css b/src/client/theme-default/styles/layout.css index ff76131d..040ba2de 100644 --- a/src/client/theme-default/styles/layout.css +++ b/src/client/theme-default/styles/layout.css @@ -95,8 +95,8 @@ body { } .theme main { - margin-top: var(--header-height); - margin-left: var(--sidebar-width); + padding-top: var(--header-height); + padding-left: var(--sidebar-width); } @media screen and (min-width: 720px) {