Rewrite of the bottom cards, removed broken model tags, added OG image. (#350)

Author: MaanavD

bun.lock

@@ -27,33 +27,34 @@
 	"devDependencies": {
 		"@sveltejs/adapter-cloudflare": "^7.2.4",
 		"@sveltejs/adapter-static": "^3.0.10",
-		"@sveltejs/adapter-vercel": "^5.10.3",
-		"@sveltejs/kit": "^2.47.2",
-		"@sveltejs/vite-plugin-svelte": "^5.1.1",
+		"@sveltejs/adapter-vercel": "^6.2.0",
+		"@sveltejs/kit": "^2.49.2",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@tailwindcss/postcss": "^4.1.17",
 		"@tailwindcss/typography": "^0.5.19",
-		"autoprefixer": "^10.4.21",
-		"bits-ui": "^1.8.0",
+		"autoprefixer": "^10.4.22",
+		"bits-ui": "^2.14.4",
 		"clsx": "^2.1.1",
-		"cmdk-sv": "^0.0.18",
-		"lucide-svelte": "^0.468.0",
-		"mode-watcher": "^0.5.1",
-		"prettier": "^3.6.2",
+		"cmdk-sv": "^0.0.19",
+		"lucide-svelte": "^0.556.0",
+		"mode-watcher": "^1.1.0",
+		"prettier": "^3.7.4",
 		"prettier-plugin-svelte": "^3.4.0",
-		"prettier-plugin-tailwindcss": "^0.6.14",
-		"shiki": "^1.29.2",
-		"svelte": "^5.41.1",
-		"svelte-check": "^4.3.3",
-		"svelte-sonner": "^0.3.28",
-		"tailwind-merge": "^2.6.0",
-		"tailwind-variants": "^0.3.1",
-		"tailwindcss": "^3.4.18",
+		"prettier-plugin-tailwindcss": "^0.7.2",
+		"shiki": "^3.19.0",
+		"svelte": "^5.45.8",
+		"svelte-check": "^4.3.4",
+		"svelte-sonner": "^1.0.7",
+		"tailwind-merge": "^3.4.0",
+		"tailwind-variants": "^3.2.2",
+		"tailwindcss": "^4.1.17",
 		"tailwindcss-animate": "^1.0.7",
 		"typescript": "^5.9.3",
-		"vite": "^6.4.1"
+		"vite": "^7.2.7"
 	},
 	"dependencies": {
-		"@vercel/analytics": "^1.5.0",
-		"flexsearch": "^0.7.43",
+		"@vercel/analytics": "^1.6.1",
+		"flexsearch": "^0.8.212",
 		"mdsvex": "^0.12.6"
 	},
 	"keywords": [

package.json

@@ -1,6 +1,6 @@
 export default {
 	plugins: {
-		tailwindcss: {},
+		'@tailwindcss/postcss': {},
 		autoprefixer: {}
 	}
 };

www/bun.lock

@@ -1,6 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@config "../tailwind.config.ts";
 
 @layer base {
 	:root {
@@ -48,8 +47,8 @@
 		--accent-foreground: 210 40% 98%;
 		--destructive: 0 62.8% 30.6%;
 		--destructive-foreground: 210 40% 98%;
-		--border: 217.2 32.6% 17.5%;
-		--input: 217.2 32.6% 17.5%;
+		--border: 217.2 32.6% 25%;
+		--input: 217.2 32.6% 25%;
 		--ring: 239.2 100% 72.4%;
 		--success: 142 71% 45%;
 		--success-foreground: 0 0% 100%;
@@ -93,6 +92,10 @@
 		line-height: 1.6;
 	}
 
+	::selection {
+		@apply bg-primary/20 text-primary;
+	}
+
 	/* Improve focus indicators for accessibility */
 	*:focus-visible {
 		outline: 2px solid hsl(var(--ring));
@@ -292,15 +295,17 @@ html {
 	}
 
 	.hover-lift {
-		@apply transition-smooth hover:-translate-y-1 hover:shadow-lg;
+		transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+		@apply hover:-translate-y-1 hover:shadow-lg;
 	}
 
 	.hover-scale {
-		@apply transition-smooth hover:scale-105;
+		transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+		@apply hover:scale-105;
 	}
 
 	.hover-glow {
-		@apply transition-smooth;
+		transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
 	}
 
 	.hover-glow:hover {

www/package.json

@@ -3,7 +3,7 @@
 	import { toggleMode, mode } from 'mode-watcher';
 	import { Button } from '$lib/components/ui/button/';
 
-	$: currentMode = $mode;
+	let currentMode = $derived(mode.current);
 </script>
 
 <Button

www/postcss.config.js

@@ -11,7 +11,7 @@
 
 	let highlighter: any = $state();
 	let { title, description, data }: { title: string; description: string; data: any } = $props();
-	let theme = $derived($mode);
+	let theme = $derived(mode.current);
 	let contentKey = $derived(`${theme}-${title}`);
 
 	onMount(async () => {