From 8f74589539b2f2b68afe99c19c8999dac33266ac Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Fri, 17 Feb 2023 16:46:58 -0800
Subject: [PATCH] Testing image bound widths.

---
 src/routes/portfolio/+page.svelte | 32 +++++++++++++++----------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/routes/portfolio/+page.svelte b/src/routes/portfolio/+page.svelte
index 0ab594f..e717e7b 100644
--- a/src/routes/portfolio/+page.svelte
+++ b/src/routes/portfolio/+page.svelte
@@ -47,15 +47,13 @@
 			<TabPanel>
 				<div class="portfolioStyles">
 					<div class="gridItemStyles">
-						<div>
+						<div class="portfolioPicture">
 							<h2>Personal Website</h2>
-							<div style="min-width: 200px; min-height: 500px;">
-								<Picture placeholder={personalSiteBlurred} src={personalSite} alt="Home Page of bradleyshellnut.com">
-									{#each personalSiteFormats as { src, format }}
-										<source data-srcset={src} type="image/{format}" />
-									{/each}
-								</Picture>
-							</div>
+							<Picture placeholder={personalSiteBlurred} src={personalSite} alt="Home Page of bradleyshellnut.com">
+								{#each personalSiteFormats as { src, format }}
+									<source data-srcset={src} type="image/{format}" />
+								{/each}
+							</Picture>
 						</div>
 						<div>
 							<p>
@@ -149,7 +147,7 @@
 					<div class="gridItemStyles">
 						<div>
 							<h2>Wedding Website</h2>
-							<div>
+							<div class="portfolioPicture">
 								<Picture placeholder={weddingWebsiteBlurred} src="images/Wedding_Website.png" alt="Wedding Website">
 									{#each weddingWebsite as { src, format }}
 										<source data-srcset={src} type="image/{format}" />
@@ -225,7 +223,7 @@
 					<div class="gridItemStyles">
 						<div>
 							<h2>Old Personal Website</h2>
-							<div>
+							<div class="portfolioPicture">
 								<Picture placeholder={oldSiteBlurred} src="images/Old_Website_Bradley_Shellnut.png" alt="Home Page of the old bradleyshellnut.com website">
 									{#each oldSite as { src, format }}
 										<source data-srcset={src} type="image/{format}" />
@@ -262,7 +260,7 @@
 				<div class="gridItemStyles">
 					<div>
 						<h2>Mark Shellnut Architect </h2>
-						<div>
+						<div class="portfolio-picture">
 							<Picture placeholder={shellnutArchitectWebsiteBlurred} src="images/Mark_Shellnut_Architect.png" alt="Mark Shellnut Architect's Website">
 								{#each shellnutArchitectWebsite as { src, format }}
 									<source data-srcset={src} type="image/{format}" />
@@ -334,9 +332,14 @@
 		}
 	}
 
+	:global(.portfolioPicture) {
+		border-radius: 3px;
+		width: minmax(200px, 500px);
+	}
+
 	:global(.gridItemStyles) {
 		display: grid;
-		grid-template-columns: minmax(200px, 0.5fr) 0.5fr;
+		grid-template-columns: minmax(200px, 0.7fr) 0.5fr;
 		width: 100%;
 		gap: 2rem;
 		margin: 0 auto;
@@ -345,11 +348,6 @@
 			grid-template-columns: 1fr;
 		}
 
-		img {
-			border-radius: 3px;
-			max-width: 800px;
-		}
-
 		p {
 			margin: 1rem 0;
 			padding: 0;