V1 post card

web/src/lib/posts/card.svelte

@@ -2,6 +2,7 @@
 	import type { Post } from "$lib/types";
 	import Time, { dayjs } from "svelte-time";
 	import TagList from "./tag-list.svelte";
+	import QuillPenLine from "virtual:icons/mingcute/quill-pen-line";
 	export let post: Post;
 </script>
 
@@ -9,6 +10,13 @@
 	<div class="origin">
 		<img src={post.feed.faviconUrl} alt={post.feed.title} />
 		<span>{post.feed.title}</span> |
+		{#if post.author}
+			<div class="author">
+				<QuillPenLine />
+				<span>{post.author}</span>
+			</div>
+			|
+		{/if}
 		<Time
 			timestamp={post.date}
 			relative={true}
@@ -26,10 +34,11 @@
 
 <style>
 	article {
-		border-radius: 5px;
+		border-radius: 10px;
 		/* box-shadow: 0px 0px 12px 9px rgba(0, 0, 0, 0.28); */
 		border: 1px solid #e0e0e0;
-		padding: 0.5rem;
+		padding: 0.7rem;
+		background-color: rgb(220, 220, 220);
 	}
 
 	.origin {
@@ -54,4 +63,10 @@
 	p {
 		margin: 0.5rem;
 	}
+
+	.author {
+		display: flex;
+		align-items: center;
+		gap: 3px;
+	}
 </style>

web/src/lib/posts/tag-list.svelte

@@ -8,7 +8,7 @@
 
 <div>
 	{#each tagsToDisplay as tag}
-		<span class="tag">{tag}</span>
+		<div class="tag">{tag}</div>
 	{/each}
     {#if tags.length > nbNonExpandedTags}
         <button on:click={() => isExpanded = !isExpanded}>
@@ -27,11 +27,14 @@
 		background-color: #4d4c4c;
 		padding: 0.25rem 0.5rem;
 		border-radius: 5px;
+        font-size: small;
+        color: white;
 	}
 
     button {
-        /* border-radius: 5px; */
-        padding: 0.25rem 0.5rem;
+        padding: 0;
+        background-color: transparent;
+        border: none;
         cursor: pointer;
     }
 </style>