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]>

Author: Mpdreamz

src/Elastic.Markdown/Assets/styles.css

@@ -24,10 +24,12 @@
 	--banner-height: calc(var(--spacing) * 9);
 	/*--offset-top: calc(var(--header-height) + var(--banner-height));*/
 	--offset-top: 72px;
-	--max-layout-width: 1500px;
+	--max-text-width: clamp(40ch, 90ch, 100%);
 	--max-sidebar-width: calc(var(--spacing) * 65);
-	--max-content-width: calc(
-		var(--max-layout-width) - (var(--max-sidebar-width) * 2)
+	--content-spacing: calc(var(--spacing) * 8);
+	--max-layout-width: calc(
+		var(--max-text-width) + (var(--max-sidebar-width) * 2) +
+			calc(var(--content-spacing) * 2)
 	);
 }
 
@@ -234,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)] 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.cshtml

@@ -23,15 +23,16 @@
 
 		private async Task DefaultLayout()
 		{
-			<div class="max-w-(--max-layout-width) w-full h-full grid 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="justify-center px-6 grid
+				<div class="justify-center grid
 					grid-cols-1
-					lg:grid-cols-[1fr_clamp(40ch,80ch,100%)_1fr]
+					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">