feat(ui): implement mobile responsiveness across archweb templates

.gitignore

@@ -22,3 +22,5 @@ htmlcov
 
 # coverage
 .coverage
+
+.devcontainer

sitestatic/archweb-mobile.css

@@ -0,0 +1,236 @@
+/**
+ * Archweb Mobile Responsive Overrides
+ *
+ * This stylesheet provides minimalist mobile responsiveness for archweb.
+ * It is included after all other CSS to allow for surgical overrides.
+ *
+ * Design Constraints:
+ * 1. ZERO impact on desktop views (>= 850px).
+ * 2. Pure CSS implementation for the mobile menu (Checkbox Hack).
+ * 3. Coordination with archlinux_common_style without modifying the submodule.
+ */
+
+/* Hide mobile-only interactive elements on desktop to prevent layout shifts */
+#anb-toggle, #anb-label {
+    display: none;
+}
+
+@media (max-width: 849px) {
+    /* Global Reset: Remove fixed min-widths and ensure fluid containers */
+    body {
+        min-width: 0 !important;
+        padding: 0 !important;
+    }
+
+    /* Main Content Container: Uniform spacing and flex-column layout for stacking */
+    #content {
+        width: 100% !important;
+        padding: 0 10px !important;
+        box-sizing: border-box !important;
+        display: flex !important;
+        flex-direction: column !important;
+        margin-top: 1.5em !important; /* Standardized vertical gap across all templates */
+    }
+
+    /* 
+     * Layout Reordering:
+     * Uses 'display: contents' on wrapper divs to allow children to participate 
+     * directly in the #content flexbox, enabling precise reordering via 'order'.
+     */
+    #content-left-wrapper,
+    #content-left,
+    #content-right {
+        display: contents !important;
+        float: none !important;
+        width: auto !important;
+        margin: 0 !important;
+    }
+
+    /* Homepage Element Sequence: Intro -> Search -> Updates -> News */
+    #intro { 
+        order: 1 !important; 
+        margin-top: 0 !important; 
+    }
+    #pkgsearch { 
+        order: 2 !important; 
+        position: static !important; 
+    }
+    #pkg-updates { 
+        order: 3 !important; 
+    }
+    #news { 
+        order: 4 !important; 
+    }
+    #nav-sidebar { order: 5 !important; }
+    .widget { order: 6 !important; }
+    #footer { order: 7 !important; }
+
+    header {
+        position: relative !important;
+        margin-bottom: 0 !important;
+    }
+
+    /* Suppress empty developer navbar margins to prevent excessive whitespace */
+    #archdev-navbar {
+        margin: 0 !important;
+        display: none !important; 
+    }
+
+    /* News Feed: Clear floats and restore logical horizontal flow for headers/icons */
+    #news h3 {
+        float: left !important;
+        display: block !important;
+        width: auto !important;
+        margin-bottom: 0.5em !important;
+    }
+    #news .rss-icon {
+        float: right !important;
+        display: block !important;
+        margin-top: 0.5em !important;
+        margin-bottom: 0.5em !important;
+    }
+    #news h4 {
+        clear: both !important;
+    }
+
+    /**
+     * Mobile Navigation (Hamburger Menu)
+     * Implementation: Uses a simple "☰" character to avoid external assets.
+     * Positioning: Anchored to the far right of the relative header wrapper.
+     */
+    #anb-label {
+        display: block !important;
+        position: absolute !important;
+        top: 10px !important; 
+        right: 15px !important;
+        left: auto !important;
+        width: 40px !important;
+        height: 40px !important;
+        cursor: pointer !important;
+        z-index: 1001 !important;
+    }
+    #anb-label span,
+    #anb-label span::before,
+    #anb-label span::after {
+        display: block !important;
+        position: absolute !important;
+        width: 25px !important;
+        height: 2px !important;
+        background: #fff !important;
+        transition: all 0.2s ease-in-out !important;
+    }
+    #anb-label span {
+        top: 19px !important;
+        right: 7px !important;
+    }
+    #anb-label span::before {
+        content: "" !important;
+        top: -8px !important;
+    }
+    #anb-label span::after {
+        content: "" !important;
+        top: 8px !important;
+    }
+
+    #anb-toggle:checked ~ #anb-label span {
+        background: transparent !important;
+    }
+    #anb-toggle:checked ~ #anb-label span::before {
+        top: 0 !important;
+        transform: rotate(45deg) !important;
+    }
+    #anb-toggle:checked ~ #anb-label span::after {
+        top: 0 !important;
+        transform: rotate(-45deg) !important;
+    }
+
+    /* Dropdown Toggle: Displays #archnavbarmenu when checkbox is checked */
+    #archnavbarmenu {
+        display: none !important;
+        width: 100% !important;
+        background: #333 !important;
+        clear: both !important;
+        padding-top: 10px !important;
+    }
+
+    #anb-toggle:checked ~ #archnavbar #archnavbarmenu {
+        display: block !important;
+    }
+
+    #archnavbar {
+        position: relative !important;
+        padding: 10px 15px !important;
+        height: auto !important;
+        text-align: left !important;
+    }
+
+    /* Transform horizontal list to vertical stacked items */
+    #archnavbarlist {
+        text-align: left !important;
+    }
+
+    #archnavbarlist li {
+        display: block !important;
+        padding: 10px 0 !important;
+        border-bottom: 1px solid #444 !important;
+        padding-top: 10px !important;
+        padding-bottom: 10px !important;
+    }
+
+    #archnavbarlist li:last-child {
+        border-bottom: none !important;
+    }
+
+    /* Input Fields: Ensure full-width fluid behavior on small screens */
+    input[type=text], input[type=password], textarea {
+        max-width: 100% !important;
+        box-sizing: border-box !important;
+    }
+
+    #sys-message {
+        width: 90% !important;
+        box-sizing: border-box !important;
+    }
+
+    /* Tables: Enable horizontal scrolling for overflow-prone data grids */
+    table {
+        display: block !important;
+        overflow-x: auto !important;
+        width: 100% !important;
+    }
+
+    /**
+     * Package Search Autocomplete
+     * Override: homepage.js calculates coordinates relative to the viewport.
+     * Here we force absolute positioning relative to the form container.
+     */
+    #pkgsearch-form {
+        position: relative !important; 
+        display: block !important;
+    }
+    #pkgsearch fieldset {
+        margin: 0 !important;
+        padding: 0 !important;
+    }
+    #pkgsearch input {
+        float: none !important;
+        width: 100% !important;
+        margin-top: 0.5em !important;
+        box-sizing: border-box !important;
+    }
+
+    /* Force dropdown visibility and alignment directly under the search input */
+    .pkgsearch-typeahead {
+        top: 100% !important; 
+        left: 0 !important;
+        width: 100% !important;
+        box-sizing: border-box !important;
+        position: absolute !important;
+        display: none; 
+        margin-top: 0 !important;
+        background: #f6f9fc !important;
+        border: 1px solid #09c !important;
+        z-index: 2000 !important;
+        text-align: left !important;
+    }
+}

