From 6bf9df1beef108b980e330358ec47cac223e5434 Mon Sep 17 00:00:00 2001
From: Michal Vasilek <michal@vasilek.cz>
Date: Sun, 20 Jun 2021 00:40:43 +0200
Subject: [PATCH] Modernize

---
 config.py                      |   4 ++
 present.py                     |   2 +
 static/favicon.png             | Bin 0 -> 5800 bytes
 static/style.css               |  86 +++++++++++++++++----------------
 templates/base.html            |  83 +++++++++++++++++++------------
 templates/main.html            |  24 ++++-----
 templates/small/main_list.html |  34 ++++++-------
 7 files changed, 133 insertions(+), 100 deletions(-)
 create mode 100644 static/favicon.png

diff --git a/config.py b/config.py
index b348fc3..ca60d84 100644
--- a/config.py
+++ b/config.py
@@ -1,5 +1,9 @@
 DAILY_HASH_BITS = 9
 
+ASSETS_URL = '/pkgs.void/static'
+
+VOIDLINUX_URL = 'https://voidlinux.org'
+
 DATASOURCE_CLASS = 'SqliteDataSource'
 
 DATASOURCE_ARGUMENTS = ['index.sqlite3']
diff --git a/present.py b/present.py
index bb579a5..c7ee400 100644
--- a/present.py
+++ b/present.py
@@ -58,6 +58,8 @@ def escape_attr(arg):
 def web_parameters():
     return {
         'root_url': config.ROOT_URL,
+        'assets_url': config.ASSETS_URL,
+        'voidlinux_url': config.VOIDLINUX_URL,
         'escape_attr': escape_attr,
     }
 
diff --git a/static/favicon.png b/static/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..fd3ec045d08445cdd73c7413e01a89754827593f
GIT binary patch
literal 5800
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

literal 0
HcmV?d00001

