From 185466c2a2e3e8f488a0e084ba9770a6256fb01b Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@pm.me>
Date: Mon, 16 Jan 2023 23:07:15 -0800
Subject: [PATCH] Moving env viewport variables, using in game grid, remove
 css, and fix up consistent spacing for the game card.

---
 environmentVariables.json                     | 10 ------
 postcss.config.cjs                            |  2 +-
 src/lib/components/button/index.svelte        |  2 +-
 src/lib/components/game/index.svelte          | 31 ++-----------------
 src/lib/components/header/Header.svelte       |  2 +-
 .../components/search/textSearch/index.svelte |  8 ++---
 src/lib/util/environmentVariables.json        | 10 ++++++
 src/routes/+layout.svelte                     |  2 +-
 src/routes/search/+page.svelte                | 20 ------------
 9 files changed, 20 insertions(+), 67 deletions(-)
 delete mode 100644 environmentVariables.json
 create mode 100644 src/lib/util/environmentVariables.json

diff --git a/environmentVariables.json b/environmentVariables.json
deleted file mode 100644
index 9f739bf..0000000
--- a/environmentVariables.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-	"environment-variables": {
-		"--xsmall-viewport": "480px",
-		"--small-viewport": "640px",
-		"--medium-viewport": "768px",
-		"--large-viewport": "1024px",
-		"--xlarge-viewport": "1280px",
-		"--xxlarge-viewport": "1536px"
-	}
-}
diff --git a/postcss.config.cjs b/postcss.config.cjs
index ef732c8..7c8ddf0 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -13,7 +13,7 @@ const config = {
 		atImport(),
 		postcssNested,
 		postcssEnvFunction({
-			importFrom: './environmentVariables.json'
+			importFrom: './src/lib/util/environmentVariables.json'
 		})
 	]
 };
diff --git a/src/lib/components/button/index.svelte b/src/lib/components/button/index.svelte
index 40a45ce..ad9d981 100644
--- a/src/lib/components/button/index.svelte
+++ b/src/lib/components/button/index.svelte
@@ -14,7 +14,7 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		border-radius: 4px;
+		border-radius: 10px;
 		margin: 0;
 		padding: 1rem;
 		min-width: 20rem;
diff --git a/src/lib/components/game/index.svelte b/src/lib/components/game/index.svelte
index 847eabb..335cf58 100644
--- a/src/lib/components/game/index.svelte
+++ b/src/lib/components/game/index.svelte
@@ -116,24 +116,10 @@
 </article>
 
 <style lang="scss">
-	img {
-		max-height: 200px;
-	}
-
-	button {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		gap: 1rem;
-		width: 100%;
-		border-radius: 10px;
-		padding: 1rem;
-		background-color: var(--color-btn-primary-active);
-	}
-
 	.game-container {
 		display: grid;
-		grid-template-rows: repeat(auto-fill, 1fr);
+		/* grid-template-rows: repeat(auto-fill, 1fr); */
+		grid-template-rows: 0.15fr minmax(250px, 1fr) 0.2fr 0.2fr;
 		place-items: center;
 		text-align: center;
 
@@ -167,19 +153,6 @@
 		.game-buttons {
 			display: grid;
 			gap: 1rem;
-
-			.btn {
-				max-height: 100px;
-				text-align: start;
-			}
-
-			.remove {
-				background-color: var(--warning);
-
-				&:hover {
-					background-color: var(--warning-hover);
-				}
-			}
 		}
 	}
 </style>
diff --git a/src/lib/components/header/Header.svelte b/src/lib/components/header/Header.svelte
index b9319e8..7412bb4 100644
--- a/src/lib/components/header/Header.svelte
+++ b/src/lib/components/header/Header.svelte
@@ -9,7 +9,7 @@
 			<img src={logo} alt="Bored Game Home" />
 		</a>
 	</div>
-
+	<!-- <TextSearch /> -->
 	<nav>
 		<a href="/collection" title="Go to your collection" data-sveltekit-preload-data>Collection</a>
 		<a href="/wishlist" title="Go to your wishlist" data-sveltekit-preload-data>Wishlist</a>
diff --git a/src/lib/components/search/textSearch/index.svelte b/src/lib/components/search/textSearch/index.svelte
index 2410c64..b7b97b4 100644
--- a/src/lib/components/search/textSearch/index.svelte
+++ b/src/lib/components/search/textSearch/index.svelte
@@ -278,18 +278,18 @@
 	.games-list {
 		display: grid;
 		--listColumns: 4;
-		grid-template-columns: repeat(var(--listColumns), minmax(200px, 1fr));
+		grid-template-columns: repeat(var(--listColumns), minmax(250px, 1fr));
 		gap: 2rem;
 
-		@media screen and (800px < width <= 1200px) {
+		@media screen and (env(--large-viewport) < width <= env(--xxlarge-viewport)) {
 			--listColumns: 3;
 		}
 
-		@media screen and (650px < width <= 800px) {
+		@media screen and (env(--small-viewport) < width <= env(--large-viewport)) {
 			--listColumns: 2;
 		}
 
-		@media screen and (width <= 650px) {
+		@media screen and (width <= env(--small-viewport)) {
 			--listColumns: 1;
 		}
 	}
diff --git a/src/lib/util/environmentVariables.json b/src/lib/util/environmentVariables.json
new file mode 100644
index 0000000..4d446c5
--- /dev/null
+++ b/src/lib/util/environmentVariables.json
@@ -0,0 +1,10 @@
+{
+	"environment-variables": {
+		"--xsmall-viewport": "500px",
+		"--small-viewport": "600px",
+		"--medium-viewport": "700px",
+		"--large-viewport": "1000px",
+		"--xlarge-viewport": "1200px",
+		"--xxlarge-viewport": "1500px"
+	}
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 6034a8b..40b2304 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -161,7 +161,7 @@
 		max-width: 80vw;
 
 		@media (min-width: 1600px) {
-			max-width: 65vw;
+			max-width: 70vw;
 		}
 
 		box-sizing: border-box;
diff --git a/src/routes/search/+page.svelte b/src/routes/search/+page.svelte
index c68a6b5..6f956d3 100644
--- a/src/routes/search/+page.svelte
+++ b/src/routes/search/+page.svelte
@@ -20,23 +20,3 @@
 <div class="game-search">
 	<TextSearch showButton advancedSearch {data} {form} />
 </div>
-
-<!-- {#if $gameStore?.length > 0}
-	<div class="games">
-		<h1>Games Found:</h1>
-		<div class="games-list">
-			{#each $gameStore as game (game.id)}
-				<Game
-					on:handleRemoveWishlist={handleRemoveWishlist}
-					on:handleRemoveCollection={handleRemoveCollection}
-					{game}
-				/>
-			{/each}
-		</div>
-	</div>
-{:else if form && form?.status && form.status !== 200}
-	<h1>There was an error searching for games!</h1>
-	<h2>Please try again later.</h2>
-{/if} -->
-<style lang="scss">
-</style>