fix(Menu.Item): added tailwind typography

docs(installation): added tailwind typography
N00nDay · Oct 8, 2022 · 21b07b3 · 21b07b3
1 parent c1a2431
commit 21b07b3
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 12 deletions.
diff --git 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
@@ -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>