feat(ui): implement mobile responsiveness across archweb templates

[emanuellcs]

Description

This PR introduces a minimalist, lightweight mobile responsive overlay for the archweb site (targeting viewports < 850px).

Currently, navigating the Arch Linux website on mobile devices requires zooming and horizontal scrolling. This implementation provides a seamless mobile experience, resequencing core elements for vertical scrolling and implementing a mobile-friendly navigation menu, while strictly ensuring 100% visual parity for desktop users.

Design Philosophy & Approach

To keep the implementation as clean and non-invasive as possible, I followed these principles:

• All responsive logic is contained within a new override stylesheet (sitestatic/archweb-mobile.css). The archlinux_common_style submodule remains completely untouched.
• The mobile hamburger menu uses a pure CSS "Checkbox Hack" approach, avoiding any new JavaScript dependencies.
• All mobile-specific elements are hidden by default (display: none). The mobile CSS is purely an overlay that triggers via media queries, ensuring zero impact on the existing desktop design.

Key Changes

• Added the standard <meta name="viewport"> tag to templates/base.html for proper scaling on mobile browsers.
• Implemented a CSS-only hamburger menu (input#anb-toggle + label#anb-label).
  • Added a smooth 0.2s ease-in-out CSS animation that transforms the hamburger bars into an "X" when toggled, providing immediate visual feedback without JS event delays.
• Utilized Flexbox (order and display: contents) to logically reorder the homepage for vertical reading on small screens: Hero -> Package Search -> Recent Updates -> Latest News.
• Fixed the package search typeahead dropdown positioning by overriding the viewport-relative JavaScript coordinates with absolute CSS values on mobile.
• Applied a consistent 1.5em vertical gap between the navbar and the main content area across all templates (Packages, News, Details, etc.) for better mobile readability.

Screenshots (Mobile View)

(The images of the original versions were taken by my PC's browser, which is why they are low resolution).

View	Before	After
Homepage
About the System
ISO Download Page
Package List
Package Details

(Note: Desktop view was extensively tested and remains 100% unchanged, hence omitted from these screenshots to focus on the mobile layout).

Testing Performed

• Confirmed 100% visual parity on desktop screens (> 850px).
• Tested mobile menu toggle and animation performance.
• Verified package search typeahead positioning on mobile screens.
• Checked template rendering across Homepage, Package Search, and News Detail pages.

Detailed technical documentation and rationale for specific CSS choices are included as comments within sitestatic/archweb-mobile.css to aid future maintenance.

[lahwaacz]

In general, !important should not be used for styling.

The navbar style should be done in https://gitlab.archlinux.org/archlinux/archlinux-common-style

[jelly]

In general, !important should not be used for styling.

The navbar style should be done in https://gitlab.archlinux.org/archlinux/archlinux-common-style

Hmm the navbar should be removed from this repository I suppose? As it uses common-style now?

[lahwaacz]

I think we removed it in cd9423c but maybe I missed something?

[emanuellcs]

Thanks for the feedback, @lahwaacz and @jelly.

To clarify @lahwaacz's point: you are right, the navbar style should be central. In this PR, I didn't touch the common-style submodule; I only wrote a minimalist CSS override file (archweb-mobile.css) to test the responsiveness on archweb.

I have already:

1. Refactored the code to remove all !important declarations.
2. Sent an email to the infrastructure team to request a GitLab account.

Please keep this PR on hold for now. Once I have access to GitLab, I will implement these changes directly in the archlinux-common-style repository as suggested. After that is merged, I'll update this PR to sync with the new global navbar and finalize the site-specific layout fixes (like the homepage reordering).

Thanks for the guidance!