package.json

@@ -22,9 +22,9 @@
     "@playwright/test": "1.49.1",
     "@sveltejs/kit": "^2.15.2",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@tailwindcss/vite": "^4.0.0",
     "@types/eslint": "9.6.1",
     "@types/pg": "^8.11.10",
-    "autoprefixer": "^10.4.20",
     "bits-ui": "^1.4.7",
     "clsx": "^2.1.1",
     "cmdk-sv": "^0.0.18",
@@ -34,14 +34,13 @@
     "eslint-plugin-svelte": "^2.46.1",
     "globals": "15.14.0",
     "lucide-svelte": "^0.473.0",
-    "postcss": "^8.4.49",
     "prettier": "3.4.2",
     "prettier-plugin-svelte": "3.3.2",
     "svelte": "^5.16.5",
     "svelte-check": "4.1.1",
     "tailwind-merge": "^2.6.0",
     "tailwind-variants": "^0.3.1",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.0.0",
     "typescript": "5.7.2",
     "typescript-eslint": "8.19.1",
     "vite": "^6.0.7",

postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

src/app.css

@@ -1,78 +1,56 @@
-@tailwind base;
+@import 'tailwindcss';
-@tailwind components;
-@tailwind utilities;
 
-@layer base {
+@theme {
-  :root {
+	--color-bg: #f6f4f0;
-    --background: 0 0% 100%;
+	--color-surface: #edeae4;
-    --foreground: 222.2 84% 4.9%;
+	--color-surface-hover: #e4e0d8;
+	--color-border: #d6d2ca;
+	--color-border-light: #e8e5de;
+	--color-text: #2c2c2c;
+	--color-text-muted: #6b6b6b;
+	--color-text-dim: #999999;
+	--color-text-ghost: #c5c0b8;
+	--color-accent: #3d6b8e;
+	--color-accent-hover: #4d7fa6;
+	--color-danger: #b44;
 
-    --muted: 210 40% 96.1%;
+	--font-heading: 'DM Serif Display', Georgia, serif;
-    --muted-foreground: 215.4 16.3% 46.9%;
+	--font-mono: 'IBM Plex Mono', 'Courier New', monospace;
- 
+	--font-body: 'Source Sans 3', 'Helvetica Neue', sans-serif;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
- 
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
- 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
- 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
- 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
- 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
- 
-    --destructive: 0 72.2% 50.6%;
-    --destructive-foreground: 210 40% 98%;
- 
-    --ring: 222.2 84% 4.9%;
- 
-    --radius: 0.5rem;
-  }
- 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
- 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
- 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
- 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
- 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
- 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
- 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
- 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
- 
-    --ring: 212.7 26.8% 83.9%;
-  }
 }
 
 @layer base {
-  * {
+	* {
-    @apply border-border;
+		box-sizing: border-box;
-  }
+		margin: 0;
-  body {
+		padding: 0;
-    @apply bg-background text-foreground;
+	}
-  }
+
+	html {
+		scroll-behavior: smooth;
+	}
+
+	section[id] {
+		scroll-margin-top: 88px;
+	}
+
+	body {
+		background: var(--color-bg);
+		color: var(--color-text);
+		font-family: var(--font-body);
+		font-size: 15px;
+		line-height: 1.65;
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+
+	::selection {
+		background: color-mix(in srgb, var(--color-accent) 20%, transparent);
+	}
+
+	a {
+		color: inherit;
+		text-decoration: none;
+	}
 }
+

src/index.test.ts

@@ -1,7 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-describe('sum test', () => {
-	it('adds 1 + 2 to equal 3', () => {
-		expect(1 + 2).toBe(3);
-	});
-});

tailwind.config.js

@@ -1,64 +0,0 @@
-import { fontFamily } from "tailwindcss/defaultTheme";
-
-/** @type {import('tailwindcss').Config} */
-const config = {
-	darkMode: ["class"],
-	content: ["./src/**/*.{html,js,svelte,ts}"],
-	safelist: ["dark"],
-	theme: {
-		container: {
-			center: true,
-			padding: "2rem",
-			screens: {
-				"2xl": "1400px"
-			}
-		},
-		extend: {
-			colors: {
-				border: "hsl(var(--border) / <alpha-value>)",
-				input: "hsl(var(--input) / <alpha-value>)",
-				ring: "hsl(var(--ring) / <alpha-value>)",
-				background: "hsl(var(--background) / <alpha-value>)",
-				foreground: "hsl(var(--foreground) / <alpha-value>)",
-				primary: {
-					DEFAULT: "hsl(var(--primary) / <alpha-value>)",
-					foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
-				},
-				secondary: {
-					DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
-					foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
-				},
-				destructive: {
-					DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
-					foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
-				},
-				muted: {
-					DEFAULT: "hsl(var(--muted) / <alpha-value>)",
-					foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
-				},
-				accent: {
-					DEFAULT: "hsl(var(--accent) / <alpha-value>)",
-					foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
-				},
-				popover: {
-					DEFAULT: "hsl(var(--popover) / <alpha-value>)",
-					foreground: "hsl(var(--popover-foreground) / <alpha-value>)"
-				},
-				card: {
-					DEFAULT: "hsl(var(--card) / <alpha-value>)",
-					foreground: "hsl(var(--card-foreground) / <alpha-value>)"
-				}
-			},
-			borderRadius: {
-				lg: "var(--radius)",
-				md: "calc(var(--radius) - 2px)",
-				sm: "calc(var(--radius) - 4px)"
-			},
-			fontFamily: {
-				sans: [...fontFamily.sans]
-			}
-		}
-	},
-};
-
-export default config;

vite.config.ts

@@ -1,9 +1,15 @@
 import { sveltekit } from '@sveltejs/kit/vite';
+import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
-	plugins: [sveltekit()],
+	plugins: [tailwindcss(), sveltekit()],
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}']
+	},
+	server: {
+		host: '127.0.0.1',
+		allowedHosts: ['dev.stanrunge.dev'],
+		hmr: { host: 'dev.stanrunge.dev', protocol: 'wss', clientPort: 443 }
 	}
 });