design tweaks

src/components/BlogHeader.astro

@@ -1,6 +1,8 @@
 ---
 import { format, add } from 'date-fns';
 
+import CalendarIcon from '../styles/svg/calendar.svg';
+
 interface Props {
 	title: String;
 	date: Date;
@@ -15,6 +17,13 @@ const { title, date, slug } = Astro.props;
 		{slug ? <a href={`/posts/${slug}`}>{title}</a> : title}
 	</h2>
 	<div>
-		🗓️ <i>{format(add(new Date(date), { hours: 6 }), 'MMM do, y')}</i>
+		<CalendarIcon class="calendar-icon" size={24} />
+		{format(add(new Date(date), { hours: 6 }), 'MMM do, y')}
 	</div>
 </div>
+
+<style>
+	.calendar-icon {
+		transform: translateY(0.3rem);
+	}
+</style>

src/components/Footer.astro

@@ -1,4 +1,5 @@
 ---
+import RssIcon from '../styles/svg/rss.svg';
 const year = new Date().getFullYear();
 ---
 
@@ -11,6 +12,14 @@ const year = new Date().getFullYear();
 	</p>
 
 	<p>
-		<a href="/rss.xml"> Subscribe with RSS</a>
+		<a href="/rss.xml"
+			><RssIcon class="rss-icon" size={20} /> Subscribe with RSS</a
+		>
 	</p>
 </footer>
+
+<style>
+	.rss-icon {
+		transform: translateY(0.18rem);
+	}
+</style>

src/components/PostPreview.astro

@@ -19,9 +19,9 @@ const { post } = Astro.props;
 const { data, slug } = post;
 ---
 
-<section>
+<article>
 	<div>
 		<BlogHeader title={post.data.title} date={data.pubDate} slug={slug} />
 		<Tags tags={data.tags} />
 	</div>
-</section>
+</article>