Wider max width layout

src/Elastic.Markdown/Assets/markdown/code.css

@@ -10,6 +10,7 @@
 			background-color: #22272e;
 			mix-blend-mode: unset;
 			line-height: 1.5em;
+			word-break: normal;
 		}
 		code:first-child {
 			@apply rounded-t-sm;
@@ -63,6 +64,7 @@
 		text-decoration: inherit;
 		font-weight: inherit;
 		mix-blend-mode: multiply;
+		word-break: break-word;
 	}
 
 	.hljs-built_in,

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: 1920px;
 }
 
 @media screen and (min-width: 767px) {
@@ -97,10 +98,6 @@
 		}
 	}
 
-	.content-container {
-		@apply w-full max-w-[80ch];
-	}
-
 	.applies {
 		@apply font-sans;
 		border-bottom: 1px solid var(--color-grey-20);
@@ -233,12 +230,31 @@
 
 .container {
 	@apply lg:px-3;
-
 	max-width: 1250px !important;
 }
 
 #elastic-nav {
 	min-height: var(--offset-top);
+
+	@media screen and (min-width: 1200px) {
+		.oldNav {
+			& > div {
+				width: 100%;
+				max-width: var(--max-layout-width);
+			}
+			div:has(> div > nav) {
+				flex-grow: 1;
+				justify-content: center;
+			}
+		}
+	}
+	@media screen and (min-width: 1536px) {
+		.oldNav {
+			nav {
+				margin-left: -74px;
+			}
+		}
+	}
 }
 
 body {

src/Elastic.Markdown/Assets/theme.css

@@ -2,8 +2,8 @@
 	--breakpoint-sm: 640px;
 	--breakpoint-md: 768px;
 	--breakpoint-lg: 1280px;
-	--breakpoint-xl: 1920px;
-	--breakpoint-2xl: 2000px;
+	--breakpoint-xl: 1536px;
+	--breakpoint-2xl: 1920px;
 
 	--font-sans:
 		'Mier B', 'Inter', ui-sans-serif, system-ui, sans-serif,

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

@@ -8,19 +8,17 @@
 else
 {
 	<header class="sticky top-0 z-50 bg-blue-developer text-white text-lg font-semibold h-(--offset-top) flex items-center px-6">
-		<div class="container mx-auto">
-			<div class="flex justify-between items-center">
-				@* ReSharper disable once Html.IdNotResolved *@
-				<label role="button" class="md:hidden cursor-pointer" for="pages-nav-hamburger">
-					<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8">
-						<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"/>
-					</svg>
-				</label>
-				<a href="@Model.Link("/")" class="flex items-center gap-2">
-					<img src="@Model.Static("logo-elastic-glyph-color.svg")" alt="" width="32" height="32">
-					@Model.DocSetName
-				</a>
-			</div>
+		<div class="flex justify-between items-center">
+			@* ReSharper disable once Html.IdNotResolved *@
+			<label role="button" class="md:hidden cursor-pointer" for="pages-nav-hamburger">
+				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-8">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12"/>
+				</svg>
+			</label>
+			<a href="@Model.Link("/")" class="flex items-center gap-2">
+				<img src="@Model.Static("logo-elastic-glyph-color.svg")" alt="" width="32" height="32">
+				@Model.DocSetName
+			</a>
 		</div>
 	</header>
 }

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

@@ -1,6 +1,6 @@
 @using Elastic.Markdown.Helpers
 @inherits RazorSlice<LayoutViewModel>
-<footer id="prev-next-nav" class="content-container mt-20 px-6">
+<footer id="prev-next-nav" class="content-container mt-20 px-4">
 	<div class="flex flex-wrap lg:flex-nowrap gap-2 mt-2">
 		<div class="w-full">
 			@if (Model.Previous != null)

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="container 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/_TableOfContents.cshtml

@@ -1,6 +1,6 @@
 @using Elastic.Markdown.Helpers;
 @inherits RazorSlice<LayoutViewModel>
-<aside class="sidebar hidden lg:block order-3">
+<aside class="sidebar hidden lg:block order-2 max-w-65">
 	<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,25 +23,27 @@
 
 		private async Task DefaultLayout()
 		{
-			<div class="container h-full grid gap-2 grid-cols-1 md:grid-cols-[calc(var(--spacing)*65)_1fr] lg:grid-cols-[calc(var(--spacing)*65)_1fr_calc(var(--spacing)*50)] 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))
-				@await RenderPartialAsync(_TableOfContents.Create(Model))
-				<main id="content-container" class="w-full flex flex-col order-2 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>
+				<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="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>
+							</div>
+							<div class="sr-only">Loading</div>
 						</div>
-						<div class="sr-only">Loading</div>
-					</div>
-					<div class="content-container md:px-4">
-						@await RenderPartialAsync(_Breadcrumbs.Create(Model))
-					</div>
-					<article id="markdown-content" class="content-container markdown-content md:px-4">
-						<input type="checkbox" class="hidden" id="pages-nav-hamburger">
-						@await RenderBodyAsync()
-					</article>
-					@await RenderPartialAsync(_PrevNextNav.Create(Model))
-				</main>
+						<div class="content-container md:px-4">
+							@await RenderPartialAsync(_Breadcrumbs.Create(Model))
+						</div>
+						<article id="markdown-content" class="content-container markdown-content md:px-4">
+							<input type="checkbox" class="hidden" id="pages-nav-hamburger">
+							@await RenderBodyAsync()
+						</article>
+						@await RenderPartialAsync(_PrevNextNav.Create(Model))
+					</main>
+				</div>
 			</div>
 		}