redesign 🎨

src/components/BlogHeader.astro

@@ -1,6 +1,5 @@
 ---
 import { format, add } from 'date-fns';
-import { Icon } from 'astro-icon/components';
 
 interface Props {
 	title: String;
@@ -15,28 +14,7 @@ const { title, date, slug } = Astro.props;
 	<h2>
 		{slug ? <a href={`/posts/${slug}`}>{title}</a> : title}
 	</h2>
-	<div class="date">
-		<Icon size={24} class="calendar-icon" name="calendar" />
-		<span>{format(add(new Date(date), { hours: 6 }), 'MMM do, y')}</span>
+	<div>
+		🗓️ <i>{format(add(new Date(date), { hours: 6 }), 'MMM do, y')}</i>
 	</div>
 </div>
-
-<style>
-	h2,
-	h2 a {
-		font-size: 1.6rem;
-		font-family: Oswald, sans-serif;
-		margin-bottom: 0.5rem;
-	}
-
-	.date {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-	}
-
-	.date span {
-		font-family: Oswald, sans-serif;
-		font-size: 1.1rem;
-	}
-</style>

src/components/Footer.astro

@@ -1,17 +1,16 @@
 ---
 const year = new Date().getFullYear();
-
-interface Props {}
 ---
 
 <footer>
 	<p>
-		Copyright {year}, Graham Hall – Built with <a href="https://astro.build"
-			>Astro</a
-		>
+		Copyright {year}, Graham Hall
+
+		<br />
+		Built with <a href="https://astro.build">Astro</a>
 	</p>
+
 	<p>
 		<a href="/rss.xml"> Subscribe with RSS</a>
 	</p>
-	<div id="wcb" class="carbonbadge"></div>
 </footer>

src/components/Header.astro

@@ -1,7 +1,4 @@
 ---
-import { Icon } from 'astro-icon/components';
-import type { NavLink } from 'src/types';
-
 const { pathname } = Astro.url;
 
 interface Props {}
@@ -22,94 +19,14 @@ const navLinks: NavLink[] = [
 <header>
 	<h1>ghall.blog</h1>
 	<nav>
-		<ul>
-			{
-				navLinks.map((link) => (
-					<li>
-						<a
-							class={pathname === link.path ? 'active-nav' : null}
-							href={link.path}
-						>
-							<Icon size={26} name={link.icon} />
-							<span>{link.label}</span>
-						</a>
-					</li>
-				))
-			}
-		</ul>
+		{
+			navLinks.map((link) => (
+				<li class={pathname === link.path ? 'selected' : null}>
+					<a href={link.path}>
+						<span>{link.label}</span>
+					</a>
+				</li>
+			))
+		}
 	</nav>
 </header>
-
-<style>
-	header {
-		margin: 0;
-		padding: 1.5rem 1rem;
-		max-width: 800px;
-		display: flex;
-		flex-direction: column;
-		margin: auto;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	h1 {
-		text-align: center;
-		font-size: 1.8rem;
-	}
-
-	.title {
-		text-decoration: none;
-	}
-
-	nav ul {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		gap: 1.5rem;
-		padding: 0;
-		margin: 0;
-	}
-
-	nav ul li {
-		height: 40px;
-		align-items: center;
-		margin: 0;
-	}
-
-	nav ul li a {
-		position: relative;
-		display: flex;
-		gap: 0.5rem;
-		align-items: center;
-		text-decoration: none;
-	}
-
-	nav ul li a span {
-		font-size: 1.2rem;
-	}
-
-	nav ul li a::before {
-		content: '•';
-		font-size: 1.6rem;
-		position: absolute;
-		left: -12px;
-		color: var(--blue);
-		opacity: 0;
-	}
-
-	nav ul li a:hover {
-		text-decoration: none;
-	}
-
-	nav ul li a:hover::before {
-		opacity: 0.6;
-	}
-
-	.active-nav::before {
-		opacity: 1;
-	}
-
-	nav ul li::before {
-		content: '';
-	}
-</style>

src/components/PostPreview.astro

@@ -1,6 +1,4 @@
 ---
-import { Tag } from 'src/types';
-
 import BlogHeader from '@components/BlogHeader.astro';
 import Tags from '@components/Tags.astro';
 
@@ -8,7 +6,7 @@ interface Post {
 	data: {
 		title: string;
 		pubDate: Date;
-		tags: Tag[];
+		tags: string[];
 	};
 	slug: string;
 }
@@ -21,9 +19,9 @@ const { post } = Astro.props;
 const { data, slug } = post;
 ---
 
-<article class="post-preview">
+<section>
 	<div>
 		<BlogHeader title={post.data.title} date={data.pubDate} slug={slug} />
 		<Tags tags={data.tags} />
 	</div>
-</article>
+</section>

src/components/Tags.astro

@@ -1,34 +1,17 @@
 ---
-import { Tag } from 'src/types';
-
 interface Props {
-	tags: Tag[];
+	tags: string[];
 }
 
 const { tags } = Astro.props;
 ---
 
-<div class="tag-container">
+<span>
 	{
-		tags.sort().map((tag: Tag) => (
+		tags.sort().map((tag: string, index: number) => (
 			<a class="tag" href={`/archive/${tag}`}>
-				#{tag}
+				{`${tag}${index < tags.length - 1 ? ', ' : ''}`}
 			</a>
 		))
 	}
-</div>
-
-<style>
-	.tag-container {
-		margin: 10px 0;
-	}
-
-	.tag {
-		font-size: 1rem;
-		line-height: 2rem;
-	}
-
-	.tag:not(:last-child) {
-		margin-right: 6px;
-	}
-</style>
+</span>