improve

Author: colinlienard

docs/.vitepress/config.ts

@@ -1,11 +1,13 @@
 import { defineConfig } from 'vitepress';
 
 export default defineConfig({
-	title: 'sv-router',
-	description: 'Modern Svelte routing',
-	head: [['link', { rel: 'icon', href: '/favicon.ico' }]],
+	title: 'sv-router | Modern Svelte routing',
+	description: 'A feature-rich yet intuitive routing library for Svelte single-page apps.',
+	head: [['link', { rel: 'icon', href: '/logo.svg' }]],
 	cleanUrls: true,
 	themeConfig: {
+		logo: '/logo.svg',
+		siteTitle: 'sv-router',
 		nav: [
 			{ text: 'Guide', link: '/guide/why', activeMatch: '/guide/' },
 			{ text: 'Reference', link: '/reference/foo', activeMatch: '/reference/' },

docs/.vitepress/theme/custom.css

@@ -0,0 +1,19 @@
+:root {
+	--vp-home-hero-name-color: transparent;
+	--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #e64e25 30%, #dcb285);
+
+	--vp-home-hero-image-background-image: linear-gradient(-45deg, #e64e2566 50%, #e64e2566 50%);
+	--vp-home-hero-image-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+	:root {
+		--vp-home-hero-image-filter: blur(56px);
+	}
+}
+
+@media (min-width: 960px) {
+	:root {
+		--vp-home-hero-image-filter: blur(68px);
+	}
+}

docs/.vitepress/theme/index.ts

@@ -0,0 +1,2 @@
+export { default } from 'vitepress/theme';
+import './custom.css';

docs/index.md

@@ -4,9 +4,11 @@ layout: home
 hero:
   name: sv-router
   text: Modern Svelte routing
-  tagline: A feature-rich yet intuitive routing library for Svelte SPAs.
+  tagline: A feature-rich yet intuitive routing library for Svelte single-page apps.
   image:
-    src: /logo.png
+    src: /logo.svg
+    width: 100%
+    height: 100%
   actions:
     - theme: brand
       text: Get Started
@@ -19,19 +21,16 @@ hero:
       link: https://github.com/colinlienard/sv-router
 
 features:
-  - icon:
-      src: /typescript.svg
+  - icon: 🔒
     title: Typesafe navigation
-    details: Get autocomplete and type checking for your routes, ensuring reliable navigation.
-  - icon:
-      src: /vitejs.svg
+    details: Get autocomplete and type checking for your routes.
+  - icon: 🗂️
     title: File-based routing (optional)
-    details: Enjoy the DX of a meta-framework-like approach with a Vite plugin.
+    details: Enjoy the DX of a meta-framework-like approach.
   - icon: 🌿
     title: Nested routes
-    details: Create complex layouts with ease, thanks to intuitive route nesting.
-  - icon:
-      src: /svelte.svg
+    details: Create complex layouts with ease.
+  - icon: 🚀
     title: Made for Svelte 5
-    details: Benefit from faster performance and a smaller bundle size, built natively for the latest Svelte.
+    details: Benefit from faster performance and smaller bundle size.
 ---