diff --git a/static/style.css b/static/style.css
index a331961..1c1162b 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,68 +1,70 @@
-html, body {
-    background: #ddd;
-    color: #222;
+html {
+    --void-green: #478061;
+    --void-green-link: #478061;
+    --void-green-light: #478061;
+    --text: #333;
+    --background: white;
+    --border: #ddd;
 }
 
-header {
-    font-size: 1.2em;
-    text-align: right;
+body {
+    background-color: var(--background);
+    color: var(--text);
 }
 
-.searchbox {
-    margin: 1ex;
-}
-
-.content {
-    max-width: 90ex;
-    max-width: 90ch;
-    margin: auto;
+.btn-primary {
+    background-color: var(--void-green);
+    border-color: var(--void-green);
 }
 
 a {
-    color: #0000E0;
+    color: var(--void-green-light);
 }
 
-.horizontal {
-    display: inline;
-    padding: 0;
+.bg-void {
+    background-color: var(--void-green);
 }
 
-.horizontal li {
-    display: inline;
-    margin: auto 1ex;
+.card {
+    background-color: inherit;
+    border: 1px solid var(--border);
 }
 
-dd {
-    margin-bottom: 1ex;
+.card-body {
+    padding: 2rem 3rem;
 }
 
-ul, .breakable {
-	columns: 40ex 2;
-	columns: 40ch 2;
+.nav-link {
+    color: white;
 }
 
-ul.continuous {
-	columns: auto 1;
+.nav-link:focus, .nav-link:hover {
+    color: white;
+    text-decoration: inherit;
 }
 
-li, .non-breakable {
-    break-inside: avoid;
+a:hover {
+    color: var(--text);
+    text-decoration: underline;
 }
 
-hr {
-    max-width: 20ex;
-    max-width: 20ch;
-    color: #bfb;
-    border: none;
-    border-top: dotted 0.4em #bfb;
-	margin: 1.3em auto;
+.btn-primary:hover {
+    background-color: var(--background);
+    border-color: var(--text);
 }
 
-li > aside, .masked > aside {
-    font-size: 0.8em;
-    display: inline;
+.form-control, .form-control:focus {
+    background-color: inherit;
+    color: var(--text);
 }
 
-.archs-per-version a {
-    white-space: nowrap;
+@media (prefers-color-scheme: dark) {
+    html {
+        --void-green: #295340;
+        --void-green-link: #62b086;
+        --void-green-light: #478061;
+        --text: #ccc;
+        --background: #222;
+        --border: #666;
+    }
 }
diff --git a/templates/base.html b/templates/base.html
index e199068..4219c46 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,34 +1,57 @@
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>${_context.get('title', 'Packages')} from Void</title>
+    <link rel="icon" type="image/png" href="${assets_url}/favicon.png" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="${assets_url}/style.css"/>
+  </head>
 
-
-
-
-
-    <head>
-        <meta charset="utf-8"/>
-        <title>${_context.get('title', 'Packages')} from Void</title>
-        <link href="${root_url}/static/style.css" rel="stylesheet" type="text/css"/>
-        
-    </head>
-
-
-    <body>
-        <header>
-            <nav>
-                <ul class="horizontal">
-                    <li><a href="${root_url}">Homepage</a></li>
-                    <li><a href="https://github.com/void-linux/void-packages">Templates repository</a></li>
-                    <li><a href="https://voidlinux.org">Void Linux homepage</a></li>
-                    <li><a href="${root_url}/all">All packages</a></li>
-                </ul>
-            </nav>
-            <form action="${root_url}/search" class="searchbox" method="GET">
-                <input name="term" type="text"/>
-                <input type="submit" value="View"/>
-                <input type="submit" name="find" value="Find"/>
+  <body>
+    <div class="bg-void">
+      <header class="container d-flex flex-wrap justify-content-center py-3 mb-4">
+        <ul class="nav nav-pills">
+          <li class="nav-item"><a class="nav-link" href="${voidlinux_url}/">Home</a></li>
+          <li class="nav-item"><a class="nav-link" href="${voidlinux_url}/news">News</a></li>
+          <li class="nav-item"><a class="nav-link" href="${voidlinux_url}/download/">Download</a></li>
+          <li class="nav-item"><a class="nav-link" aria-current="page" href="${root_url}">Packages</a></li>
+          <li class="nav-item"><a class="nav-link" href="${voidlinux_url}/acknowledgments/">Acknowledgments</a></li>
+          <li class="nav-item"><a class="nav-link" href="https://docs.voidlinux.org">Documentation</a></li>
+          <li class="nav-item"><a class="nav-link" href="https://man.voidlinux.org/">Manual pages</a></li>
+          <li class="nav-item"><a class="nav-link" href="https://github.com/void-linux">Github</a></li>
+        </ul>
+      </header>
+    </div>
+    <div class="container">
+      <div class="searchbar mb-4">
+        <div class="row g-3 align-items-center">
+          <div class="col-auto">
+            <a href="${root_url}">Featured packages</a>
+          </div>
+          <div class="col-auto">
+            <a href="${root_url}/all">All packages</a>
+          </div>
+          <div class="col">
+            <form action="${root_url}/search" method="GET" class="form-inline">
+              <div class="row g-3 align-items-center">
+                <div class="col">
+                  <input name="term" type="text" class="form-control"/>
+                </div>
+                <div class="col-auto">
+                  <input type="submit" value="View" class="btn btn-primary"/>
+                </div>
+                <div class="col-auto">
+                  <input type="submit" name="find" value="Find" class="btn btn-primary"/>
+                </div>
+              </div>
             </form>
-        </header>
-{== _content ==}
-    </body>
+          </div>
+        </div>
+      </div>
+      {== _content ==}
+    </div>
+  </body>
 </html>
diff --git a/templates/main.html b/templates/main.html
index b301ed7..def19a9 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -1,12 +1,14 @@
 <?py _context['title'] = title ?>
-        <div class="content">
-        <main>
-            <div class="breakable">
-                 
-                <?py for entry in lists: ?>
-<?py include('small/main_list.html', entry=entry) ?>
-                <?py #endfor ?>
-            </div>
-            <p>Site was updated at ${updated}.</p>
-        </main>
-    </div><footer>Server side code is AGPL licensed. You can view <a href="https://github.com/Chocimier/pkgs.void">git repo</a> or get <a href="${root_url}/static/source/pkgs.void.tar.bz2">source tarball</a>.</footer>
+<div class="content">
+  <main>
+    <div class="d-flex flex-wrap justify-content-between align-items-start">
+      <?py for entry in lists: ?>
+      <?py include('small/main_list.html', entry=entry) ?>
+      <?py #endfor ?>
+    </div>
+  </main>
+  <footer class="mt-4 text-center">
+    <p>Site was updated at ${updated}.</p>
+    <p>Server side code is AGPL licensed. You can view <a href="https://github.com/Chocimier/pkgs.void">git repo</a> or get <a href="${root_url}/static/source/pkgs.void.tar.bz2">source tarball</a>.</p>
+  </footer>
+</div>
diff --git a/templates/small/main_list.html b/templates/small/main_list.html
index 0ca35cc..20888e3 100644
--- a/templates/small/main_list.html
+++ b/templates/small/main_list.html
@@ -1,17 +1,17 @@
-                <div class="non-breakable">
-                    <h2>${entry['title']}</h2>
-                    <?py tag = 'ul' if entry.get('bullets') else 'ol' ?>
-                    <{== tag ==}>
-                    <?py echo('                        ') ?>
-                        <?py for i in entry['packages']: ?>
-<li>
-                            <a href="${root_url}/package/${i}">${i}</a>
-                        </li><?py
-                        #endfor ?>
-
-                    </{== tag ==}>
-                    <?py if 'more' in entry: ?>
-                    <a href="${root_url}/${entry['address']}">${entry['more']}</a>
-                    <?py #endif ?>
-                </div>
-    
+<div class="card">
+  <div class="card-body">
+    <h5 class="card-title">${entry['title']}</h2>
+    <?py tag = 'ul' if entry.get('bullets') else 'ol' ?>
+    <{== tag ==} class="card-text">
+    <?py echo('                        ') ?>
+    <?py for i in entry['packages']: ?>
+    <li>
+      <a href="${root_url}/package/${i}">${i}</a>
+    </li>
+    <?py #endfor ?>
+    </{== tag ==}>
+    <?py if 'more' in entry: ?>
+    <a class="btn btn-primary" href="${root_url}/${entry['address']}">${entry['more']}</a>
+    <?py #endif ?>
+  </div>
+</div>