From 4e89b0186f10636e3fdd69283faef855c121d4be Mon Sep 17 00:00:00 2001
From: David Ball <david@daball.me>
Date: Sun, 14 Jul 2024 14:43:03 -0400
Subject: [PATCH] Set max-width on BrandCard, which flex positions inside its
 container, making the BrandCards smaller. Renamed CSS attributes for
 BrandCard, CategoryCard, and ProductCard.

---
 src/components/BrandCard.astro    | 17 +++++++++--------
 src/components/CategoryCard.astro | 16 ++++++++--------
 src/components/ProductCard.astro  | 25 ++++++++++---------------
 3 files changed, 27 insertions(+), 31 deletions(-)

diff --git a/src/components/BrandCard.astro b/src/components/BrandCard.astro
index 01d2157..27d4308 100644
--- a/src/components/BrandCard.astro
+++ b/src/components/BrandCard.astro
@@ -8,13 +8,13 @@ interface Props {
 const { brand } = Astro.props;
 ---
 
-<li class="link-card">
+<li class="brand-card">
 	<a href={`/brand/${brand.slug}`}>
 		{brand.logoUrl !== undefined && <img src={brand.logoUrl} alt={brand.name} />}
 	</a>
 </li>
 <style>
-	.link-card {
+	.brand-card {
 		list-style: none;
 		display: flex;
 		padding: 1px;
@@ -26,8 +26,9 @@ const { brand } = Astro.props;
 		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
 		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
 		text-align: center;
+		max-width: 8em;
 	}
-	.link-card > a {
+	.brand-card > a {
 		width: 100%;
 		text-decoration: none;
 		line-height: 1.4;
@@ -37,23 +38,23 @@ const { brand } = Astro.props;
 		background-color: #23262d;
 		opacity: 0.8;
 	}
-	.link-card img {
+	.brand-card img {
 		max-width: 100%;
 	}
-	h2 {
+	.brand-card h2 {
 		margin: 0;
 		font-size: 1.25rem;
 		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
 	}
-	p {
+	.brand-card p {
 		margin-top: 0.5rem;
 		margin-bottom: 0;
 	}
-	.link-card:is(:hover, :focus-within) {
+	.brand-card:is(:hover, :focus-within) {
 		background-position: 0;
 		background-image: var(--accent-gradient);
 	}
-	.link-card:is(:hover, :focus-within) h2 {
+	.brand-card:is(:hover, :focus-within) h2 {
 		color: rgb(var(--accent-light));
 	}
 </style>
diff --git a/src/components/CategoryCard.astro b/src/components/CategoryCard.astro
index 5744e6d..1182586 100644
--- a/src/components/CategoryCard.astro
+++ b/src/components/CategoryCard.astro
@@ -8,7 +8,7 @@ interface Props {
 const { category } = Astro.props;
 ---
 
-<li class="link-card">
+<li class="category-card">
 	<a href={`/category/${category.slug}`}>
 		{category.imageUrl !== undefined && <img src={category.imageUrl} alt={category.category} />}
 		<h2>
@@ -21,7 +21,7 @@ const { category } = Astro.props;
 	</a>
 </li>
 <style>
-	.link-card {
+	.category-card {
 		list-style: none;
 		display: flex;
 		padding: 1px;
@@ -33,7 +33,7 @@ const { category } = Astro.props;
 		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
 		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
 	}
-	.link-card > a {
+	.category-card > a {
 		width: 100%;
 		text-decoration: none;
 		line-height: 1.4;
@@ -43,23 +43,23 @@ const { category } = Astro.props;
 		background-color: #23262d;
 		opacity: 0.8;
 	}
-	.link-card img {
+	.category-card img {
 		max-width: 100%;
 	}
-	h2 {
+	.category-card h2 {
 		margin: 0;
 		font-size: 1.25rem;
 		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
 	}
-	p {
+	.category-card p {
 		margin-top: 0.5rem;
 		margin-bottom: 0;
 	}
-	.link-card:is(:hover, :focus-within) {
+	.category-card:is(:hover, :focus-within) {
 		background-position: 0;
 		background-image: var(--accent-gradient);
 	}
-	.link-card:is(:hover, :focus-within) h2 {
+	.category-card:is(:hover, :focus-within) h2 {
 		color: rgb(var(--accent-light));
 	}
 </style>
diff --git a/src/components/ProductCard.astro b/src/components/ProductCard.astro
index 2bdd3e6..352d146 100644
--- a/src/components/ProductCard.astro
+++ b/src/components/ProductCard.astro
@@ -9,7 +9,7 @@ interface Props {
 const { product } = Astro.props;
 ---
 
-<div class="link-card">
+<div class="product-card">
 	<a href={`/${product?.slug}`}>
 		<h4 class="card-header">
 			{product?.name}
@@ -25,7 +25,7 @@ const { product } = Astro.props;
 </div>
 
 <style>
-	.link-card {
+	.product-card {
 		list-style: none;
 		display: flex;
 		padding: 1px;
@@ -37,7 +37,7 @@ const { product } = Astro.props;
 		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
 		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
 	}
-	.link-card > a {
+	.product-card > a {
 		width: 100%;
 		text-decoration: none;
 		line-height: 1.4;
@@ -47,28 +47,23 @@ const { product } = Astro.props;
 		background-color: #23262d;
 		opacity: 0.8;
 	}
-	h2 {
+	.product-card a img {
+		max-width: 100%;
+	}
+	.product-card h2 {
 		margin: 0;
 		font-size: 1.25rem;
 		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
 	}
-	p {
+	.product-card p {
 		margin-top: 0.5rem;
 		margin-bottom: 0;
 	}
-	.link-card:is(:hover, :focus-within) {
+	.product-card:is(:hover, :focus-within) {
 		background-position: 0;
 		background-image: var(--accent-gradient);
 	}
-	.link-card:is(:hover, :focus-within) h2 {
+	.product-card:is(:hover, :focus-within) h2 {
 		color: rgb(var(--accent-light));
 	}
-
-	.card a {
-		color: black;
-		text-decoration: none;
-	}
-	.card a img {
-		max-width: 100%;
-	}
 </style>