Implement the new design for the footer: mobile

[R-Tomas-Gonzalez]

### Dependency

• Implement the new design for the footer: desktop #2393

Overview

We need to update the mobile view of the footer on the website to reflect the new design in Figma.

Details

We are changing the way the mobile footer looks. We will be adding sections to the footer that include: "Our Work", "Get in Touch", "Join Us", and "Toolkit.

Current Mobile Footer

Desired Mobile Footer

Note, the figma design in the desired mobile footer shows the last link on the bottom as "Privacy Policy". However, the current link on the website is "Join Us". The last link should remain as "Join Us".

Action Items

• Feature Branch: You will be working off a feature branch called feature-homepage-launch and the pull request created from this issue should be pushed into that feature branch. Please read and follow the steps in the How to work off of a feature branch wiki article.
• Navigate to footer.html -> /_includes/footer.html
• Create new section under the Donate button, and above the link section
• Include four sections of Our Work, Join Us, Get in Touch, Toolkit
• Under each section add desired links according to figma design
• If scss is necessary, add to the _footer.scss file -> /_sass/components/_footer.scss

Resources/Instructions

#2393 - issue for updating the footer design for desktop view
Figma - Mobile Footer Design

Issue Creator - Tomas Gonzalez
Designer of Feature - Stephen Parent

[github-actions]

Hi @R-Tomas-Gonzalez.

Good job adding the required labels for this issue. The merge team will review the issue and add a "Ready for Milestone" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to read and interpret labels

[ExperimentsInHonesty]

@R-Tomas-Gonzalez I added the feature branch label to this issue.

[Wny-Duong]

Availability: (05/20-05/22): 6 hours, (05/25-05/29): 10 hours
ETA: Sunday, 5/29.

[JessicaLucindaCheng]

@Wny-Duong Here are the anchor links. These anchors may not all work since they may not all have been implemented yet. To check you can click on the links and see if they go to an anchor.

• Press is www.hackforla.org/about#news
• Volunteer with Us is www.hackforla.org/join#volunteer
• Partner with Us is www.hackforla.org/join#partner
• Advise Us is www.hackforla.org/join#advise
• Guides is www.hackforla.org/toolkit#guides
• External Resources is www.hackforla.org/toolkit#external-resources
• Contact Us is www.hackforla.org/#get-in-touch

[Wny-Duong]

Update

1. Progress: Mobile footer is roughly implemented with working links and placeholder links where anchors haven't been added yet. The current work done matches the Desired Mobile Footer layout for most mobile screen resolutions except for very small ones (less than 360px in width) as this causes the social media icons to become formatted strangely. There's also some inconsistencies with how much spacing exists between website content and footer because of a change I made to the main-footer styling in _footer.scss to prevent it from covering content at the very bottom.

• Demonstration of issue with small mobile resolutions
  
• Demonstration of issue with spacing between website content and footer. The white blank space can be bigger or smaller depending on which the mobile resolution I'm testing with.
  

3. Blockers: None. Some slight tweaking needed with padding and margin values in _footer.scss should fix the issues mentioned in progress and I expect there won't be any serious issues.
4. Availability: 5/28 - 5/29 (4 hours)
5. ETA: Sunday, 5/29

[JessicaLucindaCheng]

This issue has been completed with the merging of pull request #3183. However, there is an issue with the linking between this issue and that pr. (I even tried linking it manually but I was unable to.)

Thus, I'm closing this issue as completed.