Build with modern CSS, Astro SSG and Mapbox custom designed map

Hi all,

this challenge was a fun one and i'm gonna try and explain my process.

I've used Astro on this project for building .html files. I know this is kinda overkill for this challenge but i'm lazy with syncing individual .html files especially repeating sections like footer etc...

Next i decided to create a custom map on Location page with Mapbox as i have some experience with it. It can be improved for sure but for this example i think it looks ok. I also added custom Pin from design and added Popup functionality as well.

For layout i've mostly used CSS grid with some Flexbox along the way where needed.

Images are marked with Picture element with multiple Source's for responsiveness. I've also added @2x versions where needed.

Lastly i've played with :hover state on buttons with @media(hover) to only target supported devices.

Let me know what you think!

Cheers, Miran