src/containers/PostListing.tsx

@@ -14,7 +14,7 @@ const PostListing = ({ posts, title, showAllButton }) => {
 	return (
 		<>
 			<div className="mb-5 ">
-        <h2 className="scroll-m-20 text-2xl font-semibold lg:text-2xl border-b pb-3">
+				<h2 className="scroll-m-20 text-2xl font-bold lg:text-2xl border-b pb-3">
 					{title}
 				</h2>
 			</div>
@@ -27,9 +27,9 @@ const PostListing = ({ posts, title, showAllButton }) => {
 					>
 						<Card
 							key={post.slug}
-              className="flex flex-col h-full hover:bg-primary/5 py-4 rounded-none"
+							className="flex flex-col h-full  hover:bg-primary/5 py-4 px-0"
 						>
-              <CardHeader className="">
+							<CardHeader className="px-4 md:px-6">
 								<CardTitle className="leading-snug font-semibold ">
 									{post.title}
 								</CardTitle>

src/pages/about.tsx

@@ -5,7 +5,7 @@ const AboutPage = () => {
 	return (
 		<MainTemplate>
 			<div className="mb-5 ">
-				<h2 className="scroll-m-20 text-2xl font-semibold lg:text-2xl border-b pb-3">
+				<h2 className="scroll-m-20 text-2xl font-bold lg:text-2xl border-b pb-3">
 					About
 				</h2>
 			</div>

src/pages/home.tsx

@@ -9,9 +9,9 @@ const HomePage = () => {
 	const { posts } = usePosts()
 	return (
 		<MainTemplate>
-      <Card className="mb-8 rounded-none">
+			<Card className="mb-8">
 				<CardHeader>
-          <h1 className="scroll-m-20 text-left text-3xl font-semibold">
+					<h1 className="scroll-m-20 text-left text-3xl font-bold  text-balance">
 						Another software engineer with a blog
 					</h1>
 				</CardHeader>

src/pages/posts.tsx

@@ -61,7 +61,7 @@ const PostsPage = () => {
 	return (
 		<MainTemplate>
 			<div className="mb-5 ">
-        <h2 className="scroll-m-20 text-2xl font-semibold lg:text-2xl border-b pb-3">
+				<h2 className="scroll-m-20 text-2xl font-bold lg:text-2xl border-b pb-3">
 					All posts
 				</h2>
 			</div>
@@ -75,7 +75,7 @@ const PostsPage = () => {
 						>
 							<Card
 								key={post.slug}
-                className="flex flex-col h-full hover:bg-primary/5 py-4 px-0 rounded-none"
+								className="flex flex-col h-full hover:bg-primary/5 py-4 px-0"
 							>
 								<CardHeader>
 									<CardTitle className="leading-snug font-semibold">

src/templates/BlogTemplate.tsx

@@ -17,7 +17,7 @@ const BlogTemplate = () => {
       ) : (
         <>
           <div className="mb-5">
-						<h2 className="text-2xl font-semibold lg:text-2xl border-b pb-3">
+            <h2 className="text-2xl font-bold lg:text-2xl border-b pb-3">
               {post?.title}
             </h2>
           </div>