refactor: adjust css

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))

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 =>

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) {