Dynamic max-width based on 90ch width for the content (#1197)

* Full width layout PoC

* Also set max width for other elements

* Fixes and fine-tuning

* Cleanup

* Fix isolated build header position

* Formatting

* Prettier

* Limited max width PoC

* Use common resolution width

* Dynamic spacing for max-width layout

* ensure margins are dynamic again

* fix css lint

* Slight on this page margin adjustments (#1198)

* feature/limited width layout 4 (#1201)

* fixate max-width around max content-width

* npm fix lint

* Update src/Elastic.Markdown/Slices/_Layout.cshtml

Co-authored-by: Jan Calanog <[email protected]>

---------

Co-authored-by: Jan Calanog <[email protected]>

---------

Co-authored-by: Jan Calanog <[email protected]>

Author: Mpdreamz

src/Elastic.Markdown/Assets/styles.css

@@ -24,7 +24,13 @@
 	--banner-height: calc(var(--spacing) * 9);
 	/*--offset-top: calc(var(--header-height) + var(--banner-height));*/
 	--offset-top: 72px;
-	--max-layout-width: 1920px;
+	--max-text-width: clamp(40ch, 90ch, 100%);
+	--max-sidebar-width: calc(var(--spacing) * 65);
+	--content-spacing: calc(var(--spacing) * 8);
+	--max-layout-width: calc(
+		var(--max-text-width) + (var(--max-sidebar-width) * 2) +
+			calc(var(--content-spacing) * 2)
+	);
 }
 
 @media screen and (min-width: 767px) {
@@ -230,7 +236,11 @@
 
 .container {
 	@apply lg:px-3;
-	max-width: 1250px !important;
+	max-width: var(--max-layout-width) !important;
+
+	* {
+		@apply font-body;
+	}
 }
 
 #elastic-nav {

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

@@ -1,13 +1,14 @@
 @inherits RazorSlice<LayoutViewModel>
 
 
-<footer class="text-grey-20 text-[12px] bg-ink-dark py-12 px-6">
+<footer class="py-12 px-6 w-full mx-auto bg-ink-dark">
 	<div class="max-w-(--max-layout-width) w-full mx-auto">
+	<div class="text-grey-20 text-[12px]">
 		<a href="https://www.elastic.co/">
 			<img class="block" alt="Elastic logo" src="@Model.Static("logo-elastic-horizontal-white.svg")" width="120"/>
 		</a>
 	</div>
-	<div class="max-w-(--max-layout-width) w-full mx-auto grid grid-cols-1 md:grid-cols-2 gap-2 rounded-tl-4xl rounded-tr-4xl items-center">
+	<div class="text-grey-20 text-[12px] bg-ink-dark grid grid-cols-1 md:grid-cols-2 gap-2 items-center">
 		<div>
 			<ul class="mt-4 flex gap-3">
 				<li>
@@ -31,6 +32,7 @@
 			Elasticsearch is a trademark of Elasticsearch B.V., registered in the U.S. and in other countries. Apache, Apache Lucene, Apache Hadoop, Hadoop, HDFS and the yellow elephant logo are trademarks of the Apache Software Foundation in the United States and/or other countries.
 		</p>
 	</div>
+	</div>
 </footer>
 
 <script src="@Model.Static("main.js")"></script>

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

@@ -7,15 +7,15 @@
 }
 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">
+	<header class="sticky top-0 z-50 bg-blue-developer text-white h-(--offset-top) flex items-center">
 		<div class="max-w-(--max-layout-width) w-full mx-auto 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">
+			<a href="@Model.Link("/")" class="flex items-center gap-2 text-lg font-semibold px-4">
 				<img src="@Model.Static("logo-elastic-glyph-color.svg")" alt="" width="32" height="32">
 				@Model.DocSetName
 			</a>

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

@@ -1,5 +1,5 @@
 @inherits RazorSlice<LayoutViewModel>
-<div class="w-full font-body text-ink relative text-pretty">
+<div class="w-full text-ink relative text-pretty">
 	<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>

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-2 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">
@@ -57,17 +57,42 @@
 				</ul>
 			</div>
 		</div>
-		<div class="pt-6 pb-20 pl-4">
+		<ul class="mt-6">
+
+			@if (Model.GithubEditUrl is not null)
+			{
+				<li class="edit-this-page not-first:mt-1">
+					<a href="@Model.GithubEditUrl" class="link text-sm" target="_blank">
+
+
+						<svg class="link-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+							<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"/>
+						</svg>
+
+						Edit this page
+					</a>
+				</li>
+				<li class="report-an-issue not-first:mt-1">
+					<a href="@Model.ReportIssueUrl" class="link text-sm" target="_blank">
+						<svg class="link-icon" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
+							<path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor"/>
+						</svg>
+						Report an issue
+					</a>
+				</li>
+			}
+		</ul>
+		<div class="pt-6">
 			@if (Model.PageTocItems.Count > 0)
 			{
 				<div>
 					<div class="font-bold mb-2">On this page</div>
 					<div class="relative toc-progress-container font-body">
-						<div class="toc-progress-indicator absolute top-0 h-0 left-2 w-[1px] bg-blue-elastic transition-all duration-200 ease-out "></div>
+						<div class="toc-progress-indicator absolute top-0 h-0 w-[1px] bg-blue-elastic transition-all duration-200 ease-out "></div>
 						<ul class="block w-full">
 							@foreach (var item in Model.PageTocItems)
 							{
-								<li class="has-[:hover]:border-l-grey-80 items-center ml-2 px-4 border-l-1 border-l-grey-20 has-[.current]:border-l-blue-elastic!">
+								<li class="has-[:hover]:border-l-grey-80 items-center px-4 border-l-1 border-l-grey-20 has-[.current]:border-l-blue-elastic!">
 									<a
 										class="sidebar-link inline-block my-1.5 @(item.Level == 3 ? "ml-4" : string.Empty)"
 										href="#@item.Slug">
@@ -80,31 +105,6 @@
 				</div>
 			}
 
-			<ul class="mt-6">
-
-				@if (Model.GithubEditUrl is not null)
-				{
-					<li class="edit-this-page not-first:mt-1">
-						<a href="@Model.GithubEditUrl" class="link text-sm" target="_blank">
-
-
-							<svg class="link-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-								<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125"/>
-							</svg>
-
-							Edit this page
-						</a>
-					</li>
-					<li class="report-an-issue not-first:mt-1">
-						<a href="@Model.ReportIssueUrl" class="link text-sm" target="_blank">
-							<svg class="link-icon" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
-								<path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="currentColor"/>
-							</svg>
-							Report an issue
-						</a>
-					</li>
-				}
-			</ul>
 		</div>
 
 	</nav>

src/Elastic.Markdown/Slices/_Layout.cshtml

@@ -23,11 +23,19 @@
 
 		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
+					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-1
+					px-6 lg:px-0
+					lg:grid-cols-[1fr_var(--max-text-width)_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 +51,9 @@
 						</article>
 						@await RenderPartialAsync(_PrevNextNav.Create(Model))
 					</main>
+					<div class="spacer"></div>
 				</div>
+				@await RenderPartialAsync(_TableOfContents.Create(Model))
 			</div>
 		}