Improves image and shrinks size

3 files changed, 29 insertions, 3 deletions

diff --git a/website/public/css/hcard.css b/website/public/css/hcard.css
index 4f1713d..414eed9 100644
--- a/website/public/css/hcard.css
+++ b/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);
 		}
diff --git a/website/public/images/headshot.jpg b/website/public/images/headshot.jpg
deleted file mode 100644
index 2ca13cf..0000000
--- a/website/public/images/headshot.jpg
+++ /dev/null
diff --git a/website/public/images/headshot.webp b/website/public/images/headshot.webp
new file mode 100644
index 0000000..0c2a15b
--- /dev/null
+++ b/website/public/images/headshot.webp