From 2bd5b49b9b1738daf4ef0e1cd4fb66e9d4e66503 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Mon, 10 Apr 2023 17:38:17 -0700
Subject: [PATCH] Adding border radius, extra image size, media query to uses
 image.

---
 src/routes/uses/+page.svelte | 25 +++++++++++++++++++++----
 vite.config.ts               |  2 +-
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/routes/uses/+page.svelte b/src/routes/uses/+page.svelte
index 24aa520..4af695d 100644
--- a/src/routes/uses/+page.svelte
+++ b/src/routes/uses/+page.svelte
@@ -40,9 +40,9 @@
 		</p>
 	</div>
 	<div class="uses-block-styles">
-		<figure>
-			<Img class="portfolio-image better-blur" style="max-height: 480px; max-width: 620px;" src={desktop} alt="Clean desk with Samsung monitor and Ducky Keyboard" loading="eager" />
-		</figure>
+		<div class="uses-image">
+			<Img class="portfolio-image better-blur" style="width: 100%; max-height: 480px;" src={desktop} alt="Clean desk with Samsung monitor and Ducky Keyboard" loading="eager" />
+		</div>
 		<h2>Hardware & Accessories</h2>
 		<ul>
 			<li>MacBook Pro 15-inch for work.</li>
@@ -541,7 +541,8 @@
 <style lang="postcss">
 	figure {
 		display: grid;
-		grid-template-columns: minmax(400px, 0.65fr);
+		grid-template-columns: minmax(500px, 0.65fr);
+		border-radius: 3px;
 		place-content: center;
 		margin-bottom: 2rem;
 	}
@@ -565,6 +566,18 @@
 		}
 	}
 
+	.uses-image {
+		display: grid;
+		grid-template-columns: minmax(620px, 0.65fr);
+		place-content: center;
+
+		@media (max-width: 800px) {
+			grid-template-columns: minmax(480px, 0.65fr);
+		}
+		/* margin-left: auto; */
+		/* margin-right: auto; */
+	}
+
  .uses-block-styles {
 		margin: 2.5rem 0;
 		@media (max-width: 800px) {
@@ -601,4 +614,8 @@
 			}
 		}
 	}
+
+	:global(img) {
+		border-radius: 3px;
+	}
 </style>
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index e4d230c..7b6c76b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -10,7 +10,7 @@ const config: UserConfig = {
 			// By default, directives are `?width=480;1024;1920&format=avif;webp;jpg`
 			// Now we change it to generate 5 variants instead - `avif/jpg` formats at `640/1280` + LQIP
 			defaultDirectives: () =>
-				new URLSearchParams('?width=480;640;1024;1920&format=avif;webp;jpg&lqip=64')
+				new URLSearchParams('?width=320;480;640;1024;1920&format=avif;webp;jpg&lqip=64')
 		})
 	],
 	test: {