docs: small UI changes (#299)

huntabyte · Jan 28, 2024 · 9852216 · 9852216
1 parent 54712ea
commit 9852216
Show file tree

Hide file tree

Showing 9 changed files with 14 additions and 8 deletions.
diff --git a/src/components/api-ref/data-attr-value-content.svelte b/src/components/api-ref/data-attr-value-content.svelte
@@ -15,7 +15,7 @@
 		<Code class="bg-transparent px-0">enum</Code>
 		<Popover.Root>
 			<Popover.Trigger
-				class="inline-flex items-center justify-center rounded-button text-foreground-alt transition-colors hover:text-foreground-alt/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+				class="inline-flex items-center justify-center rounded-button text-muted-foreground transition-colors hover:text-foreground-alt/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 			>
 				<Info class="sq-4" weight="bold" />
 				<span class="sr-only">See possible values</span>

diff --git a/src/components/navigation/sidebar-nav-items.svelte b/src/components/navigation/sidebar-nav-items.svelte
@@ -23,7 +23,7 @@
 					{item.title}
 					{#if item.label}
 						<span
-							class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline"
+							class="ml-2 rounded-[4px] bg-[#FCDAFE] px-1.5 py-1 text-[0.7rem] font-semibold leading-none text-[#2A266B] no-underline group-hover:no-underline"
 						>
 							{item.label}
 						</span>

diff --git a/src/components/navigation/sidebar-nav-main-items.svelte b/src/components/navigation/sidebar-nav-main-items.svelte
@@ -21,7 +21,7 @@
 </script>
 
 {#if items.length}
-	<div class="grid grid-flow-row auto-rows-max gap-1 pb-8 pl-4 text-sm">
+	<div class="grid grid-flow-row auto-rows-max gap-0.5 pb-8 pl-4 text-sm">
 		{#each items as item, index (index)}
 			{#if item.href}
 				<a
@@ -41,7 +41,7 @@
 					{item.title}
 					{#if item.label}
 						<span
-							class="ml-2 rounded-md bg-[#adfa1d] px-1.5 py-0.5 text-xs leading-none text-[#000000] no-underline group-hover:no-underline"
+							class="ml-2 rounded-[4px] bg-[#FCDAFE] px-1.5 py-1 text-xs font-semibold leading-none text-[#2A266B] no-underline group-hover:no-underline"
 						>
 							{item.label}
 						</span>

diff --git a/src/components/page-header/page-header-description.svelte b/src/components/page-header/page-header-description.svelte
@@ -7,7 +7,7 @@
 
 <p
 	class={cn(
-		"mt-3 text-[21px] font-semibold tracking-[-0.01em] text-foreground/40",
+		"mt-3 text-balance text-[21px] font-semibold tracking-[-0.01em] text-foreground/40",
 		className
 	)}
 >

diff --git a/src/components/site-header.svelte b/src/components/site-header.svelte
@@ -19,7 +19,7 @@
 					<Logo />
 				</a>
 			</div>
-			<div class="flex items-center justify-end gap-3">
+			<div class="flex items-center justify-end gap-2.5">
 				<Button.Root
 					href={siteConfig.links.github}
 					target="_blank"

diff --git a/src/config/navigation.ts b/src/config/navigation.ts
@@ -83,6 +83,7 @@ export const navigation: Navigation = {
 				{
 					title: "Calendar",
 					href: "/docs/components/calendar",
+					label: "New",
 					items: []
 				},
 				{
@@ -153,6 +154,7 @@ export const navigation: Navigation = {
 				{
 					title: "PIN Input",
 					href: "/docs/components/pin-input",
+					label: "New",
 					items: []
 				},
 				{

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -20,7 +20,7 @@
 <SiteHeader />
 <div class="min-h-[calc(100vh-64px)]">
 	<div
-		class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[220px_minmax(0,1fr)] lg:gap-10"
+		class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[250px_minmax(0,1fr)] lg:gap-10"
 	>
 		<SidebarNav items={navigation.sidebar} />
 		<main

diff --git a/src/styles/app.postcss b/src/styles/app.postcss
@@ -86,6 +86,10 @@
 	html {
 		-webkit-tap-highlight-color: rgba(128, 128, 128, 0.5);
 	}
+	::selection {
+		background: #fdffa4;
+		color: black;
+	}
 
 	/* === Scrollbars === */
 

diff --git a/src/styles/markdown.postcss b/src/styles/markdown.postcss
@@ -1,5 +1,5 @@
 .markdown code:not(pre > code):not(.custom) {
-	@apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm;
+	@apply relative rounded bg-muted px-[0.4rem] py-[0.2rem] font-mono text-sm font-medium text-foreground;
 }
 
 [data-theme="light"] {