Update markdown render card (removed tailwind typography)

components/card/MarkdownRenderer.client.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-	interface Props {
-		content: string
-		state: string
-	}
-
-	const props = defineProps<Props>()
-
-	const description = useDescription()
-	const parsedMarkdown = computed(() => {
-		return stringToMarkdown(description.value)
-	})
-</script>
-
-<template>
-	<div class="bg-secondary h-full min-h-screen w-full overflow-y-scroll p-4">
-		<div
-			class="prose prose-invert h-full max-h-full"
-			v-html="parsedMarkdown">
-		</div>
-	</div>
-</template>

components/card/MarkdownRenderer.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+const note = useNote()
+const parsedMarkdown = computed(() => {
+    return stringToMarkdown(note.value.description)
+})
+</script>
+
+<template>
+    <div class="bg-secondary flex h-full min-h-screen w-full flex-col items-center overflow-y-scroll p-4">
+        <div class="h-full max-h-full w-full" v-html="parsedMarkdown">
+        </div>
+    </div>
+</template>
+
+<style scoped>
+:deep(*) {
+    @apply text-[#E6EDF3];
+}
+
+:deep(h1),
+:deep(h2),
+:deep(h3),
+:deep(h4),
+:deep(h5),
+:deep(h6) {
+    @apply border-lightgray border-b pb-2;
+}
+
+:deep(h1) {
+    @apply text-4xl;
+}
+
+:deep(h2) {
+    @apply text-2xl;
+}
+
+:deep(h3) {
+    @apply text-lg;
+}
+
+:deep(h4) {
+    @apply text-base;
+}
+
+:deep(h5) {
+    @apply text-sm;
+}
+
+:deep(h6) {
+    @apply text-xs;
+}
+
+:deep(li input) {
+    @apply my-0;
+}
+
+:deep(pre) {
+    @apply bg-lightgray;
+}
+</style>