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

Improvements to layout and design.

Browse Source
This commit is contained in:
David Ball 2024-07-14 23:27:31 -04:00
parent 5f6691e059
commit 7bfcb2b13d
5 changed files with 28 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/pages/[productLookup].astro
View File

@ -48,7 +48,7 @@ const brand: Brand = ALL_BRANDS.find(b => b.slug === product.brandStoreSlug)!;
{product?.name}
</h2>
<div class="row">
<div class="col-md-12 col-lg-4">
<div class="col-sm-12 col-md-6 col-lg-4">
{product?.amazonProductDetails?.imageUrls !== undefined &&
product?.amazonProductDetails?.imageUrls.length == 1 &&
<img src={product?.amazonProductDetails?.imageUrls[0]} alt={product?.amazonProductDetails?.title} style="max-width: 100%;" />
@ -58,14 +58,14 @@ const brand: Brand = ALL_BRANDS.find(b => b.slug === product.brandStoreSlug)!;
<ImageCarousel images={product?.amazonProductDetails?.imageUrls.map((productUrl: string) => { return { src: productUrl }; } )||[]} />
}
</div>
<div class="col-8">
<div class="col-sm-12 col-md-6 col-lg-8">
<h5 class="card-title">
<a href={product?.amazonLink}>{product?.amazonProductDetails?.title}</a>
</h5>
<p>
<StarRating value={product?.amazonProductDetails?.reviewRating||0} max={5} overlayColor="#13151a" /> {product?.amazonProductDetails?.reviewCount} Reviews
{ product?.brandStoreSlug &&
<span>&#x2022;</span> <span class="item-metadata">Brand/<a href={`/brand/${brand?.slug}`}>{brand?.name}</a></span>
<span>&#x2022;</span> <span class="item-metadata-key">Brand</span> <span class="item-metadata-value"><a href={`/brand/${brand?.slug}`}>{brand?.name}</a></span>
}
</p>
{ product?.description &&
@ -100,21 +100,20 @@ const brand: Brand = ALL_BRANDS.find(b => b.slug === product.brandStoreSlug)!;
min-width: 800px;
max-width: calc(100% - 2rem);
color: white;
font-size: 20px;
font-size: 16pt;
line-height: 1.6;
}
.center {
text-align: center;
}
h1 {
font-size: 4rem;
font-weight: 700;
font-size: 2rem;
line-height: 1;
margin-bottom: 1em;
font-family: "Holtwood One SC", sans-serif;
font-weight: 600;
font-style: bold;
/* text-shadow: -5px -5px 0 rgba(var(--accent-dark), 17%), 3px -3px 0 rgba(var(--accent-light), 10%), -2px 2px 0 rgba(var(--accent-light), 5%), 5px 5px 0 rgba(var(--accent-light), 10%); */
text-shadow: -3px -3px 3px rgba(var(--accent-light), 7%), 1px -1px 0 rgba(var(--accent-light), 10%), -2px 2px 0 rgba(var(--accent-light), 5%), 3px 3px 0 rgba(var(--accent-light), 10%);
}
.text-gradient {
background-image: var(--accent-gradient);
@ -166,11 +165,15 @@ const brand: Brand = ALL_BRANDS.find(b => b.slug === product.brandStoreSlug)!;
}
a, a:link, a:visited { text-decoration: none; color: #fff }
a:hover, a:active { text-decoration: underline; color: #fff }
.item-metadata {
.item-metadata-key {
text-transform: uppercase;
color: #ccc;
font-weight: 600;
font-size: 12pt;
font-size: 11pt;
}
.item-metadata-value {
color: #fff;
font-weight: 600;
}
.custom-btn-container {
background-color: #23262d;

6
src/pages/about.astro
View File

@ -125,21 +125,21 @@ import { ALL_CATEGORIES } from '../data/categories';
min-width: 800px;
max-width: calc(100% - 2rem);
color: white;
font-size: 20px;
font-size: 16pt;
line-height: 1.6;
}
.center {
text-align: center;
}
h1 {
font-size: 4rem;
font-size: 3rem;
font-weight: 700;
line-height: 1;
margin-bottom: 1em;
font-family: "Holtwood One SC", sans-serif;
font-weight: 600;
font-style: bold;
/* text-shadow: -5px -5px 0 rgba(var(--accent-dark), 17%), 3px -3px 0 rgba(var(--accent-light), 10%), -2px 2px 0 rgba(var(--accent-light), 5%), 5px 5px 0 rgba(var(--accent-light), 10%); */
text-shadow: -5px -5px 3px rgba(var(--accent-light), 7%), 3px -3px 0 rgba(var(--accent-light), 10%), -2px 2px 0 rgba(var(--accent-light), 5%), 5px 5px 0 rgba(var(--accent-light), 10%);
}
.text-gradient {
background-image: var(--accent-gradient);

8
src/pages/brand/[brandLookup].astro
View File

@ -67,21 +67,21 @@ const isAnyAmazon = brandProducts.find(p => p.amazonLink) || false;
min-width: 800px;
max-width: calc(100% - 2rem);
color: white;
font-size: 20px;
font-size: 16pt;
line-height: 1.6;
}
.center {
text-align: center;
}
h1 {
font-size: 4rem;
font-size: 3rem;
font-weight: 700;
line-height: 1;
margin-bottom: 1em;
font-family: "Holtwood One SC", sans-serif;
font-weight: 600;
font-style: bold;
/* text-shadow: -5px -5px 0 rgba(var(--accent-dark), 17%), 3px -3px 0 rgba(var(--accent-light), 10%), -2px 2px 0 rgba(var(--accent-light), 5%), 5px 5px 0 rgba(var(--accent-light), 10%); */
text-shadow: -5px -5px 3px rgba(var(--accent-light), 7%), 3px -3px 0 rgba(var(--accent-light), 10%), -2px 2px 0 rgba(var(--accent-light), 5%), 5px 5px 0 rgba(var(--accent-light), 10%);
}
.text-gradient {
background-image: var(--accent-gradient);
@ -151,7 +151,7 @@ const isAnyAmazon = brandProducts.find(p => p.amazonLink) || false;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(48ch, 1fr));
/* grid-template-columns: repeat(3, 1fr); */
gap: 2rem;
gap: 2em;
padding: 0;
}
a, a:link, a:visited { text-decoration: none; color: #fff }

6
src/pages/category/[categoryLookup].astro
View File

@ -57,14 +57,14 @@ const isAnyAmazon = categoryProducts.find(p => p.amazonLink) || false;
text-align: center;
}
h1 {
font-size: 4rem;
font-size: 3rem;
font-weight: 700;
line-height: 1;
margin-bottom: 1em;
font-family: "Holtwood One SC", sans-serif;
font-weight: 600;
font-style: bold;
/* text-shadow: -5px -5px 0 rgba(var(--accent-dark), 17%), 3px -3px 0 rgba(var(--accent-light), 10%), -2px 2px 0 rgba(var(--accent-light), 5%), 5px 5px 0 rgba(var(--accent-light), 10%); */
text-shadow: -5px -5px 3px rgba(var(--accent-light), 7%), 3px -3px 0 rgba(var(--accent-light), 10%), -2px 2px 0 rgba(var(--accent-light), 5%), 5px 5px 0 rgba(var(--accent-light), 10%);
}
.text-gradient {
background-image: var(--accent-gradient);
@ -110,7 +110,7 @@ const isAnyAmazon = categoryProducts.find(p => p.amazonLink) || false;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(48ch, 1fr));
/* grid-template-columns: repeat(3, 1fr); */
gap: 2rem;
gap: 2em;
padding: 0;
}
a, a:link, a:visited { text-decoration: none; color: #fff }

10
src/pages/index.astro
View File

@ -40,7 +40,7 @@ import { getProductsForCategoryId } from '../data/products';
min-width: 800px;
max-width: calc(100% - 2rem);
color: white;
font-size: 20px;
font-size: 16pt;
line-height: 1.6;
}
.center {
@ -54,7 +54,7 @@ import { getProductsForCategoryId } from '../data/products';
font-family: "Holtwood One SC", sans-serif;
font-weight: 600;
font-style: bold;
/* text-shadow: -5px -5px 0 rgba(var(--accent-dark), 17%), 3px -3px 0 rgba(var(--accent-light), 10%), -2px 2px 0 rgba(var(--accent-light), 5%), 5px 5px 0 rgba(var(--accent-light), 10%); */
text-shadow: -5px -5px 3px rgba(var(--accent-light), 7%), 3px -3px 0 rgba(var(--accent-light), 10%), -2px 2px 0 rgba(var(--accent-light), 5%), 5px 5px 0 rgba(var(--accent-light), 10%);
}
.text-gradient {
background-image: var(--accent-gradient);
@ -88,12 +88,14 @@ import { getProductsForCategoryId } from '../data/products';
}
.link-card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(48ch, 1fr));
gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(15rem, 3fr));
gap: 1em;
padding: 0;
}
.link-card-grid.brands {
display: flex;
gap: 0.5em;
padding: 0;
place-items: center;
}
a, a:link, a:visited { text-decoration: none; color: #fff }