From 63546da5240fbb770de6fd54b87fc41953ea86b5 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Mon, 1 May 2023 16:20:00 -0700
Subject: [PATCH] Aspect ratio on image, remove react leftovers, remove gatsby
 leftovers, and fix scroll track on overflow.

---
 src/lib/components/bandcamp/index.svelte | 41 +++++++++++++++++-------
 src/lib/types/album.ts                   |  2 +-
 src/routes/+page.svelte                  |  7 ++--
 src/styles/global.pcss                   |  5 ---
 4 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/lib/components/bandcamp/index.svelte b/src/lib/components/bandcamp/index.svelte
index 22d3dc3..a3af21b 100644
--- a/src/lib/components/bandcamp/index.svelte
+++ b/src/lib/components/bandcamp/index.svelte
@@ -10,8 +10,8 @@
 	for (let album of displayAlbums) {
 		album.src = [
 			{ format: 'avif', src: `${album.artwork}`, width: 230, height: 230 },
-			{ format: 'webp', src: `${album.artwork}`, width: 230, height: 230},
-			{ format: 'jpg', src: `${album.artwork}`, width: 230, height: 230}
+			{ format: 'webp', src: `${album.artwork}`, width: 230, height: 230 },
+			{ format: 'jpg', src: `${album.artwork}`, width: 230, height: 230 }
 		]
 	}
 </script>
@@ -28,7 +28,7 @@
 						href={album.url}
 						rel="noreferrer"
 					>
-						<Img src={album.src} alt={`Album art for ${album.title}`} />
+						<Img class="album-artwork" src={album.src} alt={`Album art for ${album.title}`} />
 					</a>
 				</figure>
 				<a
@@ -50,23 +50,41 @@
 		grid-template-columns: repeat(3, minmax(auto, 1fr));
 		gap: 1rem;
 
+		:global(.album-artwork) {
+			aspect-ratio: auto 230 / 230;
+			object-fit: cover;
+		}
+
 		@media (max-width: 1000px) {
 			grid-template-columns: repeat(2, minmax(150px, 1fr));
-			img {
-				width: 230px;
-				height: 100%;
-				object-fit: cover;
-			}
 		}
 
 		@media (max-width: 575px) {
 			height: 500px;
 			overflow-x: hidden;
 			overflow-y: auto;
-			::-webkit-scrollbar {
+
+			scrollbar-width: thin;
+			scrollbar-color: var(--lightGrey) var(--darkGrey);
+
+			&::-webkit-scrollbar {
 				width: 12px;
 			}
-			scrollbar-width: thin;
+
+			&::-webkit-scrollbar-track {
+				background: var(--darkGrey);
+			}
+
+			&::-webkit-scrollbar-thumb {
+				background-color: var(--lightGrey);
+				border-radius: 6px;
+				border: 3px solid var(--darkGrey);
+			}
+
+			/* ::-webkit-scrollbar {
+				width: 12px;
+			} */
+			/* scrollbar-width: thin;
 			scrollbar-color: var(--lightGrey) var(--darkGrey);
 			::-webkit-scrollbar-track {
 				background: var(--darkGrey);
@@ -75,7 +93,7 @@
 				background-color: var(--lightGrey);
 				border-radius: 6px;
 				border: 3px solid var(--darkGrey);
-			}
+			} */
 			grid-template-columns: minmax(230px, 1fr);
 		}
 	}
@@ -91,7 +109,6 @@
 		}
 
 		@media (max-width: 550px) {
-			grid-template-columns: 0.75fr 0.75fr;
 			font-size: 1rem;
 			align-items: center;
 		}
diff --git a/src/lib/types/album.ts b/src/lib/types/album.ts
index 7113439..e34c149 100644
--- a/src/lib/types/album.ts
+++ b/src/lib/types/album.ts
@@ -10,5 +10,5 @@ export type ExternalImageSource = {
 	format: string;
 	src: string;
 	width: number;
-	height: number;
+	height?: number;
 };
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b7546c3..61943bb 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -14,7 +14,6 @@
 	let totalArticles: number;
 	$: ({ albums, articlesData } = data);
 	$: ({ articles, totalArticles } = articlesData);
-	// $: console.log(`All data: ${JSON.stringify(articlesData)}`);
 	
   const userNames = {
     github: 'BradNut',
@@ -44,11 +43,11 @@
 				rel="noreferrer"
 			>
 				cocktails
-			</a>{' '}
+			</a>
 			🍸, or having fun with my cats. 🐈
 		</p>
 		<p>
-			Check me out on{' '}
+			Check me out on
 			<a
 				href={`https://www.linkedin.com/in/${userNames.linkedIn}`}
 				target="_blank"
@@ -57,7 +56,7 @@
 			>
 				LinkedIn
 			</a>
-			,{' '}
+			,
 			<a
 				href={`https://www.github.com/${userNames.github}`}
 				target="_blank"
diff --git a/src/styles/global.pcss b/src/styles/global.pcss
index 0b0adf4..d029017 100644
--- a/src/styles/global.pcss
+++ b/src/styles/global.pcss
@@ -110,11 +110,6 @@ body::-webkit-scrollbar-thumb {
 	border: 3px solid var(--darkGrey);
 }
 
-.gatsby-image-wrapper img[src*='base64\\,'] {
-	image-rendering: -moz-crisp-edges;
-	image-rendering: pixelated;
-}
-
 ::selection {
 	background: var(--white);
 	color: var(--background);