diff --git a/astro.config.mjs b/astro.config.mjs index 35ef428..96573d2 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -11,9 +11,12 @@ export default defineConfig({ }, }), ], + server: { + allowedHosts: true, + }, adapter: node({ mode: "standalone", checkOrigin: false }), output: "server", security: { checkOrigin: false } -}); \ No newline at end of file +}); diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index 56ae574..ddab7e6 100644 --- a/src/assets/css/main.scss +++ b/src/assets/css/main.scss @@ -35,6 +35,31 @@ html { scroll-behavior: smooth; } +/* -------------------------------------------------- + View Transitions +-------------------------------------------------- */ +@view-transition { + navigation: auto; +} + +::view-transition-group(card-image) { + animation-duration: 300ms; + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +::view-transition-old(card-image), +::view-transition-new(card-image) { + width: 100%; + height: 100%; + object-fit: cover; +} + +/* Optional: fade everything else */ +::view-transition-old(root), +::view-transition-new(root) { + animation-duration: 150ms; +} + /* -------------------------------------------------- Layout -------------------------------------------------- */ @@ -159,6 +184,33 @@ html { } } +.modal-nav-btn { + position: fixed; + top: 50%; + transform: translateY(-50%); + z-index: 1060; /* above modal backdrop (1050) */ + background: rgba(255,255,255,0.1); + border: 1px solid rgba(255,255,255,0.2); + color: white; + border-radius: 50%; + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: background 0.2s; + backdrop-filter: blur(4px); +} +.modal-nav-btn:hover { background: rgba(255,255,255,0.25); } +.modal-nav-btn.d-none { display: none !important; } +.modal-nav-prev { left: 12px; } +.modal-nav-next { right: 12px; } + +@media (max-width: 768px) { + .modal-nav-btn { display: none !important; } /* use swipe on mobile */ +} + /* -------------------------------------------------- Navigation Tabs & Tier Colors -------------------------------------------------- */ @@ -218,7 +270,7 @@ $tiers: ( } /* price-row alert left borders */ - .nav-#{$name} div.alert-secondary { + .nav-#{$name} div.alert { border-left: 3px solid $color; } } @@ -521,15 +573,75 @@ $tiers: ( /* -------------------------------------------------- Swipe Animation -------------------------------------------------- */ -@keyframes swipe-feedback { - 0% { transform: scale(1); } - 50% { transform: scale(0.95); } - 100% { transform: scale(1); } + +/* Smooth the hero image morph */ +::view-transition-group(card-hero) { + animation-duration: 350ms; + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Fade the old image out quickly so it doesn't ghost */ +::view-transition-old(card-hero) { + display: none; +} + +/* Fade the new image in after it's in position */ +::view-transition-new(card-hero) { + animation-duration: 350ms; + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +/* Suppress the default full-page crossfade so only the card morphs */ +::view-transition-old(root), +::view-transition-new(root) { + animation: none; +} + +/* Sliding out (old content) */ +::view-transition-old(.modal-content) { + animation: slide-out 200ms ease-in forwards; +} + +/* Sliding in (new content) */ +::view-transition-new(.modal-content) { + animation: slide-in 200ms ease-out forwards; +} + +/* Direction-aware — set via dataset.navDirection */ +#cardModal[data-nav-direction="next"]::view-transition-old(.modal-content) { + animation: slide-out-left 200ms ease-in forwards; +} +#cardModal[data-nav-direction="next"]::view-transition-new(.modal-content) { + animation: slide-in-right 200ms ease-out forwards; +} +#cardModal[data-nav-direction="prev"]::view-transition-old(.modal-content) { + animation: slide-out-right 200ms ease-in forwards; +} +#cardModal[data-nav-direction="prev"]::view-transition-new(.modal-content) { + animation: slide-in-left 200ms ease-out forwards; +} + +/* The silhouette fades out while the colour image blooms in */ + +::view-transition-old(pokemon-reveal) { + animation: 300ms ease-in both fade-to-white; +} +::view-transition-new(pokemon-reveal) { + animation: 500ms ease-out both bloom-in; +} + +@keyframes fade-to-white { + to { opacity: 0; filter: brightness(3); } +} + +@keyframes bloom-in { + from { opacity: 0; filter: brightness(2) saturate(0); transform: scale(0.95); } + to { opacity: 1; filter: brightness(1) saturate(1); transform: scale(1); } } /* -------------------------------------------------- Input Fix (Safari) --------------------------------------------------- */ + input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; height: 1rem; @@ -538,4 +650,5 @@ input[type="search"]::-webkit-search-cancel-button { background-repeat: no-repeat; background-size: 1rem; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC); -} \ No newline at end of file +} +-------------------------------------------------- */ \ No newline at end of file diff --git a/src/components/BackToTop.astro b/src/components/BackToTop.astro index 8a65c81..934dfd2 100644 --- a/src/components/BackToTop.astro +++ b/src/components/BackToTop.astro @@ -1,35 +1,43 @@ --- --- - - \ No newline at end of file diff --git a/src/components/CardGrid.astro b/src/components/CardGrid.astro index 03da1ed..0cf8a7c 100644 --- a/src/components/CardGrid.astro +++ b/src/components/CardGrid.astro @@ -2,7 +2,7 @@ import BackToTop from "./BackToTop.astro" ---
-
+
Inventory management placeholder
@@ -15,16 +15,256 @@ import BackToTop from "./BackToTop.astro"
-
-
-
-
-
-