From 17f668cd6a2b2415cacd94c75481f2fcb98e4ae1 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Tue, 31 Jan 2023 16:06:41 -0800
Subject: [PATCH] Fixing images and tabs.

---
 src/routes/portfolio/+page.svelte | 40 ++++++++++++++++++-------------
 src/routes/uses/+page.svelte      |  7 ++++--
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/routes/portfolio/+page.svelte b/src/routes/portfolio/+page.svelte
index 5bdd87a..8a93152 100644
--- a/src/routes/portfolio/+page.svelte
+++ b/src/routes/portfolio/+page.svelte
@@ -43,10 +43,12 @@
 					<div class="gridItemStyles">
 						<div>
 							<h2>Personal Website</h2>
-							<Image
-								src={personalSite}
-								alt="Home Page bradleyshellnut.com"
-							/>
+							<div>
+								<Image
+									src={personalSite}
+									alt="Home Page bradleyshellnut.com"
+								/>
+							</div>
 						</div>
 						<div>
 							<p>
@@ -140,7 +142,9 @@
 					<div class="gridItemStyles">
 						<div>
 							<h2>Wedding Website</h2>
-							<Image src={weddingWebsite} alt="Wedding Website" />
+							<div>
+								<Image src={weddingWebsite} alt="Wedding Website" />
+							</div>
 							<p>
 								<a
 									href="https://weddingsite-six.vercel.app/"
@@ -210,10 +214,12 @@
 					<div class="gridItemStyles">
 						<div>
 							<h2>Old Personal Website</h2>
-							<Image
-								src={oldSite}
-								alt="Home Page of old bradleyshellnut.com"
-							/>
+							<div>
+								<Image
+									src={oldSite}
+									alt="Home Page of old bradleyshellnut.com"
+								/>
+							</div>
 							<p>
 								<a
 									href="https://web.archive.org/web/20201205233507/https://bradleyshellnut.com/about"
@@ -244,10 +250,12 @@
 				<div class="gridItemStyles">
 					<div>
 						<h2>Mark Shellnut Architect </h2>
-						<Image
-							src={shellnutArchitectWebsite}
-							alt="Mark Shellnut Architect"
-						/>
+						<div>
+							<Image
+								src={shellnutArchitectWebsite}
+								alt="Mark Shellnut Architect"
+							/>
+						</div>
 						<p>
 							<a
 								href="https://markshellnutarchitect.com/"
@@ -302,7 +310,7 @@
 		gap: 3rem;
 		margin: 0.5rem auto;
 
-		@media (max-width: 580px) {
+		@media (max-width: 767px) {
 			grid-template-columns: repeat(1, minmax(150px, 400px));
 			grid-gap: 1.2rem;
 			margin: 0.2rem 0;
@@ -311,12 +319,12 @@
 
 	:global(.gridItemStyles) {
 		display: grid;
-		grid-template-columns: 0.5fr 0.5fr;
+		grid-template-columns: minmax(200px, 0.5fr) 0.5fr;
 		width: 100%;
 		gap: 2rem;
 		margin: 0 auto;
 
-		@media (max-width: 580px) {
+		@media (max-width: 767px) {
 			grid-template-columns: 1fr;
 		}
 
diff --git a/src/routes/uses/+page.svelte b/src/routes/uses/+page.svelte
index 4b29d9b..e81758b 100644
--- a/src/routes/uses/+page.svelte
+++ b/src/routes/uses/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import SEO from "$root/lib/components/SEO.svelte";
 	import DesktopImage from '$lib/assets/images/Desktop_so_clean.jpg';
+	import { Image } from "svelte-lazy-loader";
 </script>
 
 <SEO title="Uses" />
@@ -39,9 +40,11 @@
 		</p>
 	</div>
 	<div class="uses-block-styles">
-		<div style="display: grid; justify-content: center; margin-bottom: 2rem;">
+		<div style="display: grid; grid-template-columns: minmax(400px, 0.65fr); justify-content: center; margin-bottom: 2rem;">
 			<figure>
-				<img src={DesktopImage} alt="Clean desktop" width="400px"/>
+				<div>
+					<Image src={DesktopImage} alt="Clean desktop" />
+				</div>
 			</figure>
 		</div>
 		<h2>Hardware & Accessories</h2>