WIP: Integrate archlinux-common-style

This depends on the following currently open merge requests:

- https://gitlab.archlinux.org/archlinux/archlinux-common-style/-/merge_requests/9
- https://gitlab.archlinux.org/archlinux/archlinux-common-style/-/merge_requests/10

When they are merged, the URL of the `archlinux_common_style` git
submodule must be updated to upstream.

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "archlinux_common_style"]
+	path = archlinux_common_style
+	url = https://gitlab.archlinux.org/lahwaacz/archlinux-common-style.git

settings.py

@@ -70,9 +70,9 @@
 STATIC_ROOT = path.join(DEPLOY_PATH, 'collected_static')
 
 # Look for more static files in these locations
-STATICFILES_DIRS = (
+STATICFILES_DIRS = [
     path.join(DEPLOY_PATH, 'sitestatic'),
-)
+]
 
 # Static files backend that allows us to use far future Expires headers
 STATICFILES_STORAGE = 'main.storage.MinifiedStaticFilesStorage'
@@ -125,6 +125,8 @@
     'django_countries',
     'django_extensions',
 
+    'archlinux_common_style.django',
+
     'main',
     'mirrors',
     'news',
@@ -244,7 +246,6 @@
         'DIRS': [
             path.join(DEPLOY_PATH, 'templates')
         ],
-        'APP_DIRS': True,
         'OPTIONS': {
             'debug': DEBUG,
             'context_processors': [
@@ -255,6 +256,16 @@
                 'csp.context_processors.nonce',
                 'main.context_processors.mastodon_link',
             ],
+            "loaders": [
+                (
+                    "django.template.loaders.cached.Loader",
+                    [
+                        "django.template.loaders.filesystem.Loader",
+                        "django.template.loaders.app_directories.Loader",
+                        "archlinux_common_style.django.template_loader.Loader",
+                    ],
+                ),
+            ],
         }
     }
 ]

sitestatic/archweb.css

@@ -6,36 +6,6 @@
  *   11px = 0.6875em
  */
 
-/*
- * ARCH GLOBAL NAVBAR
- * We're forcing all generic selectors with !important
- * to help prevent other stylesheets from interfering.
- */
-
-/* container for the entire bar */
-#archnavbar { min-height: 40px !important; padding: 10px 15px !important; background: #333 !important; border-bottom: 5px #08c solid !important; }
-#archnavbarlogo { float: left !important; margin: 0 !important; padding: 0 !important; height: 40px !important; width: 190px !important; background: url('archnavbar/archlogo.png') no-repeat !important; }
-@media (-webkit-min-device-pixel-ratio: 1.2), (min--moz-device-pixel-ratio: 1.2), (-o-min-device-pixel-ratio: 2/1) {
-	#archnavbarlogo { float: left !important; margin: 0 !important; padding: 0 !important; height: 40px !important; width: 190px !important; background: url(archnavbar/archlogo.svg) no-repeat !important;background-size:100% !important;
-	}
-}
-
-/* move the heading text offscreen */
-#archnavbarlogo h1 { margin: 0 !important; padding: 0 !important; text-indent: -9999px !important; }
-
-/* make the link the same size as the logo */
-#archnavbarlogo a { display: block !important; height: 40px !important; width: 190px !important; }
-
-/* display the list inline, float it to the right and style it */
-#archnavbarlist { display: block !important; list-style: none !important; margin: 0 !important; padding: 0 !important; font-size: 0px !important; text-align: right !important; }
-#archnavbarlist li { display: inline-block !important; font-size: 14px !important; font-family: sans-serif !important; line-height: 14px !important; padding: 14px 15px 0px !important; }
-
-/* style the links */
-#archnavbarlist li a { color: #999; font-weight: bold !important; text-decoration: none !important; }
-#archnavbarlist li a:hover { color: white !important; text-decoration: underline !important; }
-
-/* END ARCH GLOBAL NAVBAR */
-
 /* simple reset */
 * {
     margin: 0;
@@ -1145,9 +1115,9 @@ ul.signoff-list {
 }
 
 /* highlight current website in the navbar */
-#archnavbar.anb-home ul li#anb-home a,
-#archnavbar.anb-packages ul li#anb-packages a,
-#archnavbar.anb-download ul li#anb-download a {
+header.anb-home ul li#anb-home a,
+header.anb-packages ul li#anb-packages a,
+header.anb-download ul li#anb-download a {
     color: white !important;
 }
 

