Dynamic spacing for max-width layout

Author: Mpdreamz

src/Elastic.Markdown/Assets/styles.css

@@ -24,7 +24,9 @@
 	--banner-height: calc(var(--spacing) * 9);
 	/*--offset-top: calc(var(--header-height) + var(--banner-height));*/
 	--offset-top: 72px;
-	--max-layout-width: 1920px;
+	--max-layout-width: 1450px;
+	--max-sidebar-width: calc(var(--spacing) * 65);
+	--max-content-width: calc(var(--max-layout-width) - (var(--max-sidebar-width) * 2))
 }
 
 @media screen and (min-width: 767px) {

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

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

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

@@ -1,6 +1,6 @@
 @using Elastic.Markdown.Helpers;
 @inherits RazorSlice<LayoutViewModel>
-<aside class="sidebar hidden lg:block order-2 max-w-65">
+<aside class="sidebar hidden lg:block max-w-65 md:hidden" >
 	<nav id="toc-nav" class="sidebar-nav">
 		<div id="page-version-dropdown" tabindex="1"
 		     class="mt-6 block group font-sans text-sm relative z-50">

src/Elastic.Markdown/Slices/_Layout.cshtml

@@ -23,11 +23,15 @@
 
 		private async Task DefaultLayout()
 		{
-			<div class="max-w-(--max-layout-width) w-full h-full grid grid-cols-1 md:grid-cols-[calc(var(--spacing)*65)_1fr] px-6">
+			<div class="max-w-(--max-layout-width) w-full h-full grid px-6
+					grid-cols-1
+					md:grid-cols-[var(--max-sidebar-width)_1fr]
+					lg:grid-cols-[var(--max-sidebar-width)_1fr_var(--max-sidebar-width)]
+				">
 				@await RenderPartialAsync(_PagesNav.Create(Model))
-				<div class="order-2 grid grid-cols-1 md:grid-cols-[clamp(40ch,80ch,100%)] lg:grid-cols-[80ch_1fr] xl:grid-cols-[90ch_calc(var(--spacing)*65)] justify-center">
-					@await RenderPartialAsync(_TableOfContents.Create(Model))
-					<main id="content-container" class="w-full flex flex-col order-1 relative pb-30 overflow-x-hidden">
+				<div class="justify-center grid grid-cols-[1fr_clamp(40ch,80ch,100%)_1fr]">
+					<div class="spacer"></div>
+					<main id="content-container" class="w-full flex flex-col relative pb-30 overflow-x-hidden">
 						<div class="w-full absolute top-0 left-0 right-0 htmx-indicator" id="htmx-indicator" role="status">
 							<div class="h-[2px] w-full overflow-hidden">
 								<div class="progress w-full h-full bg-pink-70 left-right"></div>
@@ -43,7 +47,9 @@
 						</article>
 						@await RenderPartialAsync(_PrevNextNav.Create(Model))
 					</main>
+					<div class="spacer"></div>
 				</div>
+				@await RenderPartialAsync(_TableOfContents.Create(Model))
 			</div>
 		}