Improve site design part 1 (#126)

src/components/icons/book-open.svelte

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" {...$$restProps} viewBox="0 0 256 256"
+	><path
+		d="M224,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h64a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z"
+	/></svg
+>

src/components/icons/code.svelte

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" {...$$restProps} viewBox="0 0 256 256"
+	><path
+		d="M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.29l-48-40a8,8,0,0,1,0-12.29l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,1,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.29l48-40a8,8,0,0,0,0-12.29ZM162.73,32.48a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z"
+	/></svg
+>

src/components/icons/index.ts

@@ -17,6 +17,9 @@ export { default as CopySimple } from "./copy-simple.svelte";
 export { default as ArrowSquareOut } from "./arrow-square-out.svelte";
 export { default as CaretUpDown } from "./caret-up-down.svelte";
 export { default as SquareHalf } from "./square-half.svelte";
+export { default as BookOpen } from "./book-open.svelte";
+export { default as Code } from "./code.svelte";
+export { default as RocketLaunch } from "./rocket-launch.svelte";
 
 export type IconProps = Partial<HTMLAttributes<SVGElement>> & {
 	class?: string;

src/components/icons/rocket-launch.svelte

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" {...$$restProps} viewBox="0 0 256 256"
+	><path
+		d="M103.77,185.94C103.38,187.49,93.63,224,40,224a8,8,0,0,1-8-8c0-53.63,36.51-63.38,38.06-63.77a8,8,0,0,1,3.88,15.53c-.9.25-22.42,6.54-25.56,39.86C81.7,204.48,88,183,88.26,182a8,8,0,0,1,15.51,4Zm93-67.4L192,123.31v58.33A15.91,15.91,0,0,1,187.32,193L153,227.3A15.91,15.91,0,0,1,141.7,232a16.11,16.11,0,0,1-5.1-.83,15.94,15.94,0,0,1-10.78-12.92l-5.37-38.49L76.24,135.55l-38.47-5.37A16,16,0,0,1,28.7,103L63,68.68A15.91,15.91,0,0,1,74.36,64h58.33l4.77-4.77c26.68-26.67,58.83-27.82,71.41-27.07a16,16,0,0,1,15,15C224.6,59.71,223.45,91.86,196.78,118.54ZM40,114.34l37.15,5.18L116.69,80H74.36ZM91.32,128,128,164.68l57.45-57.45a76.46,76.46,0,0,0,22.42-59.16,76.65,76.65,0,0,0-59.11,22.47ZM176,139.31l-39.53,39.53L141.67,216,176,181.64Z"
+	/></svg
+>

src/components/navigation/index.ts

@@ -1,3 +1,4 @@
 export { default as SidebarNav } from "./sidebar-nav.svelte";
 export { default as SidebarNavItems } from "./sidebar-nav-items.svelte";
 export { default as MobileNav } from "./mobile-nav.svelte";
+export { default as SidebarNavMainItems } from "./sidebar-nav-main-items.svelte";

src/components/navigation/sidebar-nav-items.svelte

@@ -13,11 +13,9 @@
 				<a
 					href={item.href}
 					class={cn(
-						"group flex w-full items-center rounded-md px-2 py-1 hover:underline",
+						"group flex w-full items-center rounded-md text-foreground py-2 px-2.5 hover:bg-muted transition-all",
 						item.disabled && "cursor-not-allowed opacity-60",
-						$page.url.pathname === item.href
-							? "font-medium text-foreground"
-							: "text-muted-foreground"
+						$page.url.pathname === item.href ? "bg-muted" : ""
 					)}
 					target={item.external ? "_blank" : ""}
 					rel={item.external ? "noreferrer" : ""}

src/components/navigation/sidebar-nav-main-items.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import type { SidebarNavItem } from "@/config";
+	import { RocketLaunch, BookOpen, Code } from "@/components/icons";
+	import { page } from "$app/stores";
+	import { cn } from "@/utils";
+
+	export let items: SidebarNavItem[] = [];
+
+	const iconMap = {
+		Introduction: BookOpen,
+		"Getting Started": RocketLaunch,
+		"Render Delegation": Code
+	} as const;
+
+	const iconMapKeys = Object.keys(iconMap) as (keyof typeof iconMap)[];
+
+	function isIconMapKey(key: string): key is keyof typeof iconMap {
+		return iconMapKeys.includes(key as keyof typeof iconMap);
+	}
+</script>
+
+{#if items.length}
+	<div class="grid grid-flow-row auto-rows-max text-sm pb-8">
+		{#each items as item, index (index)}
+			{#if item.href}
+				<a
+					href={item.href}
+					class={cn(
+						"group flex w-full items-center rounded-md p-2 text-sm text-foreground font-semibold gap-2.5 hover:bg-muted transition-all",
+						$page.url.pathname === item.href ? "bg-muted" : "bg-transparent"
+					)}
+					target={item.external ? "_blank" : ""}
+					rel={item.external ? "noreferrer" : ""}
+				>
+					{#if isIconMapKey(item.title)}
+						<svelte:component this={iconMap[item.title]} class="sq-5" />
+					{/if}
+					{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"
+						>
+							{item.label}
+						</span>
+					{/if}
+				</a>
+			{/if}
+		{/each}
+	</div>
+{/if}

src/components/navigation/sidebar-nav.svelte

@@ -1,25 +1,31 @@
 <script lang="ts">
 	import type { SidebarNavItem } from "@/config";
-	import { SidebarNavItems } from "@/components";
+	import { SidebarNavItems, SidebarNavMainItems } from "@/components";
 	export let items: SidebarNavItem[] = [];
 </script>
 
 {#if items.length}
 	<aside
-		class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-64px)] lg:sticky lg:top-16 py-8 lg:px-4 lg:-mx-4"
+		class="hidden overflow-y-auto lg:block lg:max-h-[calc(100vh-64px)] lg:sticky lg:top-[60px] py-10 pr-2"
 	>
 		<div class="relative">
 			<nav class="space-y-3">
 				<div class="flex flex-col w-full">
 					{#each items as item, index (index)}
-						<div class="pb-4">
-							<h4 class="mb-1 rounded-md px-1 py-1 text-sm font-semibold">
-								{item.title}
-							</h4>
-							{#if item.items}
-								<SidebarNavItems items={item.items} />
-							{/if}
-						</div>
+						{#if item.title === "Overview"}
+							<SidebarNavMainItems items={item.items} />
+						{:else}
+							<div class="pb-4">
+								<h4
+									class="mb-1 rounded-md text-foreground/40 py-2 px-2.5 text-sm font-normal uppercase"
+								>
+									{item.title}
+								</h4>
+								{#if item.items}
+									<SidebarNavItems items={item.items} />
+								{/if}
+							</div>
+						{/if}
 					{/each}
 				</div>
 			</nav>

src/components/page-header/index.ts

@@ -1,4 +1,3 @@
 export { default as PageHeader } from "./page-header.svelte";
 export { default as PageHeaderHeading } from "./page-header-heading.svelte";
-export { default as PageHeaderTagline } from "./page-header-tagline.svelte";
 export { default as PageHeaderDescription } from "./page-header-description.svelte";

src/components/page-header/page-header-description.svelte

@@ -5,7 +5,7 @@
 	export { className as class };
 </script>
 
-<p class={cn("text-lg text-muted-foreground mt-4", className)}>
+<p class={cn("text-xl font-medium text-foreground/40 mt-3", className)}>
 	<Balancer>
 		<slot />
 	</Balancer>

src/components/page-header/page-header-heading.svelte

@@ -4,6 +4,6 @@
 	export { className as class };
 </script>
 
-<h1 class={cn("scroll-m-20 text-4xl font-extrabold tracking-tight", className)}>
+<h1 class={cn("scroll-m-20 text-5xl font-semibold tracking-tight", className)}>
 	<slot />
 </h1>

src/components/page-header/page-header.svelte

@@ -4,6 +4,6 @@
 	export { className as class };
 </script>
 
-<section class={cn("relative border-b border-border py-8", className)}>
+<section class={cn("relative pt-[72px]", className)}>
 	<slot />
 </section>

src/components/site-header.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <header class="bg-background/75 backdrop-blur border-b border-border -mb-px sticky top-0 z-50">
-	<div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
+	<div class="mx-auto px-4 sm:px-6 lg:px-8 container">
 		<div class="flex items-center justify-between gap-3 h-16">
 			<div class="flex items-center gap-1.5">
 				<MobileNav />

src/config/navigation.ts

@@ -36,12 +36,12 @@ export const navigation: Navigation = {
 					items: []
 				},
 				{
-					title: "Getting started",
+					title: "Getting Started",
 					href: "/docs/getting-started",
 					items: []
 				},
 				{
-					title: "Render delegation",
+					title: "Render Delegation",
 					href: "/docs/render-delegation",
 					items: []
 				}

src/routes/+layout.svelte

@@ -13,17 +13,17 @@
 
 <SiteHeader />
 <main class="min-h-[calc(100vh-64px)]">
-	<div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
-		<div class="lg:grid lg:grid-cols-10 lg:gap-10">
-			<div class="lg:col-span-2">
+	<div class="mx-auto px-4 sm:px-6 lg:px-8 container">
+		<div class="lg:grid lg:grid-cols-12 lg:gap-6">
+			<div class="lg:col-span-2 border-r border-border">
 				<SidebarNav items={navigation.sidebar} />
 			</div>
-			<div class="lg:col-span-8">
-				<div class="lg:grid lg:grid-cols-10 lg:gap-8">
-					<div class="lg:col-span-8">
+			<div class="lg:col-span-10 lg:col-start-4">
+				<div class="lg:grid lg:grid-cols-9 lg:gap-6">
+					<div class="lg:col-span-7">
 						<slot />
 					</div>
-					<div class="lg:col-span-2 order-first lg:order-last" />
+					<div class="lg:col-span-2 lg:col-start-11 order-first lg:order-last" />
 				</div>
 			</div>
 		</div>

src/routes/+page.svelte

@@ -1,15 +1,8 @@
 <script lang="ts">
-	import { Button } from "@/components/ui/button";
-	import {
-		PageHeader,
-		PageHeaderHeading,
-		PageHeaderDescription,
-		PageHeaderTagline
-	} from "@/components";
+	import { PageHeader, PageHeaderHeading, PageHeaderDescription } from "@/components";
 </script>
 
 <PageHeader>
-	<PageHeaderTagline>Getting Started</PageHeaderTagline>
 	<PageHeaderHeading>Introduction</PageHeaderHeading>
 	<PageHeaderDescription>Headless UI Components for Svelte.</PageHeaderDescription>
 </PageHeader>

src/routes/docs/[...slug]/+page.svelte

@@ -3,12 +3,7 @@
 	import { page } from "$app/stores";
 	import type { SvelteComponent } from "svelte";
 	import type { PageData } from "./$types";
-	import {
-		PageHeader,
-		PageHeaderDescription,
-		PageHeaderHeading,
-		PageHeaderTagline
-	} from "@/components";
+	import { PageHeader, PageHeaderDescription, PageHeaderHeading } from "@/components";
 	type Component = $$Generic<typeof SvelteComponent>;
 
 	export let data: PageData;
@@ -24,7 +19,6 @@
 
 <div class="markdown pb-24">
 	<PageHeader>
-		<PageHeaderTagline>{tagline}</PageHeaderTagline>
 		<PageHeaderHeading>{doc.title}</PageHeaderHeading>
 		<PageHeaderDescription>{doc.description}</PageHeaderDescription>
 	</PageHeader>

src/routes/docs/components/[name]/+page.svelte

@@ -3,12 +3,7 @@
 	import { page } from "$app/stores";
 	import type { SvelteComponent } from "svelte";
 	import type { PageData } from "./$types";
-	import {
-		PageHeader,
-		PageHeaderDescription,
-		PageHeaderHeading,
-		PageHeaderTagline
-	} from "@/components";
+	import { PageHeader, PageHeaderDescription, PageHeaderHeading } from "@/components";
 	type Component = $$Generic<typeof SvelteComponent>;
 
 	export let data: PageData;
@@ -25,7 +20,6 @@
 
 <div class="markdown pb-24">
 	<PageHeader>
-		<PageHeaderTagline>{tagline}</PageHeaderTagline>
 		<PageHeaderHeading>{doc.title}</PageHeaderHeading>
 		<PageHeaderDescription>{doc.description}</PageHeaderDescription>
 	</PageHeader>

src/styles/app.postcss

@@ -9,19 +9,19 @@
 
 @layer base {
 	:root {
-		--background: 0 0% 98%;
-		--foreground: 320 7% 8%;
+		--background: 0 0% 100%;
+		--foreground: 0 0% 9%;
 
-		--muted: 320 4.8% 93%;
-		--muted-foreground: 320 3.8% 38.1%;
+		--muted: 240 5% 96%;
+		--muted-foreground: 0 0% 64%;
 
 		--popover: 0 0% 98%;
 		--popover-foreground: 320 7% 8%;
 
 		--card: 0 0% 98%;
 		--card-foreground: 320 7% 8%;
 
-		--border: 320 5.9% 87%;
+		--border: 0 0% 89%;
 		--input: 320 5.9% 90%;
 
 		--primary: 320 7% 16%;
@@ -30,8 +30,8 @@
 		--secondary: 163 62% 90%;
 		--secondary-foreground: 170 31% 19%;
 
-		--accent: 320 4.8% 92%;
-		--accent-foreground: 320 7% 16%;
+		--accent: 204 94% 94%;
+		--accent-foreground: 0 9% 9%;
 
 		--destructive: 0 84.2% 60.2%;
 		--destructive-foreground: 0 0% 98%;

tailwind.config.ts

@@ -12,7 +12,7 @@ export default {
 			center: true,
 			padding: "2rem",
 			screens: {
-				"2xl": "1400px"
+				"2xl": "1440px"
 			}
 		},
 		extend: {
@@ -51,11 +51,6 @@ export default {
 					foreground: "hsl(var(--card-foreground))"
 				}
 			},
-			borderRadius: {
-				lg: "var(--radius)",
-				md: "calc(var(--radius) - 2px)",
-				sm: "calc(var(--radius) - 4px)"
-			},
 			fontFamily: {
 				sans: ["Inter", ...fontFamily.sans]
 			}