From bb51f9ab4a5f9f4749c368594987b2d0f1a25120 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Sat, 1 Jul 2023 04:10:18 +0800
Subject: [PATCH] Update markdown styling

---
 components/card/MarkdownRenderer.vue | 30 ++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/components/card/MarkdownRenderer.vue b/components/card/MarkdownRenderer.vue
index 395cc44..60f5bd7 100644
--- a/components/card/MarkdownRenderer.vue
+++ b/components/card/MarkdownRenderer.vue
@@ -6,7 +6,7 @@ const parsedMarkdown = computed(() => {
 </script>
 
 <template>
-    <div class="bg-secondary flex h-full min-h-screen w-full flex-col items-center overflow-y-scroll px-12 py-4">
+    <div class="flex h-full min-h-screen w-full flex-col items-center overflow-y-scroll bg-secondary px-12 py-4">
         <div class="h-full max-h-full w-full" v-html="parsedMarkdown">
         </div>
     </div>
@@ -17,21 +17,18 @@ const parsedMarkdown = computed(() => {
     @apply my-4 text-[#E6EDF3];
 }
 
-:deep(h1) {
-    @apply mt-12;
-}
-
+/* Headers */
 :deep(h1),
 :deep(h2),
 :deep(h3),
 :deep(h4),
 :deep(h5),
 :deep(h6) {
-    @apply border-lightgray border-b pb-2;
+    @apply border-b border-lightgray pb-2;
 }
 
 :deep(h1) {
-    @apply text-4xl;
+    @apply mt-12 text-4xl;
 }
 
 :deep(h2) {
@@ -54,23 +51,36 @@ const parsedMarkdown = computed(() => {
     @apply text-xs;
 }
 
+/* Lists */
 :deep(ul li),
 :deep(ol li) {
-    @apply ml-8;
+    @apply my-2 pl-8;
+}
+
+:deep(ul) {
+    @apply list-inside list-disc;
+}
+
+:deep(ol) {
+    counter-reset: list;
 }
 
-:deep(li) {
-    @apply my-0;
+:deep(ol li::before) {
+    counter-increment: list;
+    content: counters(list, '.') ' ';
 }
 
+/* Checkbox */
 :deep(input[type='checkbox']) {
     @apply mr-2;
 }
 
+/* Code Block */
 :deep(pre) {
     @apply bg-lightgray p-2;
 }
 
+/* Quotes */
 :deep(blockquote) {
     @apply border-l-4 border-l-[#E6EDF3] pl-4;
 }