Merge branch 'main' of https://github.com/joeacarstairs/personal-website

website/public/css/base.css

@@ -45,9 +45,11 @@
 
 /** 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);
+  :root {
+    --colour-primary-fg: var(--colour-primary-20);
+    --colour-primary-bg: var(--colour-primary-95);
+    --colour-hyperlink: var(--colour-hyperlink-40);
+  }
 }
 
 /** Base typography */
@@ -57,6 +59,9 @@ body {
   color: var(--colour-primary-fg);
   background-color: var(--colour-primary-bg);
   line-height: 1.5;
+
+  /* Geometric Humanist stack from https://modernfontstacks.com */
+  font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
 }
 
 small {

website/public/css/hcard.css

@@ -1,8 +1,34 @@
 .h-card {
-	img {
+	div:has(img) {
 		width: 6rem;
 		height: 6rem;
-		border-radius: 1rem;
+		margin-inline: auto;
+
+		img {
+			width: 6rem;
+			height: 6rem;
+			border-radius: 1rem;
+			filter: contrast(1.25);
+		}
+
+		&::after {
+			/* Colour overlay */
+			background-color: var(--colour-primary-80);
+			opacity: 0.3;
+
+			/* Same size and shape as the img */
+			border-radius: 1rem;
+			width: 6rem;
+			height: 6rem;
+
+			/* Positioned on top of the img */
+			display: block;
+			position: relative;
+			top: -6rem;
+
+			/* A content value is needed to get the ::after to render */
+			content: '';
+		}
 	}
 }
 
@@ -16,7 +42,7 @@
 			"empty heading"
 			"photo text";
 
-		img {
+		div:has(img) {
 			grid-area: photo;
 			margin-block-start: var(--spacing-block-sm);
 		}

website/src/components/Me.astro

@@ -2,7 +2,9 @@
 ---
 
 <section class="h-card">
-    <img class="u-photo" src="/images/headshot.jpg" height="256" width="256" />
+    <div>
+        <img class="u-photo" src="/images/headshot.webp" height="96" width="96" />
+    </div>
 
     <header>
         <h1>