Moving env viewport variables, using in game grid, remove css, and fix up consistent spacing for the game card.

environmentVariables.json

@@ -1,10 +0,0 @@
-{
-	"environment-variables": {
-		"--xsmall-viewport": "480px",
-		"--small-viewport": "640px",
-		"--medium-viewport": "768px",
-		"--large-viewport": "1024px",
-		"--xlarge-viewport": "1280px",
-		"--xxlarge-viewport": "1536px"
-	}
-}

postcss.config.cjs

@@ -13,7 +13,7 @@ const config = {
 		atImport(),
 		postcssNested,
 		postcssEnvFunction({
-			importFrom: './environmentVariables.json'
+			importFrom: './src/lib/util/environmentVariables.json'
 		})
 	]
 };

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;

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>

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>

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;
 		}
 	}

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"
+	}
+}

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;

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>