diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 00000000..ae2ffdf1 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "commonstyle/archlinux-common-style"] + path = commonstyle/archlinux-common-style + url = https://gitlab.archlinux.org/maltejur/archlinux-common-style.git diff --git a/README.md b/README.md index 73f9ed03..b423f2d8 100644 --- a/README.md +++ b/README.md @@ -32,27 +32,31 @@ packages, you will probably want the following: # Testing Installation -1. Run `python -m venv env`. +1. Initialize the submodules - cd /path/to/archweb && python -m venv ./env/ + cd /path/to/archweb && git submodule update --init -2. Activate the virtualenv. +2. Run `python -m venv env`. + + python -m venv ./env/ + +3. Activate the virtualenv. source ./env/bin/activate -2. Install dependencies through `pip`. +4. Install dependencies through `pip`. pip install -r requirements.txt -3. Copy `local_settings.py.example` to `local_settings.py` and modify. +5. Copy `local_settings.py.example` to `local_settings.py` and modify. Make sure to uncomment the appropriate database section (either sqlite or PostgreSQL). -4. Migrate changes. +6. Migrate changes. ./manage.py migrate -5. Load the fixtures to pre populate some data. If you don't want some of the +7. Load the fixtures to pre populate some data. If you don't want some of the provided data, adjust the file glob accordingly. ./manage.py loaddata main/fixtures/*.json @@ -60,11 +64,11 @@ packages, you will probably want the following: ./manage.py loaddata mirrors/fixtures/*.json ./manage.py loaddata releng/fixtures/*.json -6. Use the following commands to start a service instance +8. Use the following commands to start a service instance ./manage.py runserver -7. To optionally populate the database with real data: +9. To optionally populate the database with real data: wget http://mirrors.kernel.org/archlinux/core/os/x86_64/core.db.tar.gz ./manage.py reporead x86_64 core.db.tar.gz diff --git a/commonstyle/__init__.py b/commonstyle/__init__.py new file mode 100644 index 00000000..e69de29b diff --git a/commonstyle/archlinux-common-style b/commonstyle/archlinux-common-style new file mode 160000 index 00000000..d1fe8aa6 --- /dev/null +++ b/commonstyle/archlinux-common-style @@ -0,0 +1 @@ +Subproject commit d1fe8aa62875affea056fa6504f6882f3d2f6931 diff --git a/commonstyle/templatetags/archnavbar.py b/commonstyle/templatetags/archnavbar.py new file mode 100644 index 00000000..ce95e4e7 --- /dev/null +++ b/commonstyle/templatetags/archnavbar.py @@ -0,0 +1,17 @@ +from os import path +from django import template +from django.utils.safestring import mark_safe +from django.conf import settings + +register = template.Library() + + +@register.simple_tag +def archnavbar(): + with open(path.join(settings.DEPLOY_PATH, "commonstyle", "archlinux-common-style", "html", "navbar.html"), "r", encoding="UTF-8") as f: + return mark_safe( + f.read() + .replace('href="https://archlinux.org"', 'href="/"') + .replace('href="https://archlinux.org/packages/"', 'href="/packages/"') + .replace('href="https://archlinux.org/download/"', 'href="/download/"') + ) diff --git a/requirements.txt b/requirements.txt index c3a84150..25c6692e 100644 --- a/requirements.txt +++ b/requirements.txt @@ -17,3 +17,5 @@ bleach==4.1.0 requests==2.25.1 xtarfile==0.1.0 zstandard==0.15.2 +django-compressor==2.4.1 +django-libsass==0.9 \ No newline at end of file diff --git a/settings.py b/settings.py index 2dd10b48..5ea3cca4 100644 --- a/settings.py +++ b/settings.py @@ -72,6 +72,8 @@ # Look for more static files in these locations STATICFILES_DIRS = ( path.join(DEPLOY_PATH, 'sitestatic'), + path.join(DEPLOY_PATH, 'commonstyle', 'archlinux-common-style', 'img'), + path.join(DEPLOY_PATH, 'commonstyle', 'archlinux-common-style', 'sass'), ) # Static files backend that allows us to use far future Expires headers @@ -135,6 +137,8 @@ 'public', 'releng', 'visualize', + 'commonstyle', + 'compressor', ) # Logging configuration for not getting overspammed @@ -258,3 +262,13 @@ INSTALLED_APPS = list(INSTALLED_APPS) + ['debug_toolbar'] # vim: set ts=4 sw=4 et: + +STATICFILES_FINDERS = [ + 'django.contrib.staticfiles.finders.FileSystemFinder', + 'django.contrib.staticfiles.finders.AppDirectoriesFinder', + "compressor.finders.CompressorFinder" +] + +COMPRESS_PRECOMPILERS = ( + ('text/x-scss', 'django_libsass.SassCompiler'), +) diff --git a/sitestatic/archnavbar/archlogo.png b/sitestatic/archnavbar/archlogo.png deleted file mode 100644 index 3d2cd40f..00000000 Binary files a/sitestatic/archnavbar/archlogo.png and /dev/null differ diff --git a/sitestatic/archnavbar/archlogo.svg b/sitestatic/archnavbar/archlogo.svg deleted file mode 100644 index 3f7aa74a..00000000 --- a/sitestatic/archnavbar/archlogo.svg +++ /dev/null @@ -1,194 +0,0 @@ - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/sitestatic/archnavbar/archnavbar.css b/sitestatic/archnavbar/archnavbar.css deleted file mode 100644 index 5a83dfd2..00000000 --- a/sitestatic/archnavbar/archnavbar.css +++ /dev/null @@ -1,25 +0,0 @@ -/* - * 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 { background: url('archlogo.png') no-repeat !important; } - -/* move the heading/paragraph text offscreen */ -#archnavbarlogo p { margin: 0 !important; padding: 0 !important; text-indent: -9999px !important; } -#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 */ -#archnavbar ul { display: block !important; list-style: none !important; margin: 0 !important; padding: 0 !important; font-size: 0px !important; text-align: right !important; } -#archnavbar ul 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 */ -#archnavbar ul#archnavbarlist li a { color: #999; font-weight: bold !important; text-decoration: none !important; } -#archnavbar ul li a:hover { color: white !important; text-decoration: underline !important; } - diff --git a/sitestatic/archweb.css b/sitestatic/archweb.css index 806944bf..0bc4a642 100644 --- a/sitestatic/archweb.css +++ b/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; @@ -45,7 +15,6 @@ /* general styling */ body { - min-width: 650px; background: #f6f9fc; color: #222; font: normal 100% sans-serif; @@ -179,26 +148,49 @@ h5 { margin-top: 1em; } +/* extra padding left and right in archnavbar on desktop */ +@media (min-width: 1480px){ + #archnavbar { + width: 1440px; + padding-left: calc(calc(100% - 1440px) / 2) !important; + padding-right: calc(calc(100% - 1440px) / 2) !important; + } +} + /* general layout */ #content { - width: 95%; + max-width: 1440px; + padding: 0 20px; margin: 0 auto; text-align: left; + display: flex; + flex-direction: row; +} + +.anb-packages ~ #content { + flex-direction: column; } #content-left-wrapper { - float: left; - width: 100%; /* req to keep content above sidebar in source code */ + padding-right: 45px; } #content-left { - margin: 0 340px 0 0; } #content-right { - float: left; - width: 300px; - margin-left: -300px; + min-width: 300px; +} + +@media (max-width: 768px) { + #content { + flex-direction: column; + } + + #content-left-wrapper { + padding-right: 0; + } + } div.box { @@ -209,7 +201,7 @@ div.box { } #footer { - clear: both; + font-size: .812em; margin: 2em 0 1em; } @@ -459,6 +451,11 @@ table thead th.sorter-false { border-bottom: 1px dotted #bbb; } + #news h4 a { + max-width: 80%; + display: inline-block; + } + #news .timestamp { float: right; font-size: 0.85em; @@ -478,6 +475,10 @@ table thead th.sorter-false { color: white; } +.article-content { + word-break: break-word; +} + h3 span.arrow { display: block; width: 0; @@ -648,6 +649,25 @@ h3 span.arrow { padding: 0; } +@media (max-width: 768px) { + #nav-sidebar { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + } + + .nav-sidebar-item { + flex-basis: 31%; + } +} + +@media (max-width: 640px) { + .nav-sidebar-item { + flex-basis: 45%; + } +} + /* home: sidebar components (navlist, sponsors, pkgsearch, etc) */ div.widget { margin-bottom: 1.5em; @@ -1145,9 +1165,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 { +.anb-home #archnavbar ul li#anb-home a, +.anb-packages #archnavbar ul li#anb-packages a, +.anb-download #archnavbar ul li#anb-download a { color: white !important; } diff --git a/sitestatic/base.js b/sitestatic/base.js new file mode 100644 index 00000000..2d68bb26 --- /dev/null +++ b/sitestatic/base.js @@ -0,0 +1,16 @@ +"use strict"; + +document.addEventListener('DOMContentLoaded', function () { + var hamburger = document.getElementById('hamburger'); + var hamburgerState = false; + + hamburger.onclick = function () { + hamburgerState = !hamburgerState; + + if (hamburgerState) { + hamburger.classList.add('open'); + } else { + hamburger.classList.remove('open'); + } + }; +}, false); diff --git a/templates/base.html b/templates/base.html index ed569878..e81ea21b 100644 --- a/templates/base.html +++ b/templates/base.html @@ -1,11 +1,15 @@ {% load static %} {% load group %} +{% load archnavbar %} +{% load compress %} + {% block title %}Arch Linux{% endblock %} + @@ -13,52 +17,38 @@ + {% compress css %}{% endcompress %} {% block head %}{% endblock %} -