Implemented new mobile footer design 2554

[Wny-Duong]

Fixes #2554

What changes did you make and why did you make them ?

• Added four new text sections to the footer (under the donate button and above the link section), all of which are grouped into columns and contain links to various different parts of the website.
  • Some of these links are not functional since the anchors they're meant to link to haven't been made yet.
• In the mobile footer, these columns will rearrange themselves to stack on top of each other in order to match the design shown in Figma on the original issue.
  • The design matches best only for 280 to 479 px in width. I think this was because the media rule used to distinguish between mobile and non-mobile in the rest of the _footer.scss file only encompasses width up to 479px. The pictures shown in visual changes are based on 425px width, smaller widths lead to longer links being separated in two lines if they use spaces.
• Made adjustments to the main footer's css. The positioning of the footer now uses sticky positioning with a top margin that's also dependent on mobile versus non-mobile formatting.
  • Adding columns in the way I did caused the footer to cover content on the main body of the page when using absolute positioning with a 0 bottom margin. I think this is because the footer now has a dynamic height based on the sizes of the columns.

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

Visuals after changes are applied

[github-actions]

Want to review this pull request? Take a look at this documentation for a step by step guide!

From your project repository, check out a new branch and test the changes.

git checkout -b Wny-Duong-mobile-footer-redesign-2554 feature-homepage-launch
git pull https://github.com/Wny-Duong/website.git mobile-footer-redesign-2554

[Jaretzbalba]

ETA: End of the day on 6/08
Availability: 2 hours

[Carlos-A-P]

Availability: 2 hours
ETA: 6/06/2022

[Carlos-A-P]

Hey @Wny-Duong. Great job working on this issue! I can see that all of the currently live anchors work well, and all of the required links are shown. The mobile view looks just like the Figma mobile design. I also haven't spotted any issues so far, so I'll approve the pr. Awesome work!

[usaboo]

Hi @Wny-Duong , sorry for the delay, I will have it reviewed by today (26th June)

ETA : Sunday, June 26th
Availability : 1 hour

[usaboo]

Everything looks good! The footer has been added correctly to the "About Us", "Joins Us", "Toolkit" and "Get in Touch"!
I do not understand much about your change on sticky positioning but the original issue looks to be resolved.