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

6
src/pages/about.astro
View File

@ -125,21 +125,21 @@ import { ALL_CATEGORIES } from '../data/categories';
min-width: 800px; min-width: 800px;
max-width: calc(100% - 2rem); max-width: calc(100% - 2rem);
color: white; color: white;
font-size: 20px; font-size: 16pt;
line-height: 1.6; line-height: 1.6;
} }
.center { .center {
text-align: center; text-align: center;
} }
h1 { h1 {
font-size: 4rem; font-size: 3rem;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
margin-bottom: 1em; margin-bottom: 1em;
font-family: "Holtwood One SC", sans-serif; font-family: "Holtwood One SC", sans-serif;
font-weight: 600; font-weight: 600;
font-style: bold; 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 { .text-gradient {
background-image: var(--accent-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; min-width: 800px;
max-width: calc(100% - 2rem); max-width: calc(100% - 2rem);
color: white; color: white;
font-size: 20px; font-size: 16pt;
line-height: 1.6; line-height: 1.6;
} }
.center { .center {
text-align: center; text-align: center;
} }
h1 { h1 {
font-size: 4rem; font-size: 3rem;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
margin-bottom: 1em; margin-bottom: 1em;
font-family: "Holtwood One SC", sans-serif; font-family: "Holtwood One SC", sans-serif;
font-weight: 600; font-weight: 600;
font-style: bold; 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 { .text-gradient {
background-image: var(--accent-gradient); background-image: var(--accent-gradient);
@ -151,7 +151,7 @@ const isAnyAmazon = brandProducts.find(p => p.amazonLink) || false;
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(48ch, 1fr)); grid-template-columns: repeat(auto-fill, minmax(48ch, 1fr));
/* grid-template-columns: repeat(3, 1fr); */ /* grid-template-columns: repeat(3, 1fr); */
gap: 2rem; gap: 2em;
padding: 0; padding: 0;
} }
a, a:link, a:visited { text-decoration: none; color: #fff } 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; text-align: center;
} }
h1 { h1 {
font-size: 4rem; font-size: 3rem;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
margin-bottom: 1em; margin-bottom: 1em;
font-family: "Holtwood One SC", sans-serif; font-family: "Holtwood One SC", sans-serif;
font-weight: 600; font-weight: 600;
font-style: bold; 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 { .text-gradient {
background-image: var(--accent-gradient); background-image: var(--accent-gradient);
@ -110,7 +110,7 @@ const isAnyAmazon = categoryProducts.find(p => p.amazonLink) || false;
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(48ch, 1fr)); grid-template-columns: repeat(auto-fill, minmax(48ch, 1fr));
/* grid-template-columns: repeat(3, 1fr); */ /* grid-template-columns: repeat(3, 1fr); */
gap: 2rem; gap: 2em;
padding: 0; padding: 0;
} }
a, a:link, a:visited { text-decoration: none; color: #fff } 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; min-width: 800px;
max-width: calc(100% - 2rem); max-width: calc(100% - 2rem);
color: white; color: white;
font-size: 20px; font-size: 16pt;
line-height: 1.6; line-height: 1.6;
} }
.center { .center {
@ -54,7 +54,7 @@ import { getProductsForCategoryId } from '../data/products';
font-family: "Holtwood One SC", sans-serif; font-family: "Holtwood One SC", sans-serif;
font-weight: 600; font-weight: 600;
font-style: bold; 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 { .text-gradient {
background-image: var(--accent-gradient); background-image: var(--accent-gradient);
@ -88,12 +88,14 @@ import { getProductsForCategoryId } from '../data/products';
} }
.link-card-grid { .link-card-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(48ch, 1fr)); grid-template-columns: repeat(auto-fit, minmax(15rem, 3fr));
gap: 2rem; gap: 1em;
padding: 0; padding: 0;
} }
.link-card-grid.brands { .link-card-grid.brands {
display: flex; display: flex;
gap: 0.5em;
padding: 0;
place-items: center; place-items: center;
} }
a, a:link, a:visited { text-decoration: none; color: #fff } a, a:link, a:visited { text-decoration: none; color: #fff }