tmiller/pokemon
1
0
Fork 1
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

removed uneeded bg file and cleaned up card layout for breakpoints sm, md, lg, xl

Browse Source
This commit is contained in:
zach
2026-02-19 07:55:18 -05:00
parent 4cd670c9b8
commit 2ef9d3761d
6 changed files with 121 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/assets/css/main.scss
View File

@@ -1,61 +1,130 @@
@import '_bootstrap';
@import "_bootstrap";
// ----------------------
// Container
// ----------------------
.container {
max-width: 100vw;
@media (min-width: 768px) {
max-width: 95vw;
}
}
// ----------------------
// Typography
// ----------------------
.copy-small {
font-size: 0.75rem;
opacity: .87;
opacity: 0.87;
@media (min-width: 768px) {
font-size: 0.85rem;
}
@media screen and (min-width: 768px) {
.copy-small {
font-size: 0.9rem;
@media (min-width: 1400px) {
font-size: 1rem;
}
}
// ----------------------
// Card
// ----------------------
.card-image {
aspect-ratio: 23/32;
object-fit: cover;
}
.sticky {
background-color: hsl(195, 4%, 22%);
position: sticky;
z-index: 1000;
top: 0;
}
.rotate-90 {
transform: rotate(90deg);
z-index: 998;
}
.rarity-icon svg {
height: .8rem;
display: block;
width: 100%;
max-height: 16px;
margin-top: -0.25rem;
}
.price-label {
color: hsl(122, 39%, 49%);
font-size: 0.65rem;
// ----------------------
// Pricing
// ----------------------
.price-row {
position: relative;
z-index: 999;
margin-top: -1.25rem;
border-radius: 0.33rem;
background: linear-gradient(
90deg,
rgba(156, 204, 102, 1) 21%,
rgba(211, 225, 86, 1) 42%,
rgba(255, 238, 87, 1) 63%,
rgba(255, 201, 41, 1) 74%,
rgba(255, 167, 36, 1) 85%
);
}
@media screen and (min-width: 768px) {
// Base label style
.price-label {
font-size: 0.825rem;
font-size: 0.75rem;
font-weight: 600;
color: rgba(0, 0, 0, 0.87);
background-color: hsl(88, 50%, 60%);
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px;
border-top-left-radius: 0.33rem;
border-bottom-left-radius: 0.33rem;
@media (min-width: 768px) {
font-size: 0.8rem;
}
@media (min-width: 996px) {
font-size: 0.85rem;
}
@media (min-width: 1200px) {
font-size: 0.9rem;
}
@media (min-width: 1600px) {
font-size: 1rem;
}
}
// Your palette tiers
.price-label:nth-of-type(n + 2) {
color: hsl(66, 70%, 54%);
background-color: hsl(66, 70%, 61%);
}
.price-label:nth-of-type(n + 3) {
color: hsl(54, 100%, 62%);
background-color: hsl(54, 100%, 67%);
}
.price-label:nth-of-type(n + 4) {
color: hsl(45, 100%, 51%);
background-color: hsl(45, 100%, 58%);
}
.price-label:last-of-type {
color: hsl(36, 100%, 50%);
background-color: hsl(36, 100%, 57%);
border-radius: 0.33rem;
}
// ----------------------
// Search Elements
// ----------------------
@media (max-width: 768px) {
.search-box,
.search-button {
min-height: 48px;
}
}
// ----------------------
// Sticky Bar
// ----------------------
.sticky {
background-color: hsl(195, 4%, 22%);
position: fixed;
bottom: 0;
width: 100%;
z-index: 1000;
@media (min-width: 768px) {
position: sticky;
top: 0;
}
}

16
src/components/Card.astro
View File

@@ -40,13 +40,7 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
{pokemon.map((card) => (
<div class="col">
<img src={`/cards/${card.productId}.jpg`} alt={card.productName} loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
<div class="h6 my-0">{card.productName}</div>
<div class="d-flex justify-content-between align-items-end">
<div class="copy-small">{card.number}</div>
<RarityIcon rarity={card.rarityName} />
</div>
<div class="copy-small d-none d-lg-block">{card.set?.setName}</div>
<div class="row row-cols-5 gx-1">
<div class="row row-cols-5 gx-1 price-row mb-2">
{card.prices
.slice()
.sort((a, b) => order.indexOf(a.condition) - order.indexOf(b.condition))
@@ -54,11 +48,17 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
arr.findIndex(p => p.condition === price.condition) === index
)
.map((price) => (
<div class="col p price-label">
<div class="col price-label ps-xxl-2 ps-1">
{price.condition.split(' ').map((w) => w[0]).join('')}
<br />${formatPrice(price.marketPrice)}
</div>
))}
</div>
<div class="h5 my-0">{card.productName}</div>
<div class="d-flex flex-row lh-1">
<div class="copy-small d-none d-lg-flex flex-grow-1">{card.set?.setCode}</div>
<div class="copy-small">{card.number}</div>
<RarityIcon rarity={card.rarityName} />
</div>
</div>
))}

2
src/components/CardGrid.astro
View File

@@ -7,7 +7,7 @@
<div class="h5 d-none">Inventory management placeholder</div>
</div>
<div class="col-sm-12 col-md-9 mt-0">
<div class="row g-3 row-cols-2 row-cols-lg-3 row-cols-xl-4 d-flex">
<div class="row g-xxl-4 g-xl-3 g-2 row-cols-2 row-cols-lg-3 row-cols-xl-4">
<slot name="Card">
</div>
</div>

2
src/components/RarityIcon.astro
View File

@@ -44,4 +44,4 @@ const rarityMap = {
const svg = rarityMap[rarity as keyof typeof rarityMap] ?? "";
---
<div class="rarity-icon" set:html={svg}></div>
<div class="rarity-icon ps-2" set:html={svg}></div>

4
src/components/StickyFilter.astro
View File

@@ -8,10 +8,10 @@ const { query } = Astro.props;
<form method="GET">
<div class="d-flex justify-content-between">
<div class="my-2 flex-grow-1 me-2">
<input type="text" name="q" class="form-control w-100" placeholder="Search cards..." value={query} />
<input type="text" name="q" class="form-control w-100 search-box" placeholder="Search cards..." value={query} />
</div>
<div class="my-2">
<input type="submit" class="btn btn-primary w-100" value="Search" />
<input type="submit" class="btn btn-primary w-100 search-button" value="Search" />
</div>
</div>
</form>

1
src/svg/bg.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 938 KiB