From 49ba7ecd2dae803ff81a3eed631b538d9fe02b95 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Tue, 11 Apr 2023 12:04:42 -0700
Subject: [PATCH] Aspect ratio on uses image and media query sizes.

---
 src/routes/uses/+page.svelte | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/routes/uses/+page.svelte b/src/routes/uses/+page.svelte
index 45c7bb8..712632a 100644
--- a/src/routes/uses/+page.svelte
+++ b/src/routes/uses/+page.svelte
@@ -41,7 +41,7 @@
 	</div>
 	<div class="uses-block-styles">
 		<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" />
+			<Img class="uses-image better-blur" src={desktop} alt="Clean desk with Samsung monitor and Ducky Keyboard" loading="eager" />
 		</div>
 		<h2>Hardware & Accessories</h2>
 		<ul>
@@ -494,16 +494,6 @@
 					Bitwarden
 				</a>
 			</li>
-			<li>
-				<a
-					target="_blank"
-					aria-label="Element Messaging App"
-					href="https://element.io/"
-					rel="noreferrer"
-				>
-					Element (Riot.im)
-				</a>
-			</li>
 			<li>
 				<a
 					target="_blank"
@@ -594,4 +584,15 @@
 			}
 		}
 	}
+
+	:global(.uses-image) {
+		margin-left: auto;
+		margin-right: auto;
+		aspect-ratio: 4 / 3;
+		max-height: 480px;
+
+		@media(max-width: 800px) {
+			max-height: 350px;
+		}
+	}
 </style>
\ No newline at end of file