From 9a6ad6937800c5b65f7c4b231eff07704f59153b Mon Sep 17 00:00:00 2001
From: Jewgeni Lewash <j.lewash@gmail.com>
Date: Sun, 7 Apr 2024 09:11:31 +0200
Subject: [PATCH] feat(blog): add custom prose styling

---
 src/pages/blog/[...slug].astro |  1 +
 src/styles/prose.css           | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+)
 create mode 100644 src/styles/prose.css

diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index b7c0e32..9e753c3 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -3,6 +3,7 @@ import { getCollection } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import BaseLayout from '@/layouts/BaseLayout.astro';
 import Table from '@/components/blog/Table.astro';
+import '@/styles/prose.css';
 
 export async function getStaticPaths() {
 	const blogEntries = await getCollection('blog');
diff --git a/src/styles/prose.css b/src/styles/prose.css
new file mode 100644
index 0000000..6083c72
--- /dev/null
+++ b/src/styles/prose.css
@@ -0,0 +1,18 @@
+.prose {
+	@apply break-words;
+	@apply prose-a:text-primary-600 prose-a:underline prose-a:transition prose-a:duration-150 prose-a:ease-in-out prose-a:hover:text-primary-500 prose-a:focus:outline-none prose-a:focus:ring-2 prose-a:focus:ring-primary-500 prose-a:dark:text-primary-400 prose-a:dark:hover:text-primary-300;
+	@apply prose-ul:mb-4 prose-ul:ml-8;
+	@apply prose-ol:mb-4 prose-ol:ml-8;
+	@apply prose-li:mb-2;
+	@apply prose-code:rounded prose-code:bg-gray-100 prose-code:px-1 prose-code:py-0.5 prose-code:text-sm prose-code:text-base-600 prose-code:dark:bg-gray-800 prose-code:dark:text-base-400;
+	code::before {
+		content: '';
+	}
+	code::after {
+		content: '';
+	}
+	pre code {
+		@apply block overflow-auto rounded bg-gray-800 p-4 text-white;
+	}
+	@apply prose-blockquote:my-4 prose-blockquote:border-l-4 prose-blockquote:border-secondary-300 prose-blockquote:pl-4 prose-blockquote:dark:border-secondary-600;
+}