Fixes and fine-tuning

Author: reakaleek

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/markdown/typography.css

@@ -4,7 +4,7 @@
 	h1 {
 		@apply text-ink-dark text-5xl font-semibold;
 		line-height: 1.2em;
-		max-width: 805px; /* approximately 80ch */
+		/*max-width: 805px; !* approximately 80ch *!*/
 	}
 
 	h2 {
@@ -49,11 +49,11 @@
 		line-height: 1.5em;
 	}
 
-	#elastic-docs-v3 {
-		&>p, &>ul, &>ol, &>.heading-wrapper {
-			max-width: 80ch;
-		}
-	}
+	/*#elastic-docs-v3 {*/
+	/*	&>p, &>ul, &>ol, &>.heading-wrapper, &>dl {*/
+	/*		max-width: 80ch;*/
+	/*	}*/
+	/*}*/
 
 	a {
 		@apply font-body text-blue-elastic hover:text-blue-elastic-100 underline;

src/Elastic.Markdown/Assets/styles.css

@@ -233,20 +233,30 @@
 
 .container {
 	@apply lg:px-3;
-
 	max-width: 1250px !important;
 }
 
 #elastic-nav {
 	min-height: var(--offset-top);
-	.oldNav {
-		&>div {
-			max-width: 100%;
+
+	@media screen and (min-width: 1200px) {
+		.oldNav {
+			&>div {
+				max-width: 100%;
+			}
+			div:has(> div > nav) {
+				flex-grow: 1;
+				justify-content: center;
+			}
 		}
-		div:has(> div > nav) {
-			flex-grow: 1;
-			justify-content: center;
+	}
+	@media screen and (min-width: 1536px) {
+		.oldNav {
+			nav {
+				margin-left: -74px;
+			}
 		}
+		
 	}
 }
 

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

@@ -1,6 +1,6 @@
 @using Elastic.Markdown.Helpers;
 @inherits RazorSlice<LayoutViewModel>
-<aside class="sidebar hidden lg:block order-2">
+<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

@@ -25,7 +25,7 @@
 		{
 			<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))
-				<div class="order-2 grid grid-cols-1 md:grid-cols-[95ch_calc(var(--spacing)*65)] justify-center">
+				<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">