feat: move notification banner back to top and add banner type capabilities

[karrui]

Problem

The current notification banners are not obvious enough, and may result in users missing the banner.
This PR updates the placement of the banners to the top, whilst changing the CSS to ensure no elements are blocked by banners if they exist.

Closes https://github.com/datagovsg/formsg-private/issues/28

Solution

Features:

• add top aligned banner that does not block anything
• update styling of app for sticky banner/navbar
• add function to process banner message encoding to display in banner.client.component, along with documentation in DEPLOYMENT_SETUP.md

Improvements:

• remove scroll-to-id directive and use $anchorScroll

Bug Fixes:

Screenshots

AFTER:

SITE_BANNER_CONTENT=info:This is an info banner. You can also add links in the text like https://example.com. There is also a dismiss button to the right of the text.

SITE_BANNER_CONTENT=warn:This is a warning banner. You can also add links in the text like https://example.com

SITE_BANNER_CONTENT=error:This is an error banner. You can also add links in the text like https://example.com

SITE_BANNER_CONTENT=hello:This is an invalid banner type, and the full text will be shown. The default banner type of `info` will used.

Desktop GIF run-through:

Mobile GIF run-through:
https://streamable.com/20m5k9

Public form banner is now sticky:

[karrui]

Yes, I notice that the CSS is wonky on iOS safari............ will try to fix.

EDIT: fixed in dbb3be0

[tshuli]

minor suggestions!

[mantariksh]

minor comments/questions. tbh I'm not really sure what's going on in a lot of the CSS changes, I'm assuming they are refactors and you've tested them!

[karrui]

Nvm, ignore the CSS changes. Mobile scrolling is now screwed. Just iOS safari things, still can be scrolled since 100% height is still blocked by iPhone's notches....