From 0961df361c0637cd1045630fe74405d91cd45a00 Mon Sep 17 00:00:00 2001
From: Hayden Hargreaves <hhargreaves2006@gmail.com>
Date: Mon, 24 Feb 2025 09:51:20 -0700
Subject: [PATCH] BUG: Lists aren't rendering properly.

---
 src/app.css                          | 65 ++++++++++++++++++++++++++++
 src/blog/postOne.md                  | 65 +++++++++++++++++++++++++++-
 src/routes/blog/[title]/+page.svelte |  5 +++
 3 files changed, 134 insertions(+), 1 deletion(-)

diff --git a/src/app.css b/src/app.css
index 8e58e4c..edc58a9 100644
--- a/src/app.css
+++ b/src/app.css
@@ -3,6 +3,71 @@
 
 /* This is very painful. There must be a better way. */
 @layer base {
+
+  div.blog-wrapper h1,
+  div.blog-wrapper h2,
+  div.blog-wrapper h3,
+  div.blog-wrapper h4,
+  div.blog-wrapper h5,
+  div.blog-wrapper h6,
+  div.blog-wrapper p,
+  div.blog-wrapper ul,
+  div.blog-wrapper ol {
+    @apply text-gray-300;
+  }
+
+  div.blog-wrapper ul {
+    list-style-type: disc !important;
+    @apply bg-red-500;
+  }
+
+  div.blog-wrapper.prose ul {
+    list-style-type: disc;
+    @apply bg-red-500;
+  }
+
+  div.blog-wrapper ul {
+    @apply list-decimal;
+  }
+
+  div.blog-wrapper h1 {
+    @apply text-4xl font-bold;
+  }
+
+  div.blog-wrapper h2 {
+    @apply text-3xl font-bold;
+  }
+
+  div.blog-wrapper h3 {
+    @apply text-2xl font-bold;
+  }
+
+  div.blog-wrapper h4 {
+    @apply text-xl font-bold;
+  }
+
+  div.blog-wrapper h5 {
+    @apply text-lg font-bold;
+  }
+
+  /* Same size as h5, but not bold */
+  div.blog-wrapper h6 {
+    @apply text-lg;
+  }
+
+  div.blog-wrapper p {
+    @apply text-sm;
+  }
+
+  div.blog-wrapper a {
+    @apply underline hover:text-blue-300;
+  }
+
+  div.blog-wrapper p code {
+    @apply bg-[#191724] p-1;
+  }
+
+
   pre {
     background-color: #191724;
     padding: 0.5rem 2rem;
diff --git a/src/blog/postOne.md b/src/blog/postOne.md
index 8daeed7..25cfcea 100644
--- a/src/blog/postOne.md
+++ b/src/blog/postOne.md
@@ -1,7 +1,70 @@
-# This is a blog post
+# H1 Tag
+## H2 Tag
+### H3 Tag
+#### H4 Tag
+##### H5 Tag
+###### H6 Tag
+
+*This text is italic*
+**This text is bold**
+***This text is bold and italic***
+
+[This is an anchor](https://www.youtube.com), but this is not.
 
 This is a blog post about something. It's really interesting. I hope you enjoy it.
 
+# Markdown Quirks and Edge Cases
+
+## Emphasis and Strong Emphasis
+
+*This text is emphasized.*
+_This text is also emphasized._
+
+**This text is strong emphasis.**
+__This text is also strong emphasis.__
+
+* Item 1
+* Item 2
+* Item 3
+
++ Another Item 1
++ Another Item 2
+
+1. Yet Another Item 1
+2. Yet Another Item 2
+
+***This text is both emphasized and strong!***
+___This text is also both emphasized and strong!___
+
+## Strikethrough
+
+~~This text is strikethrough.~~
+
+## Links
+
+[Link to Google](https://www.google.com)
+[Link with title](https://www.google.com "Google's Homepage")
+[Relative link](/some/page)
+[Link with spaces in URL](https://www.google.com/search?q=hello%20world)
+<https://www.google.com>  (Auto-linked URL)
+
+## Images
+
+![Alt text for image](https://www.example.com/image.jpg)
+![Alt text with title](https://www.example.com/image.jpg "Image title")
+![Image with spaces in URL](https://www.example.com/image%20with%20spaces.png)  (URL encoded spaces)
+
+## Code
+
+`Inline code`
+```javascript
+// Code block with language specified
+function myFunction() {
+  console.log("Hello, world!");
+}
+
+```
+
 My favorite color is red.
 
 ```cpp
diff --git a/src/routes/blog/[title]/+page.svelte b/src/routes/blog/[title]/+page.svelte
index 700665f..b9567be 100644
--- a/src/routes/blog/[title]/+page.svelte
+++ b/src/routes/blog/[title]/+page.svelte
@@ -6,3 +6,8 @@
 <div class="blog-wrapper prose">
 	{@html data.post.content}
 </div>
+<ul class="list-disc">
+	<li>Item 1</li>
+	<li>Item 2</li>
+	<li>Item 3</li>
+</ul>