templates/base.html

@@ -3,10 +3,12 @@
 <html lang="en">
 <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="theme-color" content="#08C" />
     <title>{% block title %}Arch Linux{% endblock %}</title>
     <link rel="stylesheet" type="text/css" href="{% static "archlinux_common_style/navbar.css" %}">
     <link rel="stylesheet" type="text/css" href="{% static "archweb.css" %}" media="screen" />
+    <link rel="stylesheet" type="text/css" href="{% static "archweb-mobile.css" %}" />
     <link rel="icon" type="image/png" href="{% static "archlinux_common_style/favicon.png" %}" />
     <link rel="shortcut icon" type="image/png" href="{% static "archlinux_common_style/favicon.png" %}" />
     <link rel="apple-touch-icon" href="{% static "archlinux_common_style/apple-touch-icon-57x57.png" %}" />
@@ -18,7 +20,11 @@
 </head>
 <body class="{% if user.is_authenticated %}devmode {% endif %}{% block bodyclass %}{% endblock %}">
     <header class="{% block navbarclass %}anb-home{% endblock %}">
-        {% include "archlinux_common_style/navbar-django.html" with anb_home_url="/" anb_packages_url="/packages/" anb_download_url="/download/" %}
+        <div id="anb-header-wrapper" style="position: relative;">
+            <input type="checkbox" id="anb-toggle">
+            <label for="anb-toggle" id="anb-label"><span></span></label>
+            {% include "archlinux_common_style/navbar-django.html" with anb_home_url="/" anb_packages_url="/packages/" anb_download_url="/download/" %}
+        </div>
     </header>
     <div id="content">
         <div id="archdev-navbar">