Optimised first pages on mobile

[mllocs]

Use a smaller background images on mobile devices and optimised the current one.

• On desktop we went from 1,9MB to 1MB
• On mobile from 1,9MB to 333KB

Other minor details to improve the look of the "first pages" (Home and Login).

[mllocs]

Precarrega, loading... #spike

[markets]

good job @mllocs! 👍 do you think this branch overlaps with #385 (a fix for the classic #278)? I think so, maybe we can try to coordinate with @Matt-Yorkley in order to port/integrate his changes (if needed) here? What do you think guys?

[mllocs]

Hey @markets, yes, it totally overlaps with #385, good catch.

Here I'm also fixing other issues, sorry for mixing it up..., here I'm getting rid of .vertical-align because it was only used in two places, and they didn't have much in common. @Matt-Yorkley can you take a look? 😄

[markets]

🔚 ;

[markets]

@mllocs minor comment added, but 👍

[Matt-Yorkley]

@mllocs Ok, so my other PR for the login modal might not be needed then. I notice you've used top: 20% for the desktop view, and top: 60px for the small/mobile view. Is it worth putting it at a fixed position on both, so that it's position is always the same relative to the navigation bar? Like just having top: 60px for both screen sizes?

[enricostano]

Deployed on staging, not sure about performance improvement but I found the following zoomed background image on mobile:

Is that normal @mllocs ?

EDIT: in develop is different, much less zoomed in.

EDIT2: actually I see a small performance boost

[mllocs]

@enricostano good catch, fixed ;)

@Matt-Yorkley on your suggestion, I tried to use the same percentage in the top attribute for both big screens and mobile but it didn't look well, on big screens there was too much empty space :)

[enricostano]

Tested on staging 🍏