blog style improvements

src/lib/components/heroPost.svelte

@@ -53,6 +53,8 @@
     h3 {
         font-weight: 400;
         font-size: 29px;
+        padding: 0;
+        margin: 0;
     }
     p {
         font-size: 18px;

src/lib/components/navbar.svelte

@@ -49,6 +49,10 @@
 	.bar h3 {
 		font-size: 18px;
 		font-weight: bold;
+		color: black;
+	}
+	.dark.bar h3 {
+		color: white;
 	}
 	.bar a {
 		color: #202020b2;

src/lib/components/post.svelte

@@ -2,7 +2,7 @@
     export var thumbnail;
     export var categories = [];
     export var author;
-    export var date;
+    export var relDate;
     export var title;
     export var authorIcon;
     export var currentHover;
@@ -30,10 +30,10 @@
         <h4>{title}</h4>
         <div class="author">
             <img src={authorIcon} alt="Avatar of author" draggable={false}>
-            —
+            <span class="spacer">—</span>
             <span class="author">{author}</span>
-            —
+            <span class="spacer">—</span>
-            <span class="date">{date}</span>
+            <span class="date">{relDate}</span>
         </div>
     </div>
 </a>
@@ -56,7 +56,7 @@
         align-items: center;
     }
     h4 {
-        margin: 0;
+        margin: 5px 0;
         font-weight: 400;
         font-size: 18px;
     }

src/lib/components/posts.svelte

@@ -16,7 +16,7 @@
     </div>
     {#if posts.length > 1}
         <div class="posts">
-            {#each posts.slice(1) as post (post.title)}
+            {#each posts.slice(1, 6) as post (post.title)}
                 <Post {...post} bind:currentHover />
             {/each}
         </div>

src/lib/layouts/post.svelte

@@ -1,21 +1,21 @@
 <script>
-    import Navbar from "$lib/components/navbar.svelte";
     import darkmode from "$lib/stores/darkmode";
+    import { DateTime } from "luxon";
 
     export let title;
     export let date;
+    export let description;
 </script>
 
 <svelte:head>
-	<title>Daniel Bulant - Homepage</title>
+	<title>{title} - Daniel Bulant</title>
-	<meta name="description" content="Homepage of danbulant.eu - List of my projects, contact info.">
+	<meta name="description" content={description}>
 </svelte:head>
 
-<Navbar />
-
 <main class:dark={$darkmode}>
+    <span>Posts /</span>
     <h1>{title}</h1>
-    <span>{date}</span>
+    <span>Written {DateTime.fromISO(date).toRelativeCalendar()}</span>
     <slot />
 </main>
 
@@ -25,4 +25,10 @@
         max-width: 700px;
         padding: 0 20px;
 	}
+    h1 {
+        padding: 0 0 15px;
+    }
+    span {
+        color: gray;
+    }
 </style>

src/routes/posts/__layout.svelte

@@ -0,0 +1,7 @@
+<script>
+    import Navbar from "$lib/components/navbar.svelte";
+</script>
+
+<Navbar/>
+
+<slot />

src/routes/posts/index.svelte

@@ -0,0 +1,47 @@
+<script context="module">
+	/** @type {import('./[slug]').Load} */
+	export async function load({ params, fetch, session, stuff }) {
+		const response = await fetch("/api/posts.json");
+	
+		return {
+			props: {
+				posts: response.ok && (await response.json())
+			}
+		};
+	}
+</script>
+
+<script>
+    import HeroPost from "$lib/components/heroPost.svelte";
+import Post from "$lib/components/post.svelte";
+
+    var currentHover = null;
+    export var posts;
+</script>
+
+<svelte:head>
+	<title>Blog - Daniel Bulant</title>
+	<meta name="description" content="My personal blog about work, programming and fun stuff.">
+</svelte:head>
+
+<div class="posts">
+    <h1>Posts</h1>
+
+    <HeroPost {...posts[0]} />
+
+    {#each posts.slice(1) as post (post.title)}
+        <Post {...post} bind:currentHover />
+    {/each}
+</div>
+
+<style>
+    .posts {
+        margin: auto;
+        max-width: 700px;
+        padding: 0 20px;
+    }
+    h1 {
+        margin: 0;
+        padding: 0;
+    }
+</style>