From d5f701a790aa8ea4526c2074c332ec01c0c93f27 Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Wed, 17 Apr 2024 23:31:16 -0700
Subject: [PATCH] style: fix some widths on blog article page

---
 blog/2024/arch-setup/content.md        | 1 -
 src/lib/components/Blog/Article.svelte | 2 +-
 src/lib/styles/markdown.pcss           | 3 ++-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/blog/2024/arch-setup/content.md b/blog/2024/arch-setup/content.md
index a19aa7d..7a96447 100644
--- a/blog/2024/arch-setup/content.md
+++ b/blog/2024/arch-setup/content.md
@@ -19,4 +19,3 @@ Here's the general gist of the main setup steps:
 6. If you were successful in setting up the GPU drivers, you should now be able to enter Plasma with Wayland. For me, performance is much better and smoother, and I'm able to set up the display configurations that I want without weird `xrander` hacks. However, at this point, Wayland is still super problematic, and even more setup will need to be done.
 7. Set the environment variable to tell all electron apps to use native Wayland instead of xwayland. This will stop weird behavior in discord, vscode, obsidian. etc.
 8. Enable the experimental Nvidia kernel flag to preserve the entire video memory on suspend. This will allow you to use suspend properly and not break everything.
-
diff --git a/src/lib/components/Blog/Article.svelte b/src/lib/components/Blog/Article.svelte
index ba3ee6a..e62183e 100644
--- a/src/lib/components/Blog/Article.svelte
+++ b/src/lib/components/Blog/Article.svelte
@@ -23,7 +23,7 @@
 				reverseDateAndRest
 			/>
 		</div>
-		<figure class="w-[80%]">
+		<figure class="w-full lg:w-[80%]">
 			<img src={doc.image.src} alt={doc.image.alt} class="rounded-xl shadow-md" />
 			<figcaption class="mt-2 text-center text-muted-foreground">{doc.image.caption}</figcaption>
 		</figure>
diff --git a/src/lib/styles/markdown.pcss b/src/lib/styles/markdown.pcss
index 0b19699..0d2fc0c 100644
--- a/src/lib/styles/markdown.pcss
+++ b/src/lib/styles/markdown.pcss
@@ -53,6 +53,7 @@
 	}
 
 	table {
+    @apply max-w-3xl xl:max-w-5xl;
 		font-size: 1rem;
 		text-align: left;
 		caption-side: bottom;
@@ -161,6 +162,6 @@
 		height: 1em;
 	}
 	.hljs {
-		@apply my-4 rounded-xl shadow-lg max-w-3xl overflow-x-auto;
+		@apply my-4 rounded-xl shadow-lg max-w-3xl xl:max-w-5xl overflow-x-auto;
 	}
 }