Fix scroll-margin-top (#678)

Author: reakaleek

src/Elastic.Markdown/Assets/styles.css

@@ -19,7 +19,7 @@
 	--outline-offset: 5;
 	--header-height: calc(var(--spacing) * 21);
 	--banner-height: calc(var(--spacing) * 9);
-	--offset-height: calc(var(--header-height) + var(--banner-height));
+	--offset-top: calc(var(--header-height) + var(--banner-height));
 }
 
 /*#default-search::-webkit-search-cancel-button {*/
@@ -83,8 +83,8 @@
 
 	.sidebar {
 		.sidebar-nav {
-			@apply sticky top-(--offset-height) z-30 overflow-y-auto;
-			max-height: calc(100vh - var(--offset-height));
+			@apply sticky top-(--offset-top) z-30 overflow-y-auto;
+			max-height: calc(100vh - var(--offset-top));
 			scrollbar-gutter: stable;
 		}
 
@@ -130,7 +130,7 @@
 }
 
 * {
-	scroll-margin-top: calc(var(--spacing) * 26);
+	scroll-margin-top: calc(var(--offset-top) + var(--spacing) * 6);
 }
 
 

src/Elastic.Markdown/Slices/Layout/_PagesNav.cshtml

@@ -1,5 +1,5 @@
 @inherits RazorSlice<LayoutViewModel>
-<aside class="sidebar bg-white fixed lg:sticky shadow-2xl lg:shadow-none left-[100%] group-has-[#pages-nav-hamburger:checked]/body:left-0 bottom-0 lg:left-auto pl-6 lg:pl-0 top-[calc(var(--offset-height)+1px)]  order-1 w-[80%] lg:w-70 xl:w-80 shrink-0 border-r-1 border-r-grey-20 z-40 lg:z-auto">
+<aside class="sidebar bg-white fixed lg:sticky shadow-2xl lg:shadow-none left-[100%] group-has-[#pages-nav-hamburger:checked]/body:left-0 bottom-0 lg:left-auto pl-6 lg:pl-0 top-[calc(var(--offset-top)+1px)]  order-1 w-[80%] lg:w-70 xl:w-80 shrink-0 border-r-1 border-r-grey-20 z-40 lg:z-auto">
 	<nav
 		id="pages-nav"
 		class="sidebar-nav pr-6"

src/Elastic.Markdown/Slices/Layout/_PrimaryNav.cshtml

@@ -1,6 +1,6 @@
 @inherits RazorSlice<PrimaryNavViewModel>
 <div class="grow xl:hidden"></div>
-<nav class="hidden group-has-[#primary-nav-hamburger:checked]/header:block z-40 overflow-y-scroll xl:overflow-y-visible lg:p-6 pb-12 xl:p-0 fixed xl:static top-[calc(var(--offset-height)+1px)] left-0 right-0 bottom-0 xl:block grow bg-white" id="primary-nav">
+<nav class="hidden group-has-[#primary-nav-hamburger:checked]/header:block z-40 overflow-y-scroll xl:overflow-y-visible lg:p-6 pb-12 xl:p-0 fixed xl:static top-[calc(var(--offset-top)+1px)] left-0 right-0 bottom-0 xl:block grow bg-white" id="primary-nav">
 	<div class="container xl:w-full mx-auto xl:mx-0">
 		<ul class="flex flex-col xl:flex-row xl:items-center justify-start xl:h-full text-ink font-sans xl:gap-6">
 			@foreach (var navItem in Model.Items)