🔧 Migrated to skeleton rc2

nwrenger · Feb 28, 2025 · 4496d29 · 4496d29
1 parent 5e16bdc
commit 4496d29
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 60 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -14,24 +14,25 @@
 		"lint": "prettier --check ."
 	},
 	"devDependencies": {
-		"@skeletonlabs/skeleton": "^3.0.0-next.10",
-		"@skeletonlabs/skeleton-svelte": "^1.0.0-next.19",
+		"@skeletonlabs/skeleton": "^3.0.0-next.11",
+		"@skeletonlabs/skeleton-svelte": "^1.0.0-next.20",
 		"@sveltejs/adapter-static": "^3.0.8",
-		"@sveltejs/kit": "^2.16.0",
-		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@sveltejs/kit": "^2.17.3",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@tailwindcss/forms": "^0.5.10",
 		"@tailwindcss/typography": "^0.5.16",
 		"@types/luxon": "^3.4.2",
 		"autoprefixer": "^10.4.20",
-		"lucide-svelte": "^0.475.0",
+		"lucide-svelte": "^0.476.0",
 		"luxon": "^3.5.0",
-		"prettier": "^3.4.2",
+		"prettier": "^3.5.2",
 		"prettier-plugin-svelte": "^3.3.3",
-		"prettier-plugin-tailwindcss": "^0.6.10",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
-		"tailwindcss": "^3.4.17",
-		"typescript": "^5.0.0",
-		"vite": "^6.0.0"
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"svelte": "^5.20.5",
+		"svelte-check": "^4.1.4",
+		"tailwindcss": "^4.0.9",
+		"typescript": "^5.7.3",
+		"vite": "^6.2.0",
+		"@tailwindcss/vite": "^4.0.9"
 	}
 }
diff --git a/postcss.config.js b/postcss.config.js
diff --git a/src/app.css b/src/app.css
@@ -1,16 +1,30 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import 'tailwindcss';
+@plugin '@tailwindcss/typography';
+@plugin '@tailwindcss/forms';
+
+@source '../node_modules/@skeletonlabs/skeleton-svelte';
+
+@import '@skeletonlabs/skeleton';
+@import '@skeletonlabs/skeleton/optional/presets';
+@import '@skeletonlabs/skeleton/themes/rose';
 
 @layer base {
 	html {
 		@apply h-full;
 	}
 	body {
-		background-image:
-			radial-gradient(at 20% 10%, rgba(var(--color-secondary-500) / 0.075) 0px, transparent 40%),
-			radial-gradient(at 75% 10%, rgba(var(--color-primary-500) / 0.075) 0px, transparent 50%);
 		background-attachment: fixed;
+		background-image:
+			radial-gradient(
+				at 0% 25%,
+				color-mix(in oklab, var(--color-primary-500) 10%, transparent) 0px,
+				transparent 30%
+			),
+			radial-gradient(
+				at 15% 6%,
+				color-mix(in oklab, var(--color-success-500) 5%, transparent) 0px,
+				transparent 30%
+			);
 		background-position: center;
 		background-repeat: no-repeat;
 		background-size: cover;
@@ -24,7 +38,8 @@
 	code {
 		@apply code;
 	}
-	.min-h-svh-y-5 {
-		@apply min-h-[calc(100svh-20px)];
-	}
+}
+
+@utility min-h-svh-y-5 {
+	min-height: calc(100svh - 20px);
 }
diff --git a/src/app.html b/src/app.html
@@ -1,12 +1,12 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="rose">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.webp" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" data-theme="rose">
+	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/lib/components/ui/ContactsSelect.svelte b/src/lib/components/ui/ContactsSelect.svelte
@@ -21,7 +21,7 @@
 			{#each socials as { name, url, icon: Icon }}
 				<a
 					href={url}
-					class="btn !w-full justify-start preset-tonal"
+					class="btn preset-tonal w-full! justify-start"
 					target="_blank"
 					onclick={popoverClose}
 				>

diff --git a/src/lib/index.ts b/src/lib/index.ts
@@ -14,7 +14,7 @@ export const takes: Take[] = [
 		name: 'Svelte',
 		icon: '🧡',
 		description:
-			"When I am doing frontend, then only using Svelte. It's a great framework and I am, like with Rust, also very proficient in it!"
+			"When I am doing frontend, then only using Svelte. It's a great framework and I am, like with Rust, also very versed in it!"
 	},
 	{
 		name: 'Visual Studio Code & Zed',

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -24,7 +24,7 @@
 				or consider sponsoring me. Feel free to reach out for a chat or anything else!
 			</p>
 			<div
-				class="flex flex-col items-center justify-center space-y-4 pt-4 md:flex-row md:space-x-4 md:space-y-0"
+				class="flex flex-col items-center justify-center space-y-4 pt-4 md:flex-row md:space-y-0 md:space-x-4"
 			>
 				<a href="/projects" class="btn preset-tonal">My Projects</a>
 				<a
@@ -71,7 +71,7 @@
 		<div class="grid gap-4 md:grid-cols-2">
 			{#each takes as { name, icon, description }}
 				<div
-					class="card card-hover flex h-full flex-col justify-between overflow-hidden border-[1px] border-surface-200-800 preset-filled-surface-100-900"
+					class="card card-hover border-surface-200-800 preset-filled-surface-100-900 flex h-full flex-col justify-between overflow-hidden border-[1px]"
 				>
 					<article class="space-y-2 p-4">
 						<div>

diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
@@ -36,7 +36,7 @@
 
 	<div class="flex items-center justify-between">
 		<h2 class="h2">Projects</h2>
-		<button type="button" class="chip chip-input preset-filled-surface-500 md:text-base">
+		<button type="button" class="chip preset-filled-surface-500 md:text-base">
 			Total: {projects.length}
 		</button>
 	</div>
@@ -51,12 +51,12 @@
 			{#each sortedProjects[year] as { title, date, summary, picture, description, link, archived }}
 				<div
 					id={title}
-					class="card card-hover flex h-full flex-col justify-between divide-y overflow-hidden border-[1px] border-surface-200-800 divide-surface-200-800 preset-filled-surface-100-900"
+					class="card card-hover preset-filled-surface-100-900 border-surface-200-800 divide-surface-200-800 flex h-full w-full flex-col justify-between divide-y overflow-hidden border-[1px]"
 				>
-					<div class="divide-y divide-surface-200-800">
+					<div class="divide-surface-200-800 h-full divide-y">
 						<header>
 							<a href={'projects/' + picture} target="_blank" class="w-full">
-								<ImageLoader src={'projects/' + picture} alt={title} ratio="aspect-[21/9]" />
+								<ImageLoader src={'projects/' + picture} alt={title} ratio="aspect-21/9" />
 							</a>
 						</header>
 						<article class="space-y-2 p-4">
@@ -73,7 +73,7 @@
 						<p class="text-base opacity-80">
 							<a href={link} class="anchor flex w-fit items-center" target="_blank">
 								See the {archived ? 'archived' : ''} Project here
-								<ExternalLink class="pl-2 pt-[2px]" />
+								<ExternalLink class="pt-[2px] pl-2" />
 							</a>
 						</p>
 						<p class="text-base opacity-80">On {date.toFormat('MMMM dd, yyyy')}</p>

diff --git a/tailwind.config.ts b/tailwind.config.ts
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,6 +1,7 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
+import tailwind from '@tailwindcss/vite';
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit(), tailwind()]
 });