Refactor

Author: reakaleek

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

@@ -30,10 +30,6 @@
 
 	a {
 		font-family: "Inter", sans-serif;
-		@apply text-blue-elastic hover:underline;
-	}
-	
-	* {
-		scroll-margin-top: calc(var(--spacing) * 26);
+		@apply text-blue-elastic underline hover:text-blue-800;
 	}
 }

src/Elastic.Markdown/Assets/styles.css

@@ -17,24 +17,6 @@
 	background-repeat: no-repeat;
 }
 
-#pages-nav, #toc-nav {
-	&::-webkit-scrollbar-track {
-		background-color: transparent;
-	}
-	&:hover::-webkit-scrollbar-thumb {
-		background-color: var(--color-gray-300);
-	}
-	&::-webkit-scrollbar {
-		width: calc(var(--spacing) * 2);
-		height: calc(var(--spacing) * 2);
-	}
-	&::-webkit-scrollbar-thumb {
-		border-radius: var(--spacing);
-	}
-
-	scrollbar-gutter: stable;
-}
-
 #pages-nav li.current {
 	position: relative;
 	&::before {
@@ -55,19 +37,51 @@
 	}
 }
 
-
 @layer components {
-	.btn {
-		@apply px-4 py-2 rounded-md bg-blue-elastic text-white;
+	.link {
+		font-family: "Mier B", "Inter", sans-serif;
+		@apply 
+			text-blue-elastic 
+			text-nowrap
+			font-semibold
+			hover:text-blue-800
+			inline-flex
+			justify-center
+			items-center;
+		
+		.link-arrow {
+			@apply 
+				shrink-0 
+				size-7
+				ml-2
+				transition-transform
+				ease-out;
+		}
+
+		&:hover{
+			svg {
+				@apply translate-x-2;
+			}
+		}
+	}
+	
+	.sidebar {
+		.sidebar-nav {
+			@apply sticky top-22 z-30 overflow-y-auto;
+			max-height: calc(100vh - var(--spacing) * 22);
+		}
+		
+		.sidebar-link {
+			@apply
+				text-ink-light
+				hover:text-black
+				text-sm
+			    leading-[1.2em]
+			    tracking-[-0.02em];
+		}
 	}
 }
 
-
-.sd-tab-set {
-	@apply flex overflow-x-scroll;
-
-
-	input {
-		@apply hidden;
-	}
+* {
+	scroll-margin-top: calc(var(--spacing) * 26);
 }

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

@@ -1,6 +1,6 @@
 @inherits RazorSlice<LayoutViewModel>
-<aside class="hidden lg:block order-1 w-100 border-r-1 border-r-gray-200">
-	<nav id="pages-nav" class="sticky top-22 z-10 max-h-[calc(100vh-var(--spacing)*22)] overflow-y-auto pr-6">
+<aside class="sidebar hidden lg:block order-1 w-100 border-r-1 border-r-gray-200">
+	<nav id="pages-nav" class="sidebar-nav pr-6">
 		@(new HtmlString(Model.NavigationHtml))
 	</nav>
 </aside>

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

@@ -1,8 +1,8 @@
 @inherits RazorSlice<LayoutViewModel>
 @if (Model.IsRedesign)
 {
-	<aside class="hidden lg:block order-3 border-l-1 border-l-gray-200 w-80">
-		<nav id="toc-nav" class="sticky top-22 z-30 max-h-[calc(100vh-var(--spacing)*22)] overflow-y-auto pl-6">
+	<aside class="sidebar hidden lg:block order-3 border-l-1 border-l-gray-200 w-80">
+		<nav id="toc-nav" class="sidebar-nav pl-6">
 			<div class="pt-6 pb-20">
 				@if (Model.PageTocItems.Count > 0)
 				{
@@ -12,9 +12,9 @@
 							<div class="toc-progress-indicator absolute top-0 h-0 left-2 w-[1px] bg-blue-elastic transition-all duration-200 ease-out "></div>
 							@foreach (var item in Model.PageTocItems)
 							{
-								<li class="flex has-[:hover]:border-l-gray-500 items-center ml-2 pl-4 border-l-1 border-l-gray-200 has-[.current]:border-l-blue-elastic!">
+								<li class="has-[:hover]:border-l-gray-500 items-center ml-2 pl-4 border-l-1 border-l-gray-200 has-[.current]:border-l-blue-elastic!">
 									<a
-										class="inline-block text-sm leading-[1.2em] tracking-[-0.02em] my-1 hover:text-black @(item.Level == 3 ? "ml-4" : string.Empty)"
+										class="sidebar-link inline-block my-1 @(item.Level == 3 ? "ml-4" : string.Empty)"
 										href="#@item.Slug">
 										@item.Heading
 									</a>
@@ -24,9 +24,10 @@
 					</div>
 				}
 				<div class="edit-this-page">
-					<a href="@Model.GithubEditUrl" class="flex flex-nowrap items-center text-blue-elastic hover:text-blue-800">
-						<span class="leading-0 mr-2">Edit this page</span>
-						<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+					<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" />
 						</svg>
 					</a>

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

@@ -11,10 +11,8 @@
 			var isCurrent = f == Model.CurrentDocument;
 			<li class="block ml-2 pl-2 border-l-1 border-l-gray-200 group/li @(isCurrent ? "current" : string.Empty)">
 				<div class="flex">
-					<div class="w-5">
-					</div>
 					<a
-						class="block my-1 text-sm leading-[1.2em] tracking-[-0.02em] group-[.current]/li:text-blue-elastic! hover:text-black @(isCurrent ? "" : string.Empty)"
+						class="sidebar-link my-1 ml-5 group-[.current]/li:text-blue-elastic! @(isCurrent ? "" : string.Empty)"
 						href="@f.Url"
 						@(isCurrent ? "aria-current=page" : string.Empty)>
 						@f.NavigationTitle
@@ -38,7 +36,7 @@
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
-						class="w-4 mr-1 shrink -rotate-90 group-has-checked/label:rotate-0 cursor-pointer">
+						class="w-4 mr-1 shrink -rotate-90 group-has-checked/label:rotate-0 cursor-pointer text-ink">
 						<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/>
 					</svg>
 					<input
@@ -51,7 +49,7 @@
 					>
 					<a
 						href="@g.Index?.Url"
-						class="block my-1 text-sm leading-[1.2em] tracking-[-0.02em] hover:text-black @(g.Depth == 1 ? "uppercase tracking-[0.05em] text-ink-light font-semibold" : string.Empty) @(containsCurrent ? "font-semibold" : string.Empty) @(isCurrent ? "current text-blue-elastic!" : string.Empty)">
+						class="sidebar-link inline-block my-1 @(g.Depth == 1 ? "uppercase tracking-[0.05em] text-ink-light font-semibold" : string.Empty) @(containsCurrent ? "font-semibold" : string.Empty) @(isCurrent ? "current text-blue-elastic!" : string.Empty)">
 						@g.Index?.NavigationTitle
 					</a>
 				</label>