Add previous/next button design

Author: reakaleek

src/Elastic.Markdown/Assets/styles.css

@@ -79,6 +79,10 @@
 			    tracking-[-0.02em];
 		}
 	}
+	
+	.content-container {
+		@apply w-full max-w-[80ch];
+	}
 }
 
 * {

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

@@ -27,8 +27,8 @@
 					<a href="@Model.GithubEditUrl" class="link">
 						Edit this page
 						<svg class="link-arrow"
-							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="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3" />
+						     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="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"/>
 						</svg>
 					</a>
 				</div>

src/Elastic.Markdown/Slices/_Layout.cshtml

@@ -17,34 +17,44 @@
 		@await RenderPartialAsync(_PagesNav.Create(Model))
 		@await RenderPartialAsync(_TableOfContents.Create(Model))
 		<main class="w-full pt-6 pb-30 px-6 order-2">
-			@await RenderPartialAsync(_Breadcrumbs.Create(Model))
-			<article class="markdown-content w-full max-w-[80ch]">
+			<div class="content-container">
+				@await RenderPartialAsync(_Breadcrumbs.Create(Model))
+			</div>
+			<article class="content-container">
 				@await RenderBodyAsync()
 			</article>
-			<div class="flex justify-between mt-12">
-				<div class="grow flex justify-start flex-nowrap">
-					@if (Model.Previous != null)
-					{
-						<a href="@Model.Previous.Url" class="flex items-center text-blue-elastic leading-0">
-							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 15.75 3 12m0 0 3.75-3.75M3 12h18"/>
-							</svg>
-							<div class="title ml-2">@Model.Previous.NavigationTitle</div>
-						</a>
-					}
-				</div>
-				<div class="grow flex justify-end flex-nowrap">
-					@if (Model.Next != null)
-					{
-						<a href="@Model.Next.Url" class="flex items-center text-blue-elastic leading-0">
-							<div class="title mr-2">@Model.Next.NavigationTitle</div>
-							<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-								<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3"/>
-							</svg>
-						</a>
-					}
+			<footer class="content-container mt-20">
+				<div class="flex flex-wrap lg:flex-nowrap gap-2 mt-2">
+					<div class="w-full">
+						@if (Model.Previous != null)
+						{
+							<a href="@Model.Previous.Url" class="flex h-full items-center text-ink-light hover:black border-1 border-gray-300 hover:border-gray-500 rounded-lg p-6 shadow-md">
+								<svg class="size-6 mr-2" 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="M15.75 19.5 8.25 12l7.5-7.5"/>
+								</svg>
+								<div>
+									<div class="text-xs lg:text-sm">Previous</div>
+									<div class="text-base lg:text-xl text-black">@Model.Previous.NavigationTitle</div>
+								</div>
+							</a>
+						}
+					</div>
+					<div class="w-full">
+						@if (Model.Next != null)
+						{
+							<a href="@Model.Next.Url" class="flex h-full items-center justify-end text-ink-light hover:black border-1 border-gray-300 hover:border-gray-500 rounded-lg p-6 shadow-md text-right">
+								<div>
+									<div class="text-xs lg:text-sm">Next</div>
+									<div class="text-base lg:text-xl text-black">@Model.Next.NavigationTitle</div>
+								</div>
+								<svg class="size-6 ml-2" 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="m8.25 4.5 7.5 7.5-7.5 7.5"/>
+								</svg>
+							</a>
+						}
+					</div>
 				</div>
-			</div>
+			</footer>
 		</main>
 	</div>
 	</div>

src/Elastic.Markdown/Slices/_ViewImports.cshtml

@@ -10,4 +10,4 @@
 @using Elastic.Markdown.Slices.Layout
 
 @tagHelperPrefix __disable_tagHelpers__:
-@removeTagHelper *, Microsoft.AspNetCore.Mvc.Razor
+@removeTagHelper *, Microsoft.AspNetCore.Mvc.Razor