feat(footer): rebuild and optimize footer UX

[ritorhymes]

Summary

Rebuild and modernize the footer to improve UX and accessibility while preserving the original content and general visual intent.

There were design issues with the spacing and alignment of the footer elements, and opportunities to improve the UX and accessibility.

Issues:

• Both containers are noticeably offset to the left instead of proportionally centered with the page margins.
• Social media character link appears visually orphaned and ambiguous.
• Bitcoin Core logo and copyright text are not center aligned with each other.
• Spacing between containers on mobile is inefficient, causing premature wrapping even when space is available.
• On small screens, legal link elements wrap down onto a separate line creating awkward visual separation.

Scope Edited: footer.html and page.scss, added one image asset x.png

Overview of Changes

• Use semantic HTML with <footer>.
• Link the Bitcoin Core logo to the language-localized home route.
• Ensure all interactive elements are keyboard-focusable (tabbing).
• Darken link text for better contrast and readability.
• Remove clearfix and modernize legacy styling.
• Rebuild layout to use Flexbox foundation for spacing and alignment.
• Stylize the social media link and add ARIA support

Layout details

Using flexbox and other centering tools:

• Containers center their content horizontally.
• Both containers are more proportionally center aligned with the page margins.
• Clean spacing maintained between the containers on smaller screen sizes.
• On smaller screens, responsive wrap stacks containers vertically to preserve structure and prevent orphaned fragments.

New button-styled social media link

The "X" character used originally to link to the social media account felt out of place in the layout, it looked like a free-floating typo, and it didn't provide good context for users and assistive technologies. Since Bitcoin Core is a world-leading client and there is only one social media account representing it, I decided to treat the link element as a first-class citizen by styling it like a button that includes:

• A more prominent visual appearance.
• Embedded X logo image.
• The account name for explicit brand association.
• ARIA support and keyboard-focus.

Before and After Images

Desktop Before

Desktop After

Mobile Before @ 482 screen width

Mobile After @ 482 screen width

Mobile Before @ 400 screen width

Mobile After @ 400 screen width

Testing

I've tested a local build running on the following browsers with both the desktop and mobile app versions:

• Chrome
• Firefox
• Edge

Behaviors appear consistent across browsers tested. Feel free to verify on other browsers also.

[katesalazar]

Awesome