templates/base.html

@@ -5,32 +5,21 @@
     <meta charset="utf-8" />
     <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="icon" type="image/png" href="{% static "favicon.png" %}" />
-    <link rel="shortcut icon" type="image/png" href="{% static "favicon.png" %}" />
-    <link rel="apple-touch-icon" href="{% static "logos/apple-touch-icon-57x57.png" %}" />
-    <link rel="apple-touch-icon" sizes="72x72" href="{% static "logos/apple-touch-icon-72x72.png" %}" />
-    <link rel="apple-touch-icon" sizes="114x114" href="{% static "logos/apple-touch-icon-114x114.png" %}" />
-    <link rel="apple-touch-icon" sizes="144x144" href="{% static "logos/apple-touch-icon-144x144.png" %}" />
+    <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" %}" />
+    <link rel="apple-touch-icon" sizes="72x72" href="{% static "archlinux_common_style/apple-touch-icon-72x72.png" %}" />
+    <link rel="apple-touch-icon" sizes="114x114" href="{% static "archlinux_common_style/apple-touch-icon-114x114.png" %}" />
+    <link rel="apple-touch-icon" sizes="144x144" href="{% static "archlinux_common_style/apple-touch-icon-144x144.png" %}" />
     <link rel="search" type="application/opensearchdescription+xml" href="{% url 'opensearch-packages' as osp %}{{ osp }}" title="Arch Linux Packages" />
     {% block head %}{% endblock %}
 </head>
 <body class="{% if user.is_authenticated %}devmode {% endif %}{% block bodyclass %}{% endblock %}">
-    <div id="archnavbar" class="{% block navbarclass %}anb-home{% endblock %}">
-        <div id="archnavbarlogo"><h1><a href="/" title="Return to the main page">Arch Linux</a></h1></div>
-        <div id="archnavbarmenu">
-            <ul id="archnavbarlist">
-                <li id="anb-home"><a href="/" title="Arch news, packages, projects and more">Home</a></li>
-                <li id="anb-packages"><a href="/packages/" title="Arch Package Database">Packages</a></li>
-                <li id="anb-forums"><a href="https://bbs.archlinux.org/" title="Community forums">Forums</a></li>
-                <li id="anb-wiki"><a href="https://wiki.archlinux.org/" title="Community documentation">Wiki</a></li>
-                <li id="anb-gitlab"><a href="https://gitlab.archlinux.org/archlinux" title="GitLab">GitLab</a></li>
-                <li id="anb-security"><a href="https://security.archlinux.org/" title="Arch Linux Security Tracker">Security</a></li>
-                <li id="anb-aur"><a href="https://aur.archlinux.org/" title="Arch Linux User Repository">AUR</a></li>
-                <li id="anb-download"><a href="{% url 'page-download' as pdl %}{{ pdl }}" title="Get Arch Linux">Download</a></li>
-            </ul>
-        </div>
-    </div>
+    <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/" %}
+    </header>
     <div id="content">
         <div id="archdev-navbar">
             {% if user.is_authenticated %}

templates/packages/flaghelp.html

@@ -3,8 +3,8 @@
     <head>
         <title>Flagging Packages</title>
         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
-        <link rel="icon" type="image/png" href="{% static "favicon.png" %}" />
-        <link rel="shortcut icon" type="image/png" href="{% static "favicon.png" %}" />
+        <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="stylesheet" type="text/css" href="{% static "flaghelp.css" %}" media="screen" />
     </head>
     <body>