Styling overhaul

website/src/components/BlogFeed.astro

@@ -54,23 +54,19 @@ const canonicalBlogUrl = new URL('blog', Astro.site)
 			This blog is written by <a class="p-author h-card" href="/">Joe Carstairs</a>
 		</p>
 
-		<p>
+		<p hidden>
 			<a class="u-url" href={canonicalBlogUrl}>Permalink</a>
 		</p>
 	</aside>
 
-	<ul>
-		{ distinctYears.map(year => (
-			<li>
-				{year}
-				<ul>
-					{ posts.filter(matchesYear(year)).sort(sortByPubDateDescending).map(post => (
-						<li class="h-entry">
-							<a class="u-url p-name" href={`/blog/${post.slug}`}>{post.data.title}</a>
-						</li>
-					)) }
-				</ul>
-			</li>
-		)) }
-	</ul>
-</section>
+	{ distinctYears.map(year => (
+		<h3>{year}</h3>
+		<ul>
+			{ posts.filter(matchesYear(year)).sort(sortByPubDateDescending).map(post => (
+				<li class="h-entry">
+					<a class="u-url p-name" href={`/blog/${post.slug}`}>{post.data.title}</a>
+				</li>
+			)) }
+		</ul>
+	)) }
+</section>

website/src/components/Me.astro

@@ -4,13 +4,19 @@
 <section class="h-card">
     <img class="u-photo" src="/images/headshot.jpg" height="256" width="256" />
 
-    <div>
+    <header>
         <h1>
-            <a class="p-name u-url u-uid" href="https://joeac.net" rel="me">
-                Joe Carstairs
-            </a>
+            Joe Carstairs
         </h1>
 
+        <div hidden>
+            <a class="p-name u-url u-uid" href="https://joeac.net" rel="me">
+                Permalink
+            </a>
+        </div>
+    </header>
+
+    <div class="h-card__text">
         <p>
             Hi! 👋 My name is <span class="p-given-name">Joe</span>
             <span class="p-family-name">Carstairs</span>. I’m a
@@ -33,11 +39,13 @@
         </p>
 
         <p>
-            Or get me on
-            <a href="https://www.facebook.com/joe.carstairs.5" rel="me">Facebook</a>,
-            <a href="https://mastodon.social/@joe_carstairs" rel="me">Mastodon</a>,
-            <a href="https://www.linkedin.com/in/joe-carstairs-0aa936277" rel="me">LinkedIn</a>,
-            or <a href="https://github.com/joeacarstairs" rel="me">GitHub</a>.
+            <small>
+                Or get me on
+                <a href="https://www.facebook.com/joe.carstairs.5" rel="me">Facebook</a>,
+                <a href="https://mastodon.social/@joe_carstairs" rel="me">Mastodon</a>,
+                <a href="https://www.linkedin.com/in/joe-carstairs-0aa936277" rel="me">LinkedIn</a>,
+                or <a href="https://github.com/joeacarstairs" rel="me">GitHub</a>.
+            </small>
         </p>
     </div>
-</section>
+</section>

website/src/components/Navbar.astro

@@ -0,0 +1,13 @@
+---
+---
+
+<nav>
+	<li>
+		<ul>
+			<a href="/">Home</a>
+		</ul>
+		<ul>
+			<a href="/blog">Blog</a>
+		</ul>
+	</li>
+</nav>