diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index a97e736..1d02bc3 100644 --- a/src/assets/css/main.scss +++ b/src/assets/css/main.scss @@ -37,13 +37,10 @@ .modal-xl { @media (min-width: 768px) { - max-width: 90vw; - } - @media (min-width: 1200px) { - max-width: 85vw; + max-width: 95vw; } @media (min-width: 1400px) { - max-width: 75vw; + max-width: 90vw; } } @@ -124,6 +121,17 @@ background-color: rgba(255, 167, 36, 1); border-bottom: 3px solid rgba(255, 167, 36, 1); } +.nav-link.vendor, .nav-link.vendor:hover, .nav-link.vendor:focus { + border-bottom: 3px solid hsl(262, 47%, 55%); +} +.nav-link.vendor:hover, .nav-link.vendor:focus { + background-color: hsla(262, 47%, 55%, .67); +} +.nav-link.vendor.active { + color: rgba(255, 255, 255, 0.87); + background-color: hsl(262, 47%, 55%); + border-bottom: 3px solid hsl(262, 47%, 55%); +} .dark-callout { @media (min-width: 768px) { @@ -137,16 +145,34 @@ z-index: 998; } -.rarity-icon svg { +.small-icon svg { width: 100%; max-height: 16px; margin-top: -0.25rem; } .energy-icon svg { - width: 100%; - max-height: 16px; + width:2.5rem; margin-top: -0.25rem; + margin-right: -0.25rem; +} + +.rarity-icon-large svg { + width: 2.5rem; + margin-bottom: -0.25rem; + margin-right: -0.25rem; +} + +.set-icon svg { + width: 2.5rem; + margin-bottom: -0.25rem; + margin-left: -0.25rem; +} + +.shadow-filter { + //filter: drop-shadow(0 30px 30px #333); + filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3)) + drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2)); } // ---------------------- @@ -169,7 +195,7 @@ // Base label style .price-label { - font-size: 0.75rem; + font-size: 0.7rem; font-weight: 600; color: rgba(0, 0, 0, 0.87); background-color: hsl(88, 50%, 60%); diff --git a/src/components/Card.astro b/src/components/Card.astro index fea2a59..678c7d0 100644 --- a/src/components/Card.astro +++ b/src/components/Card.astro @@ -3,9 +3,8 @@ import { isConditionalExpression } from 'typescript'; import { client } from '../db/typesense.ts'; import { db } from '../db'; -import RarityIcon from './RarityIcon.astro'; -import EnergyIcon from './EnergyIcon.astro'; //import * as schema from '../db/schema.ts'; +import RarityIcon from './RarityIcon.astro'; const { query } = Astro.props; const searchResults = await client.collections('cards').documents().search({ @@ -39,7 +38,8 @@ const formatPrice = (price:any) => { const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"]; --- {pokemon.map((card) => ( -
+
+
{card.productName}
{card.prices @@ -59,7 +59,8 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
{card.set?.setCode}
{card.number}
- +
+
))} \ No newline at end of file diff --git a/src/components/CardGrid.astro b/src/components/CardGrid.astro index 0acd242..38fbaa2 100644 --- a/src/components/CardGrid.astro +++ b/src/components/CardGrid.astro @@ -7,7 +7,7 @@
Inventory management placeholder
-
+
diff --git a/src/components/CardModal.astro b/src/components/CardModal.astro index 6dca769..4109f9c 100644 --- a/src/components/CardModal.astro +++ b/src/components/CardModal.astro @@ -1,6 +1,9 @@ --- import Card from '../components/Card.astro'; import ebay from "/vendors/ebay.svg?raw"; +import EnergyIcon from './EnergyIcon.astro'; +import RarityIcon from './RarityIcon.astro'; +import SetIcon from './SetIcon.astro'; --- @@ -8,7 +11,9 @@ import ebay from "/vendors/ebay.svg?raw";