design tweaks

astro.config.mjs

@@ -8,4 +8,7 @@ export default defineConfig({
 	site: 'https://ghall.blog',
 	output: 'static',
 	integrations: [mdx()],
+	experimental: {
+		svg: true,
+	},
 });

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>

src/layouts/About.astro

@@ -1,19 +0,0 @@
----
-export const prerender = true;
-import Layout from '@layouts/Layout.astro';
----
-
-<Layout title="About">
-	<img src="/portrait.jpg" alt="me" class="portrait" />
-	<slot />
-</Layout>
-
-<style>
-	.portrait {
-		display: block;
-		max-width: 250px;
-		margin: auto;
-		margin-bottom: 26px;
-		border-radius: 200px;
-	}
-</style>

src/pages/about.astro

@@ -0,0 +1,48 @@
+---
+export const prerender = true;
+import Layout from '@layouts/Layout.astro';
+---
+
+<Layout title="About">
+	<img src="/portrait.jpg" alt="me" class="portrait" />
+	<p>My name is <strong>Graham</strong>, a full-stack web developer.</p>
+	<p>
+		When I'm not writing code, I'm usually enjoying one of my other hobbies;
+		video games, board games, music, hiking, photography, art, the list goes
+		on...
+	</p>
+	<p>
+		I also like writing about stuff, so I put together this site to share
+		whatever's on my mind about the world of tech, gaming, life, web
+		development, and whatever else strikes my fancy.
+	</p>
+	<p>
+		If your interested in checking out my web dev projects, check out <a
+			href="https://ghall.dev/"
+			target="_blank">my portfolio</a
+		>.
+	</p>
+	<p>
+		If you want to get in touch, I'm on <a
+			rel="me"
+			href="https://mastodon.social/@ghalldev"
+			target="_blank">Mastodon</a
+		>.
+	</p>
+	<p>
+		My portrait was drawn by <a
+			href="https://www.nataliavazquezgarcia.com"
+			target="_blank">Natalia Vazquez</a
+		>.
+	</p>
+</Layout>
+
+<style>
+	.portrait {
+		display: block;
+		max-width: 250px;
+		margin: auto;
+		margin-bottom: 26px;
+		border-radius: 200px;
+	}
+</style>

src/pages/about.md

@@ -1,16 +0,0 @@
----
-layout: ../layouts/About.astro
-title: About Me
----
-
-My name is **Graham**, a full-stack web developer.
-
-When I'm not writing code, I'm usually enjoying one of my other hobbies; video games, board games, music, hiking, photography, art, the list goes on...
-
-I also like writing about stuff, so I put together this site to share whatever's on my mind about the world of tech, gaming, life, web development, and whatever else strikes my fancy.
-
-If your interested in checking out my web dev projects, check out [my portfolio](https://ghall.dev/).
-
-If you want to get in touch, I'm on <a rel="me" href="https://mastodon.social/@ghalldev">Mastodon</a>.
-
-My portrait was drawn by [Natalia Vazquez](https://www.nataliavazquezgarcia.com).

src/styles/svg/calendar.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
+  <path d="M5.75 7.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM5 10.25a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0ZM10.25 7.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM7.25 8.25a.75.75 0 1 1 1.5 0 .75.75 0 0 1-1.5 0ZM8 9.5A.75.75 0 1 0 8 11a.75.75 0 0 0 0-1.5Z" />
+  <path fill-rule="evenodd" d="M4.75 1a.75.75 0 0 0-.75.75V3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2V1.75a.75.75 0 0 0-1.5 0V3h-5V1.75A.75.75 0 0 0 4.75 1ZM3.5 7a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v4.5a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1V7Z" clip-rule="evenodd" />
+</svg>

src/styles/svg/rss.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
+  <path fill-rule="evenodd" d="M2 2.75A.75.75 0 0 1 2.75 2C8.963 2 14 7.037 14 13.25a.75.75 0 0 1-1.5 0c0-5.385-4.365-9.75-9.75-9.75A.75.75 0 0 1 2 2.75Zm0 4.5a.75.75 0 0 1 .75-.75 6.75 6.75 0 0 1 6.75 6.75.75.75 0 0 1-1.5 0C8 10.35 5.65 8 2.75 8A.75.75 0 0 1 2 7.25ZM3.5 11a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z" clip-rule="evenodd" />
+</svg>