feat: style the articles section (#109)

* Styling the blog articles

* Align buttons and change bg colors

src/components/BlogArticlePreview.astro

@@ -1,27 +1,22 @@
 ---
-const { creator, title, link, pubDate, categories } = Astro.props;
+import Button from './Button.astro';
+
+const { creator, title, link } = Astro.props;
+const snippet = Astro.props['content:encodedSnippet'];
 ---
 
 <div
-	class="overflow-hidden shadow-lg transition duration-500 ease-in-out transform hover:shadow-2xl rounded-lg rounded-[40px] p-7 bg-[#FAE0C6]"
+	class="transition duration-500 ease-in-out transform shadow-2xl border-4 border-baccent hover:border-accent hover:shadow-none hover:bg-white hover:bg-opacity-50 rounded-3xl p-7"
 >
-	<div class="w-full p-4 h-full">
-		<a href={link} class="text-accent text-3xl font-bold">{title}</a>
+	<div class="w-full p-4 h-full flex flex-col justify-between">
+		<a href={link} class="text-3xl font-bold font-sans no-underline">{title}</a>
 		<div class="py-4">
-			by <span class="font-bold">{creator}</span>
+			by <span class="font-medium">{creator}</span>
 		</div>
 
-		<div
-			class="flex flex-wrap justify-starts items-center py-3 border-b-2 border-accent text-xs text-white font-medium"
-		>
-			{categories.map((category) => <span class="bg-accent px-2 py-1 rounded-full mr-2 mb-2">{category}</span>)}
-		</div>
-		<div class="flex items-center mt-2">
-			<div class="pl-2">
-				<p class="text-gray-800 text-sm font-medium mb-2">
-					Published on {pubDate}.
-				</p>
-			</div>
-		</div>
+		<p class="text-gray-800 text-sm font-medium mb-2 text-clip overflow-hidden max-h-20">
+			{snippet}
+		</p>
+		<Button href={link} text="Read on Medium.com" inverted={true} cls="mt-4 text-base no-underline" />
 	</div>
 </div>

src/pages/blog/index.astro

@@ -8,13 +8,16 @@ const feed = await parser.parseURL('https://medium.com/feed/think-do-tank');
 ---
 
 <Layout>
-	<h1>Dyne.org think & do tank</h1>
+	<div class="flex items-baseline justify-between">
+		<h1 class="font-medium">Dyne.org <br /> <span class="font-bold">think & do tank</span></h1>
 
-	<span>
-		We are hackers. <br />
-		We survive out of the commonplaces. <br />
-		Thoughts and tools out the box.
-	</span>
+		<span class="text-lg">
+			<span class="text-accent font-medium">We are hackers.</span>
+			<br />
+			We survive out of the commonplaces. <br />
+			Thoughts and tools out the box.
+		</span>
+	</div>
 
 	<div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-8">
 		{feed.items.map((f) => <BlogArticlePreview {...f} />)}