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: [PATCH] Styling overhaul

---
 website/public/css/base.css           | 774 ++++----------------------
 website/public/css/blog.css           |   6 +-
 website/public/css/hcard.css          |  45 +-
 website/public/css/reset.css          |   6 +-
 website/src/components/BlogFeed.astro |  28 +-
 website/src/components/Me.astro       |  28 +-
 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 +-
 11 files changed, 210 insertions(+), 718 deletions(-)
 create mode 100644 website/src/components/Navbar.astro

diff --git a/website/public/css/base.css b/website/public/css/base.css
index a22ca34..a3f8e49 100644
--- a/website/public/css/base.css
+++ b/website/public/css/base.css
@@ -1,701 +1,153 @@
-/* Based on simple.css: https://simplecss.org/ */
+/** Variables */
 
-/* Global variables. */
-:root,
-::backdrop {
-  /* Set sans-serif & mono fonts */
-  --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
-	"Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
-	"Helvetica Neue", sans-serif;
-  --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
-  --standard-border-radius: 5px;
+:root {
+  --colour-primary-10: #060300;
+  --colour-primary-20: #1f1400;
+  --colour-primary-30: #3c2b00;
+  --colour-primary-40: #5c4300;
+  --colour-primary-50: #7f5d00;
+  --colour-primary-60: #a37800;
+  --colour-primary-70: #c89500;
+  --colour-primary-80: #efb300;
+  --colour-primary-90: #ffd98c;
+  --colour-primary-95: #ffecc8;
 
-  /* Default (light) theme */
-  --bg: #fff;
-  --accent-bg: #f5f7ff;
-  --text: #212121;
-  --text-light: #585858;
-  --border: #898EA4;
-  --accent: #0d47a1;
-  --accent-text: var(--bg);
-  --code: #d81b60;
-  --preformatted: #444;
-  --marked: #ffdd33;
-  --disabled: #efefef;
+  --colour-hyperlink-10: #000409;
+  --colour-hyperlink-20: #001829;
+  --colour-hyperlink-30: #00314d;
+  --colour-hyperlink-40: #004d75;
+  --colour-hyperlink-50: #006a9f;
+  --colour-hyperlink-60: #1388c9;
+  --colour-hyperlink-70: #41a8ea;
+  --colour-hyperlink-80: #78c7ff;
+  --colour-hyperlink-90: #bfe3ff;
+  --colour-hyperlink-95: #e0f1ff;
+
+  --colour-primary-fg: var(--colour-primary-90);
+  --colour-primary-bg: var(--colour-primary-10);
+  --colour-hyperlink: var(--colour-hyperlink-80);
+
+  --font-size-sm: 1rem;
+  --font-size-base: 1.1rem;
+  --font-size-md: 1.2rem;
+  --font-size-lg: 1.5rem;
+  --font-size-xl: 2rem;
+
+  --spacing-block-sm: 0.75rem;
+  --spacing-block-md: 1.5rem;
+  --spacing-block-lg: 2.5rem;
+  --spacing-block-xl: 5rem;
+  --spacing-inline-sm: 0.5rem;
+  --spacing-inline-md: 1.5rem;
+  --spacing-inline-lg: 3rem;
+  --spacing-inline-xl: 6rem;
 }
 
-/* Dark theme */
-@media (prefers-color-scheme: dark) {
-  :root,
-  ::backdrop {
-	color-scheme: dark;
-	--bg: #212121;
-	--accent-bg: #2b2b2b;
-	--text: #dcdcdc;
-	--text-light: #ababab;
-	--accent: #ffb300;
-	--accent-text: var(--bg);
-	--code: #f06292;
-	--preformatted: #ccc;
-	--disabled: #111;
-  }
-  /* Add a bit of transparency so light media isn't so glaring in dark mode */
-  img,
-  video {
-	opacity: 0.8;
-  }
+/** Light theme */
+@media (prefers-color-scheme: light) {
+  --colour-primary-fg: var(--colour-primary-20);
+  --colour-primary-bg: var(--colour-primary-95);
+  --colour-hyperlink: var(--colour-hyperlink-40);
 }
 
-/* Reset box-sizing */
-*, *::before, *::after {
-  box-sizing: border-box;
-}
+/** Base typography */
 
-/* Reset default appearance */
-textarea,
-select,
-input,
-progress {
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-
-html {
-  /* Set the font globally */
-  font-family: var(--sans-font);
-  scroll-behavior: smooth;
-}
-
-/* Make the body a nice central block */
 body {
-  color: var(--text);
-  background-color: var(--bg);
-  font-size: 1.15rem;
+  font-size: var(--font-size-base);
+  color: var(--colour-primary-fg);
+  background-color: var(--colour-primary-bg);
   line-height: 1.5;
-  display: grid;
-  grid-template-columns: 1fr min(45rem, 90%) 1fr;
-  margin: 0;
-}
-body > * {
-  grid-column: 2;
 }
 
-/* Make the header bg full width, but the content inline with body */
-body > header {
-  background-color: var(--accent-bg);
-  border-bottom: 1px solid var(--border);
-  text-align: center;
-  padding: 0 0.5rem 2rem 0.5rem;
-  grid-column: 1 / -1;
+small {
+  font-size: var(--font-size-sm);
 }
 
-body > header > *:only-child {
-  margin-block-start: 2rem;
+:is(p, h1, h2, h3, h4, h5, h6) {
+  margin-block-start: var(--spacing-block-sm);
+  max-width: 30rem;
 }
 
-body > header h1 {
-  max-width: 1200px;
-  margin: 1rem auto;
+/** Base layout */
+
+body {
+  margin-inline: var(--spacing-block-lg);
+  margin-block-end: var(--spacing-block-xl);
+
+  :is(h1, h2, h3, h4, h5, h6) {
+    text-align: center;
+  }
+
+  img {
+    margin-inline: auto;
+  }
 }
 
-body > header p {
-  max-width: 40rem;
-  margin: 1rem auto;
+@media (min-width: 36rem) {
+  :is(main, article) {
+    display: grid;
+    grid-template-columns: [media-start] 6rem [content-start] 1fr [content-end];
+    margin-inline-end: 6rem;
+		column-gap: var(--spacing-block-sm);
+
+    :is(section, header, aside) {
+      grid-column: content-start / content-end;
+    }
+
+    :is(h1, h2, h3, h4, h5, h6) {
+      text-align: start;
+    }
+  }
 }
 
-/* Add a little padding to ensure spacing is correct between content and header > nav */
-main {
-  padding-top: 1.5rem;
-}
+/** Headings */
 
-body > footer {
-  margin-top: 4rem;
-  padding: 2rem 1rem 1.5rem 1rem;
-  color: var(--text-light);
-  font-size: 0.9rem;
-  text-align: center;
-  border-top: 1px solid var(--border);
-}
-
-/* Format headers */
 h1 {
-  font-size: 3rem;
+  font-size: var(--font-size-xl);
+  font-weight: 900;
+  margin-block-start: 0;
 }
 
 h2 {
-  font-size: 2.6rem;
-  margin-top: 3rem;
+  font-size: var(--font-size-lg);
+  font-weight: 900;
+  margin-block-start: var(--spacing-block-xl);
 }
 
-h3 {
-  font-size: 2rem;
-  margin-top: 3rem;
+h3, h4, h5, h6 {
+  font-size: var(--font-size-md);
+  font-weight: 600;
 }
 
-h4 {
-  font-size: 1.44rem;
-}
+/** Hyperlinks */
 
-h5 {
-  font-size: 1.15rem;
-}
+a:is(:link, :visited) {
+  color: var(--colour-hyperlink);
+  text-decoration: underline;
+  display: inline;
 
-h6 {
-  font-size: 0.96rem;
-}
-
-p {
-  margin: 1.5rem 0;
-}
-
-/* Prevent long strings from overflowing container */
-p, h1, h2, h3, h4, h5, h6 {
-  overflow-wrap: break-word;
-}
-
-/* Fix line height when title wraps */
-h1,
-h2,
-h3 {
-  line-height: 1.1;
-}
-
-/* Reduce header size on mobile */
-@media only screen and (max-width: 720px) {
-  h1 {
-	font-size: 2.5rem;
-  }
-
-  h2 {
-	font-size: 2.1rem;
-  }
-
-  h3 {
-	font-size: 1.75rem;
-  }
-
-  h4 {
-	font-size: 1.25rem;
+  :hover {
+    text-decoration: wavy;
   }
 }
 
-/* Format links & buttons */
-a,
-a:visited {
-  color: var(--accent);
-}
+/** Navigation bar */
 
-a:hover {
-  text-decoration: none;
-}
+nav {
+  margin-block: var(--spacing-block-sm);
 
-button,
-.button,
-a.button, /* extra specificity to override a */
-input[type="submit"],
-input[type="reset"],
-input[type="button"],
-label[type="button"] {
-  border: 1px solid var(--accent);
-  background-color: var(--accent);
-  color: var(--accent-text);
-  padding: 0.5rem 0.9rem;
-  text-decoration: none;
-  line-height: normal;
-}
-
-.button[aria-disabled="true"], 
-input:disabled,
-textarea:disabled,
-select:disabled,
-button[disabled] {
-  cursor: not-allowed;
-  background-color: var(--disabled);
-  border-color: var(--disabled);
-  color: var(--text-light);
-}
-
-input[type="range"] {
-  padding: 0;
-}
-
-/* Set the cursor to '?' on an abbreviation and style the abbreviation to show that there is more information underneath */
-abbr[title] {
-  cursor: help;
-  text-decoration-line: underline;
-  text-decoration-style: dotted;
-}
-
-button:enabled:hover,
-.button:not([aria-disabled="true"]):hover,
-input[type="submit"]:enabled:hover,
-input[type="reset"]:enabled:hover,
-input[type="button"]:enabled:hover,
-label[type="button"]:hover {
-  filter: brightness(1.4);
-  cursor: pointer;
-}
-
-.button:focus-visible,
-button:focus-visible:where(:enabled),
-input:enabled:focus-visible:where(
-  [type="submit"],
-  [type="reset"],
-  [type="button"]
-) {
-  outline: 2px solid var(--accent);
-  outline-offset: 1px;
-}
-
-/* Format navigation */
-header > nav {
-  font-size: 1rem;
-  line-height: 2;
-  padding: 1rem 0 0 0;
-}
-
-/* Use flexbox to allow items to wrap, as needed */
-header > nav ul,
-header > nav ol {
-  align-content: space-around;
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-
-/* List items are inline elements, make them behave more like blocks */
-header > nav ul li,
-header > nav ol li {
-  display: inline-block;
-}
-
-header > nav a,
-header > nav a:visited {
-  margin: 0 0.5rem 1rem 0.5rem;
-  border: 1px solid var(--border);
-  border-radius: var(--standard-border-radius);
-  color: var(--text);
-  display: inline-block;
-  padding: 0.1rem 1rem;
-  text-decoration: none;
-}
-
-header > nav a:hover,
-header > nav a.current,
-header > nav a[aria-current="page"] {
-  border-color: var(--accent);
-  color: var(--accent);
-  cursor: pointer;
-}
-
-/* Reduce nav side on mobile */
-@media only screen and (max-width: 720px) {
-  header > nav a {
-	border: none;
-	padding: 0;
-	text-decoration: underline;
-	line-height: 1;
+  li {
+    display: flex;
+    justify-content: center;
+    gap: var(--spacing-inline-md);
+    list-style: none;
   }
 }
 
-/* Consolidate box styling */
-aside, details, pre, progress {
-  background-color: var(--accent-bg);
-  border: 1px solid var(--border);
-  border-radius: var(--standard-border-radius);
-  margin-bottom: 1rem;
-}
+/** Blog feed */
 
-aside {
-  font-size: 1rem;
-  width: 30%;
-  padding: 0 15px;
-  margin-inline-start: 15px;
-  float: right;
-}
-*[dir="rtl"] aside {
-  float: left;
-}
-
-/* Make aside full-width on mobile */
-@media only screen and (max-width: 720px) {
-  aside {
-	width: 100%;
-	float: none;
-	margin-inline-start: 0;
-  }
-}
-
-article, fieldset, dialog {
-  border: 1px solid var(--border);
-  padding: 1rem;
-  border-radius: var(--standard-border-radius);
-  margin-bottom: 1rem;
-}
-
-article h2:first-child,
-section h2:first-child {
-  margin-top: 1rem;
-}
-
-section {
-  border-top: 1px solid var(--border);
-  border-bottom: 1px solid var(--border);
-  padding: 2rem 1rem;
-  margin: 3rem 0;
-}
-
-/* Don't double separators when chaining sections */
-section + section,
-section:first-child {
-  border-top: 0;
-  padding-top: 0;
-}
-
-section:last-child {
-  border-bottom: 0;
-  padding-bottom: 0;
-}
-
-details {
-  padding: 0.7rem 1rem;
-}
-
-summary {
-  cursor: pointer;
-  font-weight: bold;
-  padding: 0.7rem 1rem;
-  margin: -0.7rem -1rem;
-  word-break: break-all;
-}
-
-details[open] > summary + * {
-  margin-top: 0;
-}
-
-details[open] > summary {
-  margin-bottom: 0.5rem;
-}
-
-details[open] > :last-child {
-  margin-bottom: 0;
-}
-
-/* Format tables */
-table {
-  border-collapse: collapse;
-  margin: 1.5rem 0;
-}
-
-td,
-th {
-  border: 1px solid var(--border);
-  text-align: start;
-  padding: 0.5rem;
-}
-
-th {
-  background-color: var(--accent-bg);
-  font-weight: bold;
-}
-
-tr:nth-child(even) {
-  /* Set every other cell slightly darker. Improves readability. */
-  background-color: var(--accent-bg);
-}
-
-table caption {
-  font-weight: bold;
-  margin-bottom: 0.5rem;
-}
-
-/* Format forms */
-textarea,
-select,
-input,
-button,
-.button {
-  font-size: inherit;
-  font-family: inherit;
-  padding: 0.5rem;
-  margin-bottom: 0.5rem;
-  border-radius: var(--standard-border-radius);
-  box-shadow: none;
-  max-width: 100%;
-  display: inline-block;
-}
-textarea,
-select,
-input {
-  color: var(--text);
-  background-color: var(--bg);
-  border: 1px solid var(--border);
-}
-label {
-  display: block;
-}
-textarea:not([cols]) {
-  width: 100%;
-}
-
-/* Add arrow to drop-down */
-select:not([multiple]) {
-  background-image: linear-gradient(45deg, transparent 49%, var(--text) 51%),
-	linear-gradient(135deg, var(--text) 51%, transparent 49%);
-  background-position: calc(100% - 15px), calc(100% - 10px);
-  background-size: 5px 5px, 5px 5px;
-  background-repeat: no-repeat;
-  padding-inline-end: 25px;
-}
-*[dir="rtl"] select:not([multiple]) {
-  background-position: 10px, 15px;
-}
-
-/* checkbox and radio button style */
-input[type="checkbox"],
-input[type="radio"] {
-  vertical-align: middle;
-  position: relative;
-  width: min-content;
-}
-
-input[type="checkbox"] + label,
-input[type="radio"] + label {
-  display: inline-block;
-}
-
-input[type="radio"] {
-  border-radius: 100%;
-}
-
-input[type="checkbox"]:checked,
-input[type="radio"]:checked {
-  background-color: var(--accent);
-}
-
-input[type="checkbox"]:checked::after {
-  /* Creates a rectangle with colored right and bottom borders which is rotated to look like a check mark */
-  content: " ";
-  width: 0.18em;
-  height: 0.32em;
-  border-radius: 0;
-  position: absolute;
-  top: 0.05em;
-  left: 0.17em;
-  background-color: transparent;
-  border-right: solid var(--bg) 0.08em;
-  border-bottom: solid var(--bg) 0.08em;
-  font-size: 1.8em;
-  transform: rotate(45deg);
-}
-input[type="radio"]:checked::after {
-  /* creates a colored circle for the checked radio button  */
-  content: " ";
-  width: 0.25em;
-  height: 0.25em;
-  border-radius: 100%;
-  position: absolute;
-  top: 0.125em;
-  background-color: var(--bg);
-  left: 0.125em;
-  font-size: 32px;
-}
-
-/* Makes input fields wider on smaller screens */
-@media only screen and (max-width: 720px) {
-  textarea,
-  select,
-  input {
-	width: 100%;
-  }
-}
-
-/* Set a height for color input */
-input[type="color"] {
-  height: 2.5rem;
-  padding:  0.2rem;
-}
-
-/* do not show border around file selector button */
-input[type="file"] {
-  border: 0;
-}
-
-/* Misc body elements */
-hr {
-  border: none;
-  height: 1px;
-  background: var(--border);
-  margin: 1rem auto;
-}
-
-mark {
-  padding: 2px 5px;
-  border-radius: var(--standard-border-radius);
-  background-color: var(--marked);
-  color: black;
-}
-
-mark a {
-  color: #0d47a1;
-}
-
-img,
-video {
-  max-width: 100%;
-  height: auto;
-  border-radius: var(--standard-border-radius);
-}
-
-figure {
-  margin: 0;
-  display: block;
-  overflow-x: auto;
-}
-
-figcaption {
-  text-align: center;
-  font-size: 0.9rem;
-  color: var(--text-light);
-  margin-bottom: 1rem;
-}
-
-blockquote {
-  margin-inline-start: 2rem;
-  margin-inline-end: 0;
-  margin-block: 2rem;
-  padding: 0.4rem 0.8rem;
-  border-inline-start: 0.35rem solid var(--accent);
-  color: var(--text-light);
-  font-style: italic;
-}
-
-cite {
-  font-size: 0.9rem;
-  color: var(--text-light);
-  font-style: normal;
-}
-
-dt {
-	color: var(--text-light);
-}
-
-/* Use mono font for code elements */
-code,
-pre,
-pre span,
-kbd,
-samp {
-  font-family: var(--mono-font);
-  color: var(--code);
-}
-
-kbd {
-  color: var(--preformatted);
-  border: 1px solid var(--preformatted);
-  border-bottom: 3px solid var(--preformatted);
-  border-radius: var(--standard-border-radius);
-  padding: 0.1rem 0.4rem;
-}
-
-pre {
-  padding: 1rem 1.4rem;
-  max-width: 100%;
-  overflow: auto;
-  color: var(--preformatted);
-}
-
-/* Fix embedded code within pre */
-pre code {
-  color: var(--preformatted);
-  background: none;
-  margin: 0;
-  padding: 0;
-}
-
-/* Progress bars */
-/* Declarations are repeated because you */
-/* cannot combine vendor-specific selectors */
-progress {
-  width: 100%;
-}
-
-progress:indeterminate {
-  background-color: var(--accent-bg);
-}
-
-progress::-webkit-progress-bar {
-  border-radius: var(--standard-border-radius);
-  background-color: var(--accent-bg);
-}
-
-progress::-webkit-progress-value {
-  border-radius: var(--standard-border-radius);
-  background-color: var(--accent);
-}
-
-progress::-moz-progress-bar {
-  border-radius: var(--standard-border-radius);
-  background-color: var(--accent);
-  transition-property: width;
-  transition-duration: 0.3s;
-}
-
-progress:indeterminate::-moz-progress-bar {
-  background-color: var(--accent-bg);
-}
-
-dialog {
-  max-width: 40rem;
-  margin: auto;
-}
-
-dialog::backdrop {
-  background-color: var(--bg);
-  opacity: 0.8;
-}
-
-@media only screen and (max-width: 720px) {
-  dialog {
-	max-width: 100%;
-	margin: auto 1em;
-  }
-}
-
-/* Superscript & Subscript */
-/* Prevent scripts from affecting line-height. */
-sup, sub {
-  vertical-align: baseline;
-  position: relative;
-}
-
-sup {
-  top: -0.4em;
-}
-
-sub { 
-  top: 0.3em; 
-}
-
-/* Classes for notices */
-.notice {
-  background: var(--accent-bg);
-  border: 2px solid var(--border);
-  border-radius: var(--standard-border-radius);
-  padding: 1.5rem;
-  margin: 2rem 0;
-}
-
-.hidden {
-  display: none;
-}
-
-.small-caps {
-  font-variant: small-caps;
+.h-feed {
+	ul {
+		list-style: none;
+	}
 }
diff --git a/website/public/css/blog.css b/website/public/css/blog.css
index 88f201a..436c13e 100644
--- a/website/public/css/blog.css
+++ b/website/public/css/blog.css
@@ -1,8 +1,8 @@
 .p-summary {
   font-style: italic;
-  font-size: 80%;
+  font-size: var(--font-size-sm);
 }
 
-article > aside {
-  width: 100%;
+h1 {
+  margin-block-start: var(--spacing-block-md);
 }
diff --git a/website/public/css/hcard.css b/website/public/css/hcard.css
index 99431d9..4f1713d 100644
--- a/website/public/css/hcard.css
+++ b/website/public/css/hcard.css
@@ -1,21 +1,32 @@
-.u-photo {
-	margin-inline: auto;
-	margin-block-end: 3rem;
-}
-
-@media (min-width: 48rem) {
-	.h-card:not(.h-card--minimal) {
-		display: flex;
-		gap: 1rem;
-		align-items: center;
-	}
-
-  .u-photo {
-		margin: 0;
+.h-card {
+	img {
+		width: 6rem;
+		height: 6rem;
+		border-radius: 1rem;
 	}
 }
 
-.u-photo {
-	width: 256px;
-}
+@media (min-width: 36rem) {
+	.h-card {
+		grid-column: media-start / content-end;
+		display: grid;
+		grid-template-columns: subgrid; /** Subgrid of main column layout */
+		grid-template-rows: min-content 1fr;
+		grid-template-areas:
+			"empty heading"
+			"photo text";
 
+		img {
+			grid-area: photo;
+			margin-block-start: var(--spacing-block-sm);
+		}
+
+		header {
+			grid-area: heading;
+		}
+
+		.h-card__text {
+			grid-area: text;
+		}
+	}
+}
diff --git a/website/public/css/reset.css b/website/public/css/reset.css
index 5a637b3..6cb4c4f 100644
--- a/website/public/css/reset.css
+++ b/website/public/css/reset.css
@@ -29,7 +29,6 @@ ol[role='list'] {
 /* Set core body defaults */
 body {
   min-height: 100vh;
-  line-height: 1.5;
 }
 
 /* Set shorter line heights on headings and interactive elements */
@@ -67,3 +66,8 @@ textarea:not([rows]) {
   scroll-margin-block: 5ex;
 }
 
+* {
+  margin: 0;
+  padding: 0;
+}
+
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>
-            <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>
\ 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>