From 21b07b3837f1f603e70f8f2f4cdc2c9c31cb49ee Mon Sep 17 00:00:00 2001
From: Craig Howell <craighowell@craigs-mbp.lan>
Date: Sat, 8 Oct 2022 13:02:29 -0400
Subject: [PATCH] fix(Menu.Item): added tailwind typography docs(installation):
 added tailwind typography

---
 src/lib/components/menu/Item.svelte  |  7 +++++--
 src/routes/installation/+page.svelte | 25 +++++++++++++++----------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/menu/Item.svelte b/src/lib/components/menu/Item.svelte
index 1c1a9885..38e2fa52 100644
--- a/src/lib/components/menu/Item.svelte
+++ b/src/lib/components/menu/Item.svelte
@@ -35,7 +35,10 @@
 	}
 </script>
 
-<div class="transition-all duration-300" style="width: {$menuCollapse ? '3rem' : '100%'}">
+<div
+	class="prose max-w-full transition-all duration-300"
+	style="width: {$menuCollapse ? '3rem' : '100%'}"
+>
 	<a
 		on:click
 		use:tooltip={{
@@ -46,7 +49,7 @@
 			disabled: !$menuCollapse
 		}}
 		{href}
-		class="group relative w-full h-10 overflow-hidden flex items-center justify-start px-3 py-2 text-sm font-medium rounded-md"
+		class="group no-underline relative w-full h-10 overflow-hidden flex items-center justify-start px-3 py-2 text-sm font-medium rounded-md"
 		class:text-light-content={active}
 		class:dark:text-dark-content={active}
 		class:text-light-secondary-content={!active}
diff --git a/src/routes/installation/+page.svelte b/src/routes/installation/+page.svelte
index f2d514a6..d5e2d541 100644
--- a/src/routes/installation/+page.svelte
+++ b/src/routes/installation/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { Divider } from '$lib';
 	import CodeBlock from '../../docs/components/code-block';
 
 	const installCode = 'npm i -D stwui';
@@ -17,21 +18,25 @@ module.exports = {
 </script>
 
 <div class="p-12 w-full h-full overflow-auto">
-	<h1 class="text-5xl font-bold text-light-content dark:text-dark-content mb-4">Installation</h1>
+	<article class="prose w-full max-w-full">
+		<h1 class="text-light-content dark:text-dark-content mb-0">Installation</h1>
+		<Divider />
 
-	<p class="mb-3 text-light-content dark:text-dark-content">
-		Run the following command to add STWUI to your project:
-	</p>
+		<p class="mb-3 mt-5 text-light-content dark:text-dark-content">
+			Run the following command to add STWUI to your project:
+		</p>
+	</article>
 
 	<CodeBlock language="bash" code={installCode} />
 
-	<h1 class="text-5xl font-bold text-light-content dark:text-dark-content mb-4 mt-12">
-		Configure TailwindCSS
-	</h1>
+	<article class="prose w-full max-w-full">
+		<h1 class="text-light-content dark:text-dark-content mb-0 mt-12">Configure TailwindCSS</h1>
+		<Divider />
 
-	<p class="mb-3 text-light-content dark:text-dark-content">
-		Modify your tailwind.config.cjs file with the following:
-	</p>
+		<p class="mb-3 mt-5 text-light-content dark:text-dark-content">
+			Modify your tailwind.config.cjs file with the following:
+		</p>
+	</article>
 
 	<CodeBlock language="javascript" code={tailwindCode} />
 </div>