diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index 7ee5e11..6c30d1a 100644 --- a/src/assets/css/main.scss +++ b/src/assets/css/main.scss @@ -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; -} - -@media screen and (min-width: 768px) { - .copy-small { - font-size: 0.9rem; - } + font-size: 0.75rem; + opacity: 0.87; + + @media (min-width: 768px) { + font-size: 0.85rem; + } + + @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); + aspect-ratio: 23/32; + object-fit: cover; + z-index: 998; } .rarity-icon svg { - height: .8rem; - display: block; + width: 100%; + max-height: 16px; + margin-top: -0.25rem; } +// ---------------------- +// 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% + ); +} + +// Base label style .price-label { - color: hsl(122, 39%, 49%); - font-size: 0.65rem; + 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; + } } -@media screen and (min-width: 768px) { - .price-label { - font-size: 0.825rem; - font-weight: 600; - } +// Your palette tiers +.price-label:nth-of-type(n + 2) { + background-color: hsl(66, 70%, 61%); } -.price-label:nth-of-type(n+2) { - color: hsl(66, 70%, 54%); +.price-label:nth-of-type(n + 3) { + background-color: hsl(54, 100%, 67%); } -.price-label:nth-of-type(n+3) { - color: hsl(54, 100%, 62%); -} - -.price-label:nth-of-type(n+4) { - color: hsl(45, 100%, 51%); +.price-label:nth-of-type(n + 4) { + 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; + } } \ No newline at end of file diff --git a/src/components/Card.astro b/src/components/Card.astro index be980e7..8b9f78e 100644 --- a/src/components/Card.astro +++ b/src/components/Card.astro @@ -40,13 +40,7 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play {pokemon.map((card) => (
{card.productName} -
{card.productName}
-
-
{card.number}
- -
-
{card.set?.setName}
-
+
{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) => ( -
+
{price.condition.split(' ').map((w) => w[0]).join('')}
${formatPrice(price.marketPrice)}
))}
+
{card.productName}
+
+
{card.set?.setCode}
+
{card.number}
+ +
))} \ No newline at end of file diff --git a/src/components/CardGrid.astro b/src/components/CardGrid.astro index 4ab0338..0acd242 100644 --- a/src/components/CardGrid.astro +++ b/src/components/CardGrid.astro @@ -7,7 +7,7 @@
Inventory management placeholder
-
+
diff --git a/src/components/RarityIcon.astro b/src/components/RarityIcon.astro index cf540ed..82f0b06 100644 --- a/src/components/RarityIcon.astro +++ b/src/components/RarityIcon.astro @@ -44,4 +44,4 @@ const rarityMap = { const svg = rarityMap[rarity as keyof typeof rarityMap] ?? ""; --- -
+
diff --git a/src/components/StickyFilter.astro b/src/components/StickyFilter.astro index 6323c39..296c996 100644 --- a/src/components/StickyFilter.astro +++ b/src/components/StickyFilter.astro @@ -8,10 +8,10 @@ const { query } = Astro.props;
- +
- +
diff --git a/src/svg/bg.svg b/src/svg/bg.svg deleted file mode 100644 index 7e120e5..0000000 --- a/src/svg/bg.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file