fix(site): postcss fixes

site/package.json

@@ -22,6 +22,7 @@
 		"eslint-plugin-svelte": "^2.30.0",
 		"mdsvex": "^0.11.0",
 		"postcss": "^8.4.30",
+		"postcss-load-config": "^4.0.1",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.10.1",
 		"svelte": "^4.0.5",

site/postcss.config.js

@@ -1,6 +1,6 @@
+import tailwind from 'tailwindcss'
+import tailwindConfig from './tailwind.config.js'
+import autoprefixer from 'autoprefixer'
 export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
+    plugins: [tailwind(tailwindConfig),autoprefixer]
 }

site/src/mdsvex/BlogLayout.svelte

@@ -11,18 +11,5 @@
 	<span class="font-mono mb-2 mt-1 sm:text-lg"
 		>{date} - <a class="text-accent" href={`https://x.com/${author}`}>{author}</a></span
 	>
-
 	<slot />
 </main>
-
-<!--
-<style lang="postcss">
-	:global(.blog-post-container > p) {
-		@apply sm:text-xl mb-4;
-	}
-
-	:global(.blog-post-container > h2) {
-		@apply sm:text-3xl sm:mt-4 mb-0 font-semibold mb-4;
-	}
-</style>
-	!-->

site/src/routes/blog/+layout.svelte

@@ -0,0 +1,14 @@
+<slot />
+
+<!-- this is actually a layout for the blog posts !-->
+
+<style lang="postcss">
+	/* \u003A is a colon */
+	:global(.blog-post-container > p) {
+		@apply sm:text-xl mb-4;
+	}
+
+	:global(.blog-post-container > h2) {
+		@apply sm:text-3xl sm:mt-4 mb-0 font-semibold mb-4;
+	}
+</style>

site/svelte.config.js

@@ -1,3 +1,4 @@
+import preprocess from 'svelte-preprocess';
 import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/kit/vite';
 import { mdsvex } from 'mdsvex';
@@ -18,6 +19,9 @@ const config = {
 			}
 		}),
 		vitePreprocess(),
+		preprocess({
+			postcss: true
+		})
 	],
 
 	kit: {