daball/dashersupply
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Set max-width on BrandCard, which flex positions inside its container, making the BrandCards smaller. Renamed CSS attributes for BrandCard, CategoryCard, and ProductCard.

Browse Source
This commit is contained in:
David Ball 2024-07-14 14:43:03 -04:00
parent 61d4daa5bc
commit 4e89b0186f
3 changed files with 27 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/BrandCard.astro
View File

@ -8,13 +8,13 @@ interface Props {
const { brand } = Astro.props; const { brand } = Astro.props;
--- ---
<li class="link-card"> <li class="brand-card">
<a href={`/brand/${brand.slug}`}> <a href={`/brand/${brand.slug}`}>
{brand.logoUrl !== undefined && <img src={brand.logoUrl} alt={brand.name} />} {brand.logoUrl !== undefined && <img src={brand.logoUrl} alt={brand.name} />}
</a> </a>
</li> </li>
<style> <style>
.link-card { .brand-card {
list-style: none; list-style: none;
display: flex; display: flex;
padding: 1px; padding: 1px;
@ -26,8 +26,9 @@ const { brand } = Astro.props;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1); 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); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
text-align: center; text-align: center;
max-width: 8em;
} }
.link-card > a { .brand-card > a {
width: 100%; width: 100%;
text-decoration: none; text-decoration: none;
line-height: 1.4; line-height: 1.4;
@ -37,23 +38,23 @@ const { brand } = Astro.props;
background-color: #23262d; background-color: #23262d;
opacity: 0.8; opacity: 0.8;
} }
.link-card img { .brand-card img {
max-width: 100%; max-width: 100%;
} }
h2 { .brand-card h2 {
margin: 0; margin: 0;
font-size: 1.25rem; font-size: 1.25rem;
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
} }
p { .brand-card p {
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 0; margin-bottom: 0;
} }
.link-card:is(:hover, :focus-within) { .brand-card:is(:hover, :focus-within) {
background-position: 0; background-position: 0;
background-image: var(--accent-gradient); background-image: var(--accent-gradient);
} }
.link-card:is(:hover, :focus-within) h2 { .brand-card:is(:hover, :focus-within) h2 {
color: rgb(var(--accent-light)); color: rgb(var(--accent-light));
} }
</style> </style>

16
src/components/CategoryCard.astro
View File

@ -8,7 +8,7 @@ interface Props {
const { category } = Astro.props; const { category } = Astro.props;
--- ---
<li class="link-card"> <li class="category-card">
<a href={`/category/${category.slug}`}> <a href={`/category/${category.slug}`}>
{category.imageUrl !== undefined && <img src={category.imageUrl} alt={category.category} />} {category.imageUrl !== undefined && <img src={category.imageUrl} alt={category.category} />}
<h2> <h2>
@ -21,7 +21,7 @@ const { category } = Astro.props;
</a> </a>
</li> </li>
<style> <style>
.link-card { .category-card {
list-style: none; list-style: none;
display: flex; display: flex;
padding: 1px; padding: 1px;
@ -33,7 +33,7 @@ const { category } = Astro.props;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1); 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); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
} }
.link-card > a { .category-card > a {
width: 100%; width: 100%;
text-decoration: none; text-decoration: none;
line-height: 1.4; line-height: 1.4;
@ -43,23 +43,23 @@ const { category } = Astro.props;
background-color: #23262d; background-color: #23262d;
opacity: 0.8; opacity: 0.8;
} }
.link-card img { .category-card img {
max-width: 100%; max-width: 100%;
} }
h2 { .category-card h2 {
margin: 0; margin: 0;
font-size: 1.25rem; font-size: 1.25rem;
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
} }
p { .category-card p {
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 0; margin-bottom: 0;
} }
.link-card:is(:hover, :focus-within) { .category-card:is(:hover, :focus-within) {
background-position: 0; background-position: 0;
background-image: var(--accent-gradient); background-image: var(--accent-gradient);
} }
.link-card:is(:hover, :focus-within) h2 { .category-card:is(:hover, :focus-within) h2 {
color: rgb(var(--accent-light)); color: rgb(var(--accent-light));
} }
</style> </style>

25
src/components/ProductCard.astro
View File

@ -9,7 +9,7 @@ interface Props {
const { product } = Astro.props; const { product } = Astro.props;
--- ---
<div class="link-card"> <div class="product-card">
<a href={`/${product?.slug}`}> <a href={`/${product?.slug}`}>
<h4 class="card-header"> <h4 class="card-header">
{product?.name} {product?.name}
@ -25,7 +25,7 @@ const { product } = Astro.props;
</div> </div>
<style> <style>
.link-card { .product-card {
list-style: none; list-style: none;
display: flex; display: flex;
padding: 1px; padding: 1px;
@ -37,7 +37,7 @@ const { product } = Astro.props;
transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1); 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); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
} }
.link-card > a { .product-card > a {
width: 100%; width: 100%;
text-decoration: none; text-decoration: none;
line-height: 1.4; line-height: 1.4;
@ -47,28 +47,23 @@ const { product } = Astro.props;
background-color: #23262d; background-color: #23262d;
opacity: 0.8; opacity: 0.8;
} }
h2 { .product-card a img {
max-width: 100%;
}
.product-card h2 {
margin: 0; margin: 0;
font-size: 1.25rem; font-size: 1.25rem;
transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
} }
p { .product-card p {
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 0; margin-bottom: 0;
} }
.link-card:is(:hover, :focus-within) { .product-card:is(:hover, :focus-within) {
background-position: 0; background-position: 0;
background-image: var(--accent-gradient); background-image: var(--accent-gradient);
} }
.link-card:is(:hover, :focus-within) h2 { .product-card:is(:hover, :focus-within) h2 {
color: rgb(var(--accent-light)); color: rgb(var(--accent-light));
} }
.card a {
color: black;
text-decoration: none;
}
.card a img {
max-width: 100%;
}
</style> </style>