changes to blog

src/lib/BlogCard/Meta.svelte

@@ -2,14 +2,15 @@
 	import dayjs from "dayjs";
 
 	export let post: any;
+	export let isPost: boolean = false;
 </script>
 
-<div class="flex flex-col md:(flex-row gap-4) gap-2">
+<div class="flex flex-col gap-2 flex-1 {isPost ? "nav:(flex-row gap-4)" : ""}">
 	{#if post.tags.length > 0}
 		<div class="flex flex-row items-center gap-2">
 			<div class="i-fa6-solid:tags" />
 			{#each post.tags as tag}
-				<a href="/blog/tags/{tag.slug}" class="no-underline bg-primary rounded-2 p-1">{tag.name}</a>
+				<a href="/blog/tags/{tag.slug}" class="no-underline rounded-2 p-1 {isPost ? "bg-secondary" : "bg-primary"}">{tag.name}</a>
 			{/each}
 		</div>
 	{/if}

src/lib/BlogCard/PostContent.svelte

@@ -2,6 +2,6 @@
 	export let data: any;
 </script>
 
-<div class="prose flex flex-col m-auto">
+<div class="prose flex flex-col text-justify m-auto">
 	{@html data.post.html}
 </div>

src/lib/BlogCard/PostOuter.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	export let url: string = "";
+	export let isPost: boolean = false;
 </script>
 
-<div class="flex flex-col gap-4 bg-secondary p-4 rounded-2">
+<div class="flex flex-col gap-4 p-4 rounded-2 {isPost ? "" : "w-120 bg-secondary"}">
 	<slot />
 
 	{#if url}

src/lib/BlogCard/PostsContainer.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	export let hasMt: boolean = false;
+	export let isHome: boolean = false;
 </script>
 
-<div class="flex flex-col gap-10 {hasMt ? "mt-16" : ""}">
+<div class="flex flex-row flex-wrap gap-10 {hasMt ? "mt-16" : ""} {isHome ? "justify-center" : ""}">
 	<slot />
 </div>

src/lib/BlogCard/Title.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
 	export let post: any;
+	export let isPost: boolean = false;
 </script>
 
+{#if !isPost}
+	<a href="/blog/{post.slug}" class="text-text no-underline hover:underline"><span class="text-xl font-bold">{post.title}</span></a>
+{:else}
 	<span class="text-xl font-bold">{post.title}</span>
+{/if}
+

src/lib/BlogCard/TitleWithBackButton.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">
-	export let data: any;
-</script>
-
-<span class="text-xl font-bold flex flex-row items-center gap-2"><a href="/blog" class="flex flex-row items-center gap-2"><div class="i-fa6-solid:arrow-left" /> Back</a> - {data.post.title}</span>

src/lib/BlogCard/index.ts

@@ -3,6 +3,5 @@ export { default as PostOuter } from "./PostOuter.svelte";
 export { default as Title } from "./Title.svelte";
 export { default as Meta } from "./Meta.svelte";
 export { default as ReadMore } from "./ReadMore.svelte";
-export { default as TitleWithBackButton } from "./TitleWithBackButton.svelte";
 export { default as PostContent } from "./PostContent.svelte";
 export { default as SingleWordLists } from "./SingleWordLists.svelte";

src/routes/blog/+page.svelte

@@ -39,7 +39,7 @@
 		/>
 	</div>
 </Hero>
-<PostsContainer hasMt>
+<PostsContainer hasMt isHome>
 	{#each data.posts as post}
 		<PostOuter>
 			<Title {post} />

src/routes/blog/[title]/+page.svelte

@@ -2,15 +2,17 @@
 	import type { PageData } from "./$types";
 	export let data: PageData;
 
-	import { PostOuter, TitleWithBackButton, Meta, PostContent } from "$lib/BlogCard";
+	import { PostOuter, Title, Meta, PostContent } from "$lib/BlogCard";
 </script>
 
 <svelte:head>
 	<title>{data.post.title} | Project Segfault Blog</title>
 </svelte:head>
 
-<PostOuter url={data.post.url}>
+<PostOuter url={data.post.url} isPost>
-	<TitleWithBackButton {data} />
+	<div class="text-center mt-4 flex flex-col items-center gap-4">
-	<Meta post={data.post} />
+		<Title post={data.post} isPost />
+		<Meta post={data.post} isPost />
+	</div>
 	<PostContent {data} />
 </PostOuter>