From 19c15ad33a30a1cf44a8c75d49a84f15ce582211 Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Sun, 5 May 2024 22:48:27 -0700
Subject: [PATCH] fix: correctly space the items on blog for xl screen

---
 src/lib/styles/markdown.css            |  2 +-
 src/routes/blog/[...slug]/+page.svelte | 16 ++++++++--------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/lib/styles/markdown.css b/src/lib/styles/markdown.css
index 9fb5301..0c5f805 100644
--- a/src/lib/styles/markdown.css
+++ b/src/lib/styles/markdown.css
@@ -162,6 +162,6 @@
     height: 1em;
   }
   .hljs {
-    @apply my-4 rounded-xl shadow-lg overflow-x-auto max-w-3xl 2xl:max-w-5xl;
+    @apply my-4 rounded-xl shadow-lg overflow-x-auto;
   }
 }
diff --git a/src/routes/blog/[...slug]/+page.svelte b/src/routes/blog/[...slug]/+page.svelte
index dc37a75..5c762d7 100644
--- a/src/routes/blog/[...slug]/+page.svelte
+++ b/src/routes/blog/[...slug]/+page.svelte
@@ -34,16 +34,16 @@
 
 <TocHeader {tocStore} placeholder="On this page" />
 
-<div class="max-w-3xl 2xl:max-w-3xl px-4 xl:px-0 xl:mx-auto mt-14">
-  <div class="flex-grow basis-3/4 xl:basis-2/4 flex-shrink">
+<div class="mx-auto px-4 mt-14 grid grid-cols-4">
+  <div class="col-span-1" />
+  <div class="col-span-2">
     <ArticleHeader {doc} />
   </div>
-</div>
+  <div class="col-span-1" />
 
-<div class="lg:flex mx-auto px-4">
-  <div class="flex-shrink xl:basis-1/4" />
+  <div class="col-span-1" />
   <main
-    class="flex-grow basis-3/4 xl:basis-2/4 flex-shrink"
+    class="col-span-2"
     use:toc={{
       store: tocStore,
       observe: true,
@@ -58,8 +58,8 @@
     <Article {doc} />
   </main>
 
-  <aside class="basis-1/4 relative hidden lg:block mt-10">
-    <div class="sticky top-32 mx-8">
+  <aside class="col-span-1">
+    <div class="sticky top-32 mx-8 w-fit mt-14">
       <StickyToc {tocStore} />
     </div>
   </aside>