Update styling for Home page

RajVarsani commented 2 years ago

resolves #75

secondl1ght commented 2 years ago

@bumi do you want me to review this?

bumi commented 2 years ago

@secondl1ght no need to ask. Any PR in any repo everywhere can and should be reviewed. If you have input, then comment on it.

RajVarsani commented 2 years ago

As mentioned by @Tiana01, I've tested aligning content and banner with logo and buttons, respectively. Problems I've encountered :

Shadow in banner image causes negative space at the right and bottom side of the image.
- A pretty straightforward solution to this would be to cast shadows manually with CSS. ( In the screenshot below, For just testing purposes, I've handled it with transform ).
Seems working, but with this layout in smaller screens (e.g., 14 / 12 Inches ), a shadow at the end was creating a bit dark at the right end of the viewport; not sure if you can get a clear idea from ss below. You may try it at your locale and see it.

Please update if someone has some solution or suggestion to this.

So, I've only pushed the banner change from png to SVG for now. The quality difference of using is the SVG is clearly visible. The downside of this is that it requires approximately +20KB of bandwidth (SVG -> 308KB & png -> 288KB). I've also pushed webp format for the banner that is even less than 100KB, which we can use instead of PNG if we decide not to go with SVG.

RajVarsani commented 2 years ago

Sorry, I forgot to check for mobile devices. Let me see what I can do.

RajVarsani commented 2 years ago

There was an issue with the max-width of the banner image. All other params deciding its width were at auto value, so I think its width was calculated the same as its max-width.

secondl1ght commented 2 years ago

Awesome looks like the mobile view is fixed now!

LGTM @bumi

bumi commented 2 years ago

thanks for the PR @RajVarsani and thanks for the review @secondl1ght @Tiana01 is this also OK for you?

getAlby / website

Update styling for Home page #76