Full width layout PoC

Author: reakaleek

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

@@ -47,6 +47,10 @@
 		@apply mt-4;
 		line-height: 1.5em;
 	}
+	
+	#elastic-docs-v3>p {
+		max-width: 80ch;
+	}
 
 	a {
 		@apply font-body text-blue-elastic hover:text-blue-elastic-100 underline;

src/Elastic.Markdown/Assets/styles.css

@@ -98,8 +98,8 @@
 	}
 
 	.content-container {
-		@apply w-full max-w-[80ch];
-	}
+		/*@apply w-full max-w-[90ch];*/
+	}	
 
 	.applies {
 		@apply font-sans;
@@ -239,6 +239,15 @@
 
 #elastic-nav {
 	min-height: var(--offset-top);
+	.oldNav {
+		&>div {
+			max-width: 100%;
+		}
+		div:has(> div > nav) {
+			flex-grow: 1;
+			justify-content: center;
+		}
+	}
 }
 
 body {

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

@@ -2,7 +2,7 @@
 @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">
+	<div class="flex mx-auto justify-between items-center">
 		<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">
 	<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="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-[95ch_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>
 		}