diff --git a/public/404/glow.png b/public/404/glow.png new file mode 100644 index 0000000..8a0269d Binary files /dev/null and b/public/404/glow.png differ diff --git a/public/404/lines.gif b/public/404/lines.gif new file mode 100644 index 0000000..81455dc Binary files /dev/null and b/public/404/lines.gif differ diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index d31c950..5f9dd06 100644 --- a/src/assets/css/main.scss +++ b/src/assets/css/main.scss @@ -9,6 +9,44 @@ @media (min-width: 768px) { max-width: 95vw; } + display: grid; + place-items: center; + //background: #d3d9b3; +} + +.circle { + position: relative; + width: calc(var(--radius) * 2); + height: calc(var(--radius) * 2); + margin: 50px auto; +} + +:root { + --total: 11; /* How many items */ + --radius: 80px; /* Circle size */ +} + +.circle-item { + position: absolute; + top: 50%; + left: 50%; + width: 50px; + height: 50px; + margin: -30px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + display: grid; + place-items: center; + + /* This is where the magic happens */ + --angle: calc(360deg / var(--total) * var(--i)); + box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; + transform: + rotate(var(--angle)) /* Rotate to position */ + translateX(var(--radius)) /* Move away from center */ + rotate(calc(-1 * var(--angle))); /* Rotate back */ } // ---------------------- @@ -45,11 +83,6 @@ cursor: default; } -canvas { - max-width: 100%; - height: 300px; -} - // ---------------------- // Navigation Tabs // ---------------------- @@ -117,6 +150,10 @@ $tiers: ( } } +.price-area { + max-height: 75px; +} + .card-image { aspect-ratio: 23 / 32; object-fit: cover; @@ -131,6 +168,27 @@ $tiers: ( margin-top: -0.25rem; } +.masked-image { + z-index: 1000; + opacity: 100%; + mix-blend-mode: normal; +} + +.starburst { + opacity: 10%; + mix-blend-mode: lighten; + object-fit: cover; + background-size: cover; +} + +.whos-that-pokemon { + width: 100%; + z-index: 998; + opacity: 10%; + mix-blend-mode: lighten; + aspect-ratio: 1/1; +} + .energy-icon svg, .rarity-icon-large svg, .set-icon svg { diff --git a/src/components/SetIcon.astro b/src/components/SetIcon.astro index ad47a69..1aaaeef 100644 --- a/src/components/SetIcon.astro +++ b/src/components/SetIcon.astro @@ -41,33 +41,31 @@ import evolvingskies from "/src/svg/set/evolving_skies.svg?raw"; const { set } = Astro.props; const setMap = { - "ME: Ascended Heroes": ascended_heroes, - "Ancient Origins": ancient_origins, - "Aquapolis": aquapolis, - "Arceus": arceus, - "Astral Radiance": astral_radiance, - "Base Set 2": base_set_2, - "Battle Styles": battle_styles, - "Best of Game": best_of_game, - "Black and White": black_and_white, - "Boundaries Crossed": boundaries_crossed, - "Box Topper": box_topper, - "Breakpoint": breakpoint, - "Breakthrough": breakthrough, - "Brilliant Stars": brilliant_stars, - "Burning Shadows": burning_shadows, - "Call of Legends": call_of_legends, - "Celebrations": celebrations, - "Champions Path": champions_path, - "Celestial Storm": celestial_storm, - "Crimson Invasion": crimson_invasion, - "Darkness Ablaze": darkness_ablaze, - "Chilling Reign": chilling_reign, - "Cosmic Eclipse": cosmic_eclipse, - "Dark Explorers": dark_explorers, - "Detective Pikachu": detective_pikachu, - "Diamond and Pearl": diamond_and_pearl, - "Double Crisis": double_crisis, + "ASC": ascended_heroes, + "AOR": ancient_origins, + "AQ": aquapolis, + "AR": arceus, + "ASR": astral_radiance, + "BS2": base_set_2, + "BST": battle_styles, + "BLW": black_and_white, + "BCR": boundaries_crossed, + "BKP": breakpoint, + "BKT": breakthrough, + "BRS": brilliant_stars, + "BUS": burning_shadows, + "CL": call_of_legends, + "CEL": celebrations, + "CPA": champions_path, + "CES": celestial_storm, + "CIN": crimson_invasion, + "DAA": darkness_ablaze, + "CRE": chilling_reign, + "CEC": cosmic_eclipse, + "DEX": dark_explorers, + "DET": detective_pikachu, + "DP": diamond_and_pearl, + "DCR": double_crisis, "Dragon Majesty": dragon_majesty, "Neo Genesis": neo_genesis, "Jungle": jungle, diff --git a/src/pages/404.astro b/src/pages/404.astro index 81e5ac1..8225154 100644 --- a/src/pages/404.astro +++ b/src/pages/404.astro @@ -2,7 +2,10 @@ import Layout from '../layouts/Main.astro'; import StickyFilter from '../components/StickyFilter.astro'; -const randomNumber = Math.floor(Math.random() * 1000) + 1; +const searchParams = Astro.url.searchParams; +const query = searchParams.get('q') || '*'; + +const randomNumber = Math.floor(Math.random() * 1025) + 1; --- @@ -14,23 +17,26 @@ const randomNumber = Math.floor(Math.random() * 1000) + 1;
-
+

404 - Page Not Found

Sorry, the page you are looking for does not exist.

Return to the home page or search for another Pokémon.

-
- - - -
diff --git a/src/pages/index.astro b/src/pages/index.astro index c04f360..b9e1264 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,11 +1,26 @@ --- import Welcome from '../components/Welcome.astro'; import Layout from '../layouts/Layout.astro'; +import Image from 'astro/components/Image.astro'; +import '/src/assets/css/main.scss'; // Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build // Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh. --- +
+ Grass Energy + Fire Energy + Water Energy + Electric Energy + Psychic Energy + Fighting Energy + Dark Energy + Steel Energy + Colorless Energy + Fairy Energy + Dragon Energy +
diff --git a/src/pages/partials/card-modal.astro b/src/pages/partials/card-modal.astro index 8787511..3d6aa2b 100644 --- a/src/pages/partials/card-modal.astro +++ b/src/pages/partials/card-modal.astro @@ -74,7 +74,7 @@ function timeAgo(date: any) {

{card?.set?.setName}

-
{card?.productName}
+
{card?.productName}
{card?.Artist}
@@ -94,19 +94,19 @@ function timeAgo(date: any) {