Format classnames with prettier plugin

package.json

@@ -17,23 +17,21 @@
 		"@sveltejs/adapter-auto": "^2.1.0",
 		"@sveltejs/kit": "^1.21.0",
 		"@types/marked": "^5.0.0",
+		"@unocss/extractor-svelte": "^0.53.4",
 		"@unocss/transformer-directives": "^0.53.4",
 		"marked": "^5.1.0",
 		"mdsvex": "^0.11.0",
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
+		"prettier-plugin-tailwindcss": "^0.3.0",
 		"sass": "^1.63.6",
 		"svelte": "^4.0.3",
 		"svelte-check": "^3.4.4",
 		"sveltekit-autoimport": "^1.7.0",
 		"tslib": "^2.6.0",
 		"typescript": "^5.1.6",
+		"unocss": "^0.53.4",
 		"vite": "^4.3.9"
 	},
-	"type": "module",
+	"type": "module"
-	"dependencies": {
-		"@material/web": "1.0.0-pre.12",
-		"@unocss/extractor-svelte": "^0.53.4",
-		"unocss": "^0.53.4"
-	}
 }

src/lib/components/Footer.svelte

@@ -1,7 +1,7 @@
-<footer class="mt-a p-5 pt-12 text-center text-#8c8b8a @light:text-#4c4b4a">
+<footer class="mt-a text-#8c8b8a @light:text-#4c4b4a p-5 pt-12 text-center">
 	<a href="/" class="pe-1.5">Revival Archive</a>
 	2023-2023
-	<nav class="text-white mt-5 mb-4">
+	<nav class="mb-4 mt-5 text-white">
 		<a href="/about">About</a>
 		|
 		<a href="https://discord.gg/zfC3VH2WBa">Discord</a>

src/lib/components/Navbar.svelte

@@ -1,15 +1,17 @@
-<div class="bg-#1f1d1c @light:bg-white w-full lg:w-90 lg:h-a
+<div
-	ps-6 pb-3 lg:pt-42 fixed lg:static flex lg:flex-col flex-wrap">
+	class="bg-#1f1d1c @light:bg-white lg:w-90 lg:h-a lg:pt-42
-	<span class="mt-3 me-12 lg:me-0 hidden sm:inline-block">
+	fixed flex w-full flex-wrap pb-3 ps-6 lg:static lg:flex-col">
+	<span class="me-12 mt-3 hidden sm:inline-block lg:me-0">
 		<a
 			href="/"
-			class="txt text-white @light:text-black
+			class="txt @light:text-black lg:text-2.2rem
-			text-2xl lg:text-2.2rem font-600">
+			font-600 text-2xl text-white">
 			Revival Archive
 		</a>
 	</span>
-	<nav class="flex lg:flex-col flex-wrap
+	<nav
-	box-border justify-self-center mt-3">
+		class="mt-3 box-border flex
+	flex-wrap justify-self-center lg:flex-col">
 		<a href="/">Home</a>
 		<a href="/about">About</a>
 		<a href="/index">Revival Index</a>

src/lib/components/Stars.svelte

@@ -4,7 +4,7 @@
 
 {#each { length: 5 } as _, i}
 	<div
-		class="w-5 h-5 me-1.5 inline-block"
+		class="me-1.5 inline-block h-5 w-5"
 		style="--rating: {Math.min(1, Math.min(5, rating - i)) * 100}%" />
 {/each}
 

src/routes/+error.svelte

@@ -7,9 +7,9 @@
 	<title>{$page.error?.message} • Revival Archive</title>
 </svelte:head>
 
-<div class="flex flex-col justify-center items-center">
+<div class="flex flex-col items-center justify-center">
-	<div class="bg-a p-8 px-22 rounded-4 text-center mt-30vh">
+	<div class="bg-a px-22 rounded-4 mt-30vh p-8 text-center">
-		<h1 class="m-0 mb-5 text-2.2rem">Error {$page.status}</h1>
+		<h1 class="text-2.2rem m-0 mb-5">Error {$page.status}</h1>
 		{$page.error?.message}
 	</div>
 </div>

src/routes/+layout.svelte

@@ -6,10 +6,10 @@
 <div class="flex flex-col lg:flex-row">
 	<Navbar />
 
-	<div class="flex flex-col w-full h-screen oveflow-scroll">
+	<div class="oveflow-scroll flex h-screen w-full flex-col">
 		<main
-			class="box-border ps-5 pe-2.5 pt-18 sm:pt-24 lg:pt-12 sm:mx-a
+			class="pt-18 sm:mx-a sm:w-155 md:w-190 lg:w-170 xl:w-230 2xl:w-280
-			sm:w-155 md:w-190 lg:w-170 xl:w-230 2xl:w-280">
+			box-border pe-2.5 ps-5 sm:pt-24 lg:pt-12">
 			<slot />
 		</main>
 

src/routes/+page.md

@@ -1,4 +1,5 @@
 <svelte:head>
+
 <meta name="description" content="Blog posts and reviews about revivals" />
 <title>Revival Archive</title>
 </svelte:head>

src/routes/blog/+page.svelte

@@ -9,10 +9,12 @@
 <h1>Blog Posts</h1>
 
 {#each data.posts as post}
-	<a href="/blog/{post.path}" class="txt text-white @light:text-dark
+	<a
-		hover:text-#ccc @light:hover:text-#555 block bg-a rounded-3
+		href="/blog/{post.path}"
-		transition durition-500 hover:shadow-xl box-border">
+		class="txt @light:text-dark hover:text-#ccc
-		<article class="py-3 px-6 mb-4">
+		@light:hover:text-#555 bg-a rounded-3 durition-500 box-border
+		block text-white transition hover:shadow-xl">
+		<article class="mb-4 px-6 py-3">
 			<h2 class="my-2">{post.title}</h2>
 			<p class="my-2">
 				Published {new Date(post.date).toLocaleDateString("en-GB", {

src/routes/index/+page.svelte

@@ -78,24 +78,24 @@
 
 <h1>Revival Index</h1>
 
-<div class="grid md:grid-cols-2 xl:grid-cols-3 gap-4">
+<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
 	{#each revivals as revival}
 		<a
 			href="/index"
-			class="txt bg-#1f1c1d @light:bg-white p-5 rounded-2 flex flex-col
+			class="txt bg-#1f1c1d @light:bg-white rounded-2 card durition-500
-			card transition durition-500 hover:shadow-xl box-border
+			@light:text-black box-border flex flex-col p-5 text-white
-			text-white @light:text-black">
+			transition hover:shadow-xl">
 			<h2 class="m-0 mb-1">{revival.name}</h2>
-			<div class="text-white flex flex-wrap">
+			<div class="flex flex-wrap text-white">
 				{#each revival.years as year}
 					<span
 						class="{years[year]}
-						rounded-full px-2 py-0.5 my-1 text-sm me-2">
+						my-1 me-2 rounded-full px-2 py-0.5 text-sm">
 						{year}
 					</span>
 				{/each}
 			</div>
-			<div class="mt-5 mb-36">
+			<div class="mb-36 mt-5">
 				This revival is one of the revivals ever! Play today!
 			</div>