Write home page, add logo, configure theme

docs/.vitepress/config.mts

@@ -1,12 +1,18 @@
 import { withMermaid } from 'vitepress-plugin-mermaid';
 import footnote from 'markdown-it-footnote';
+import tailwindcss from '@tailwindcss/vite';
 
 // https://vitepress.dev/reference/site-config
 export default withMermaid({
 	title: 'Mediabunny',
 	description: 'A VitePress Site',
 	cleanUrls: true,
+	head: [
+		['link', { rel: 'icon', href: '/mediabunny-logo.svg' }],
+	],
 	themeConfig: {
+		logo: '/mediabunny-logo.svg',
+
 		// https://vitepress.dev/reference/default-theme-config
 		nav: [
 			{ text: 'Guide', link: '/guide/introduction', activeMatch: '/guide' },
@@ -54,7 +60,7 @@ export default withMermaid({
 		],
 
 		socialLinks: [
-			{ icon: 'github', link: 'https://github.com/vuejs/vitepress' },
+			{ icon: 'github', link: 'https://github.com/Vanilagy/mediabunny' },
 		],
 
 		search: {
@@ -67,9 +73,14 @@ export default withMermaid({
 	},
 	markdown: {
 		math: true,
+		theme: { light: 'github-light', dark: 'github-dark-dimmed' },
 		config(md) {
 			md.use(footnote);
 		},
 	},
+	vite: {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		plugins: [tailwindcss() as any],
+	},
 	outDir: '../dist-docs',
 });

docs/.vitepress/theme/index.ts

@@ -0,0 +1,6 @@
+import DefaultTheme from 'vitepress/theme';
+import './theme.css';
+import '@fontsource-variable/rubik';
+import '@fontsource/dm-mono';
+
+export default DefaultTheme;

docs/.vitepress/theme/theme.css

@@ -0,0 +1,52 @@
+@import "tailwindcss";
+
+:root {
+	--vp-font-family-base: 'Rubik Variable', sans-serif;
+	--vp-font-family-mono: 'DM Mono', monospace;
+
+	--vp-home-hero-image-background-image: linear-gradient(
+		40deg,
+		rgb(255, 255, 255, 0),
+		rgb(255, 87, 205)
+	);
+	--vp-home-hero-image-filter: blur(30px);
+
+	--vp-home-hero-name-color: transparent;
+	--vp-home-hero-name-background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2);
+
+	--vp-c-brand-1: hsl(342, 90%, 65%);
+	--vp-c-brand-2: hsl(327, 80%, 70%);
+	--vp-c-brand-3: hsl(327, 80%, 60%);
+}
+
+@media (min-width: 640px) {
+	:root {
+		--vp-home-hero-image-filter: blur(50px);
+	}
+}
+
+.dark {
+	--vp-c-brand-1: hsl(342, 100%, 77%);
+
+	--vp-c-bg: oklch(20.385% 0.00773 285.719);
+	--vp-c-bg-alt: oklch(17.105% 0.00397 285.961);
+	--vp-c-bg-elv: oklch(22.927% 0.01144 278.034);
+	--vp-c-bg-soft: oklch(22.927% 0.01144 278.034);
+
+	--vp-c-gray-1: oklch(43.933% 0.0226 248.367);
+	--vp-c-gray-2: oklch(35.955% 0.02077 259.438);
+	--vp-c-gray-3: oklch(30.266% 0.01685 266.452);
+	--vp-c-gray-soft: oklch(50.504% 0.03148 248.444 / 0.16);
+}
+
+.vp-doc a:hover {
+	color: rgb(203, 40, 99);
+}
+
+.dark .vp-doc a:hover {
+	color: hsl(345, 100%, 85%);
+}
+
+body {
+	overflow-x: hidden;
+}