From 5a69cde9c3060534bfe3db204cf997186cd8c217 Mon Sep 17 00:00:00 2001
From: Lewis Dale <lewis.dale@triptease.com>
Date: Wed, 8 Feb 2023 08:38:59 +0000
Subject: [PATCH] Fix image sizing & scaling on home page

---
 src/css/compositions/row.css | 1 +
 src/css/exceptions/home.css  | 6 ++++++
 src/css/globals.css          | 2 +-
 src/index.html               | 6 ++----
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/css/compositions/row.css b/src/css/compositions/row.css
index de0894e..b0f11db 100644
--- a/src/css/compositions/row.css
+++ b/src/css/compositions/row.css
@@ -2,4 +2,5 @@
   display: flex;
   flex-direction: row;
   gap: var(--vertical-spacing, 1rem);
+  flex-wrap: wrap;
 }
diff --git a/src/css/exceptions/home.css b/src/css/exceptions/home.css
index 9da5e19..3b7ad84 100644
--- a/src/css/exceptions/home.css
+++ b/src/css/exceptions/home.css
@@ -10,4 +10,10 @@
   h1 {
     font-size: var(--text-size-3xl);
   }
+
+  picture {
+    max-width: clamp(8rem, calc(1.09rem + 10vw), 12rem);
+    margin-left: auto;
+    margin-right: auto;
+  }
 }
diff --git a/src/css/globals.css b/src/css/globals.css
index 76b193c..ac3f5c4 100644
--- a/src/css/globals.css
+++ b/src/css/globals.css
@@ -1,5 +1,5 @@
 body {
-  background-color: var(--color-blueGray-800);
+  background-color: var(--color-slate-800);
   color: var(--color-slate-200);
   font-family: var(--font-family-mono);
   font-size: var(--text-size-s);
diff --git a/src/index.html b/src/index.html
index f7571e8..f4e36d9 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,15 +4,13 @@ layout: base.njk
 ---
 
 <main class="home wrapper-lg stack-2xl">
-	<section class="stack-md">
+	<section class="stack-md row">
 		<h1>Hi, I'm Lewis</h1>
 		<p class="inline-block max-w-[45ch]">
 			I'm a software engineer who loves building things for the web. I consider myself a generalist, but on a given day I'll probably be working with Typescript, HTML and CSS, and on occasion a touch of .NET. I work for <a href="https://triptease.com" target="_blank" rel="noreferrer">Triptease</a> as a Senior Software Engineer, and on the side I'm learning Rust by building a <a href="/blog/category/basic">Sinclair BASIC Interpreter</a>.
 		</p>
 
-		<div class="inline-block max-w-[10rem] ml-[2rem]">
-			{% image "src/images/me.jpg", "My face", "box circle" %}
-		</div>
+		{% image "src/images/me.jpg", "My face", "box circle" %}
 
 		<p>
 			When I'm not working I love cycling, reading fiction (mostly sci-fi and ghost stories), and spending time with my family & our border collie.