From 0f75bf3443996f287b9a8a70abb0b3ac8031def8 Mon Sep 17 00:00:00 2001
From: Joe Carstairs <65492573+Sycamost@users.noreply.github.com>
Date: Sun, 12 May 2024 08:33:19 +0100
Subject: Styling overhaul

---
 website/src/components/BlogFeed.astro | 28 ++++++++++++----------------
 website/src/components/Me.astro       | 26 +++++++++++++++++---------
 website/src/components/Navbar.astro   | 13 +++++++++++++
 website/src/layouts/BlogPost.astro    | 18 ++++++++++--------
 website/src/layouts/Page.astro        |  6 +++++-
 website/src/pages/blog/index.astro    |  2 ++
 website/src/pages/index.astro         |  2 +-
 7 files changed, 60 insertions(+), 35 deletions(-)
 create mode 100644 website/src/components/Navbar.astro

(limited to 'website/src')

diff --git a/website/src/components/BlogFeed.astro b/website/src/components/BlogFeed.astro
index b6f9d55..c507d69 100644
--- a/website/src/components/BlogFeed.astro
+++ b/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>
\ No newline at end of file
+	{ 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>
diff --git a/website/src/components/Me.astro b/website/src/components/Me.astro
index c9af587..1a2140b 100644
--- a/website/src/components/Me.astro
+++ b/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>
+            Joe Carstairs
+        </h1>
+
+        <div hidden>
             <a class="p-name u-url u-uid" href="https://joeac.net" rel="me">
-                Joe Carstairs
+                Permalink
             </a>
-        </h1>
+        </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>
\ No newline at end of file
+</section>
diff --git a/website/src/components/Navbar.astro b/website/src/components/Navbar.astro
new file mode 100644
index 0000000..bae661b
--- /dev/null
+++ b/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>
diff --git a/website/src/layouts/BlogPost.astro b/website/src/layouts/BlogPost.astro
index b709356..8639caa 100644
--- a/website/src/layouts/BlogPost.astro
+++ b/website/src/layouts/BlogPost.astro
@@ -2,6 +2,7 @@
 import type { CollectionEntry } from 'astro:content';
 import BaseHead from '../components/BaseHead.astro';
 import FormattedDate from '../components/FormattedDate.astro';
+import Navbar from '../components/Navbar.astro';
 
 type Props = CollectionEntry<'blog'>['data'];
 
@@ -22,11 +23,12 @@ const updatedDateStr = updatedDate ?
 	</head>
 
 	<body>
+		<Navbar />
 		<article class="h-entry">
 			<aside>
 				<span>
 					This is a blog post by
-					<a class="p-author h-card h-card--minimal" href="/">Joe Carstairs</a>.
+					<a class="p-author h-card" href="/">Joe Carstairs</a>.
 				</span>
 				{ updatedDate
 					? (
@@ -34,17 +36,17 @@ const updatedDateStr = updatedDate ?
 						<span>Originally published: <FormattedDate date={pubDateStr} className="dt-published"/>.</span>
 					) : <span>Published: <FormattedDate date={pubDateStr} className="dt-published"/>.</span>
 				}
-				<span>Go back to his <a href="/blog">blog</a> if you like.</span>
-				<span><a class="u-url uid" href={canonicalUrl}>Permalink</a></span>
+				<span hidden><a class="u-url uid" href={canonicalUrl}>Permalink</a></span>
 	  		</aside>
 
-			<h1 class="h-name">{title}</h1>
+			<header>
+				<h1 class="h-name">{title}</h1>
+				<p class="p-summary" set:html={description} />
+			</header>
 
-			<p class="p-summary" set:html={description} />
-
-			<div class="e-content">
+			<section class="e-content">
 			  <slot />
-			</div>
+			</section>
 		</article>
 	</body>
 </html>
diff --git a/website/src/layouts/Page.astro b/website/src/layouts/Page.astro
index 4e5f3bb..d41e58c 100644
--- a/website/src/layouts/Page.astro
+++ b/website/src/layouts/Page.astro
@@ -1,5 +1,6 @@
 ---
 import BaseHead from "../components/BaseHead.astro";
+import Navbar from "../components/Navbar.astro";
 
 const { title, description } = Astro.props;
 ---
@@ -11,7 +12,10 @@ const { title, description } = Astro.props;
 	</head>
 
 	<body>
-		<slot />
+		<Navbar />
+		<main>
+			<slot />
+		</main>
 	</body>
 </html>
 
diff --git a/website/src/pages/blog/index.astro b/website/src/pages/blog/index.astro
index 0c617bd..61a1a46 100644
--- a/website/src/pages/blog/index.astro
+++ b/website/src/pages/blog/index.astro
@@ -2,6 +2,7 @@
 import BaseHead from '../../components/BaseHead.astro';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../../consts';
 import BlogFeed from '../../components/BlogFeed.astro';
+import Navbar from '../../components/Navbar.astro';
 ---
 
 <!doctype html>
@@ -10,6 +11,7 @@ import BlogFeed from '../../components/BlogFeed.astro';
 		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
 	</head>
 	<body>
+		<Navbar />
 		<main>
 			<BlogFeed headingLevel={1} />
 		</main>
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index 74cf934..4e9d87b 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -8,4 +8,4 @@ import Page from '../layouts/Page.astro';
 <Page title={SITE_TITLE} description={SITE_DESCRIPTION}>
 	<Me />
 	<BlogFeed hideAuthor />
-</Page>
\ No newline at end of file
+</Page>
-- 
cgit v1.2.3