Fix image sizing & scaling on home page

src/css/compositions/row.css

@@ -2,4 +2,5 @@
   display: flex;
   flex-direction: row;
   gap: var(--vertical-spacing, 1rem);
+  flex-wrap: wrap;
 }

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;
+  }
 }

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);

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.