From a0713755a2090072c7e6ac2d0da1734cf58435e4 Mon Sep 17 00:00:00 2001
From: Lee Cattarin <lee.cattarin@gmail.com>
Date: Wed, 21 Jan 2026 19:24:23 -0800
Subject: [PATCH] rework artist in residence layout

---
 artists/hawke/index.html          |  6 +-
 assets/styles/artist-resident.css | 94 ++++++++++++++++++++++---------
 2 files changed, 70 insertions(+), 30 deletions(-)

diff --git a/artists/hawke/index.html b/artists/hawke/index.html
index cd27794..c9f2dc0 100644
--- a/artists/hawke/index.html
+++ b/artists/hawke/index.html
@@ -34,10 +34,10 @@
 			<header><!-- auto-populated by nav.js --></header>
 
 			<main id="main">
-				<div class="resident">
-					<h1>Jennifer Hawke</h1>
+				<div class="topic">
 					<img src="/assets/img/artists/hawke.jpg" alt="jennifer hawke, the artist, a white person with a beard and knowing eyes. the top half of their face is painted blue with a white heart, and they are wearing a huge elaborate flower crown, a red shawl, and several chunky pendants.">
-					<div id="bio">
+					<h1>Jennifer Hawke</h1>
+					<div class="desc">
 						<p>Jennifer Hawke hails from Billings, Montana where they got their degree in Cast Metals and Painting. They have been on Vashon Island for about 18 years and love doing the Bearded Lady Road Report. They have had their Studio at the Beall Greenhouses for about 8 years and only recently started opening to the public. Their space is warmed by a singular woodstove & all the ephemera that comes with being the child of an antique dealer.</p>
 					</div>
 				</div>
diff --git a/assets/styles/artist-resident.css b/assets/styles/artist-resident.css
index 58a747d..033083c 100644
--- a/assets/styles/artist-resident.css
+++ b/assets/styles/artist-resident.css
@@ -1,51 +1,91 @@
-.resident {
-	margin: 2rem auto;
+.topic {
+	margin: 4rem auto;
 	display: grid;
-	grid-template:
-		'img h1'
-		'img desc'
-		'img .';
-	grid-template-columns: 1fr 1fr;
 }
 
-@media (max-width: 1050px) {
-	.resident {
+.topic:nth-child(odd) {
+	grid-template:
+		'img h'
+		'img desc'
+		'img .';
+	grid-template-columns: 45% auto;
+}
+
+.topic:nth-child(even) {
+	grid-template:
+		'h img'
+		'desc img'
+		'. img';
+	grid-template-columns: auto 45%;
+}
+
+@media (max-width: 950px) {
+	.topic:nth-child(odd),
+	.topic:nth-child(even) {
 		grid-template:
 			'img'
-			'h1'
+			'h'
 			'desc';
 	}
 }
 
-.resident h1 {
-	grid-area: h1;
-	font-size: 2rem;
-	margin: 0;
-	border-bottom: .25rem solid var(--color-accent);
-}
-
-.resident img {
+.topic img {
 	grid-area: img;
 	border-radius: 1rem;
 }
 
-.resident #bio {
-	grid-area: desc;
-	margin-left: 1.75rem;
-}
-
-@media (max-width: 1050px) {
-	.resident img {
+@media (max-width: 950px) {
+	.topic img {
 		border-radius: 1rem 1rem 0 0;
 		border-bottom: .25rem solid var(--color-accent);
 	}
+}
 
-	.resident #bio {
+.topic h1,
+.topic h2 {
+	margin: 0;
+	grid-area: h;
+	border-bottom: .25rem solid var(--color-accent);
+	padding: .25rem;
+}
+
+.topic:nth-child(odd) h2 {
+	padding-left: .75rem;
+}
+
+.topic:nth-child(even) h2 {
+	text-align: right;
+	padding-right: .75rem;
+}
+
+@media (max-width: 950px) {
+	.topic:nth-child(odd) h2,
+	.topic:nth-child(even) h2 {
+		padding: .25rem 0;
+	}
+}
+
+.topic .desc {
+	grid-area: desc;
+	background-color: var(--color-bg-alt);
+	border-radius: 0 0 1rem 1rem;
+}
+
+.topic:nth-child(odd) .desc {
+	margin-left: 1.5rem;
+}
+
+.topic:nth-child(even) .desc {
+	margin-right: 1.5rem;
+}
+
+@media (max-width: 950px) {
+	.topic:nth-child(odd) .desc,
+	.topic:nth-child(even) .desc {
 		margin: 0;
 	}
 }
 
-.resident #bio,
 .contact ul {
 	background-color: var(--color-bg-alt);
 	border-radius: 0 0 1rem 1rem;