Limited max width PoC

Author: reakaleek

src/Elastic.Markdown/Assets/styles.css

@@ -24,6 +24,7 @@
 	--banner-height: calc(var(--spacing) * 9);
 	/*--offset-top: calc(var(--header-height) + var(--banner-height));*/
 	--offset-top: 72px;
+	--max-layout-width: 1800px;
 }
 
 @media screen and (min-width: 767px) {
@@ -238,7 +239,8 @@
 	@media screen and (min-width: 1200px) {
 		.oldNav {
 			& > div {
-				max-width: 100%;
+				width: 100%;
+				max-width: var(--max-layout-width);
 			}
 			div:has(> div > nav) {
 				flex-grow: 1;

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

@@ -1,8 +1,8 @@
 @using Elastic.Markdown.Helpers
 @using Elastic.Markdown.Myst.FrontMatter
 @inherits RazorSlice<LayoutViewModel>
-<nav id="secondary-nav" class="bg-grey-10 border-t-1 border-grey-20 font-sans font-semibold text-sm text-ink-light md:text-base p-6">
-	<div class="flex mx-auto justify-between items-center">
+<nav id="secondary-nav" class="bg-grey-10 border-t-1 border-grey-20 font-sans font-semibold text-sm text-ink-light md:text-base">
+	<div class="max-w-(--max-layout-width) flex mx-auto justify-between items-center p-6">
 		<div class="flex gap-2 flex-nowrap items-center">
 			@if (Model.CurrentDocument.YamlFrontMatter?.Layout != LayoutName.LandingPage)
 			{

src/Elastic.Markdown/Slices/_Layout.cshtml

@@ -23,7 +23,7 @@
 
 		private async Task DefaultLayout()
 		{
-			<div class="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 grid-cols-1 md:grid-cols-[calc(var(--spacing)*65)_1fr] px-6">
 				@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))