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

16
src/components/CategoryCard.astro
View File

@ -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>

25
src/components/ProductCard.astro
View File

@ -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>