fix: some styling

oxwazz · Nov 5, 2024 · f08c644 · f08c644
1 parent 1a9f126
commit f08c644
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 14 deletions.
diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -11,9 +11,9 @@ const meta = {
 ---
 
 <PageLayout meta={meta}>
-	<h1 class="title mb-6">404 | Oops something went wrong</h1>
-	<p class="mb-8">Please use the navigation to find your way back</p>
-	<div class="my-4 grid justify-center">
+	<h1 class="title mx-auto mb-6 max-w-screen-sm">404 | Oops something went wrong</h1>
+	<p class="mx-auto mb-8 max-w-screen-sm">Please use the navigation to find your way back</p>
+	<div class="mx-auto my-4 grid max-w-screen-sm justify-center">
 		<Image
 			class="rotate-180"
 			src={aboutImg}

diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -11,7 +11,7 @@ const meta = {
 ---
 
 <PageLayout meta={meta}>
-	<div class="space-y-6">
+	<div class="mx-auto max-w-screen-sm space-y-6">
 		<h1 class="title">About</h1>
 		<p>
 			Hi, I’m a starter Astro. I’m particularly great for getting you started with your own blogging

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -53,12 +53,12 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS);
 ---
 
 <PageLayout meta={{ title: "Home" }}>
-	<section>
+	<section class="mx-auto max-w-screen-sm">
 		<h1 class="title mb-6 text-3xl font-extrabold">Muhammad Rahmahalim</h1>
 		<p class="mb-4">Hi, I am Muhammad Rahmahalim.</p>
 		<SocialList />
 	</section>
-	<section aria-label="Blog post list" class="mt-16">
+	<section aria-label="Blog post list" class="mx-auto mt-16 max-w-screen-sm">
 		<h2 class="title mb-4 text-xl">Posts</h2>
 		<ul class="space-y-4 sm:space-y-2">
 			{

diff --git a/src/pages/personals/[...page].astro b/src/pages/personals/[...page].astro
@@ -42,8 +42,8 @@ const paginationProps = {
 ---
 
 <PageLayout meta={meta}>
-	<h1 class="title mb-6">Posts</h1>
-	<div class="grid gap-y-16 sm:grid-cols-[3fr_1fr] sm:gap-x-8">
+	<h1 class="title mx-auto mb-6 max-w-screen-sm">Posts</h1>
+	<div class="mx-auto grid max-w-screen-sm gap-y-16 sm:grid-cols-[3fr_1fr] sm:gap-x-8">
 		<section aria-label="Blog post list">
 			<ul class="space-y-8 text-start">
 				{

diff --git a/src/pages/posts/[...page].astro b/src/pages/posts/[...page].astro
@@ -42,8 +42,8 @@ const paginationProps = {
 ---
 
 <PageLayout meta={meta}>
-	<h1 class="title mb-6">Posts</h1>
-	<div class="grid gap-y-16 sm:grid-cols-[3fr_1fr] sm:gap-x-8">
+	<h1 class="title mx-auto mb-6 max-w-screen-sm">Posts</h1>
+	<div class="mx-auto grid max-w-screen-sm gap-y-16 sm:grid-cols-[3fr_1fr] sm:gap-x-8">
 		<section aria-label="Blog post list">
 			<ul class="space-y-8 text-start">
 				{

diff --git a/src/pages/tags/[tag]/[...page].astro b/src/pages/tags/[tag]/[...page].astro
@@ -49,12 +49,12 @@ const paginationProps = {
 ---
 
 <PageLayout meta={meta}>
-	<h1 class="title mb-6 flex items-center">
+	<h1 class="title mx-auto mb-6 flex max-w-screen-sm items-center">
 		<a href="/tags/" class="text-accent sm:hover:underline">Tags</a>
 		<span class="me-3 ms-2">→</span>
 		<span class="text-xl">#{tag}</span>
 	</h1>
-	<section aria-label="Blog post list">
+	<section aria-label="Blog post list" class="mx-auto max-w-screen-sm">
 		<ul class="space-y-8">
 			{
 				page.data.map((p) => (

diff --git a/src/pages/tags/index.astro b/src/pages/tags/index.astro
@@ -12,8 +12,8 @@ const meta = {
 ---
 
 <PageLayout meta={meta}>
-	<h1 class="title mb-6">Tags</h1>
-	<ul class="space-y-4">
+	<h1 class="title mx-auto mb-6 max-w-screen-sm">Tags</h1>
+	<ul class="mx-auto max-w-screen-sm space-y-4">
 		{
 			allTags.map(([tag, val]) => (
 				<li class="flex items-center gap-x-2">