🎨 style(BlogPost.astro): update flexbox properties in the tag contain…

…er to center align and add vertical gap for better visual spacing 🎨 style([...slug].astro): remove unnecessary class and adjust grid column sizes for better layout 🎨 style([...slug].astro): increase font size of prose container for better readability on larger screens
ilovefreesw · Aug 18, 2023 · d3ee8b4 · d3ee8b4
1 parent 692a854
commit d3ee8b4
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 4 deletions.
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -39,7 +39,7 @@ const articleDate = pubDate.toISOString()
 				</h1>
 			</div>
 
-			<div class='flex flex-wrap gap-2 md:gap-5'>
+			<div class='flex flex-wrap justify-center items-center gap-2 gap-y-4 md:gap-5'>
 				{tags.map((tag) => <Tag>{tag}</Tag>)}
 			</div>
 		</header>

diff --git a/src/pages/post/[...slug].astro b/src/pages/post/[...slug].astro
@@ -33,8 +33,7 @@ const { Content, headings, remarkPluginFrontmatter } = await post.render()
 ---
 
 <BlogPost data={post.data} headings={headings} readTime={remarkPluginFrontmatter.minutesRead}>
-	<div
-		class='grid grid-cols-1 px-2 sm:px-12 sm: md:pl-2 md:grid-cols-[20%_auto] gap-16 mt-8 md:pr-12'>
+	<div class='grid grid-cols-1 md:pl-2 md:grid-cols-[20%_auto] gap-16 mt-8'>
 		<!-- aside  -->
 		<aside class='md:flex flex-col gap-8 hidden'>
 			<Share />
@@ -45,7 +44,7 @@ const { Content, headings, remarkPluginFrontmatter } = await post.render()
 
 		<!-- main -->
 		<div class='max-w-full w-full'>
-			<div class='prose dark:prose-invert mb-12 min-w-full'>
+			<div class='prose md:prose-lg dark:prose-invert mb-12 min-w-full'>
 				<Content components={{ pre: Code }} />
 			</div>