Update markdown styling

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) {
+/* Headers */
-    @apply mt-12;
-}
-
 :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) {
+:deep(ol li::before) {
-    @apply my-0;
+    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;
 }