Upgrade Bootstrap to v5

This is just an in-place upgrade to produce a roughly unchanged page design. Ideally I'm going to need to install Sass and use that, because Bootstrap 5 relies a bit more heavily on using its Sass sources if you want to customise things (which I do), but for now loading standard Bootstrap from the CDN is fine. I still prefer Stylus over both Sass and LESS, but the industry seem to have decided on using Sass, which probably means I'll be better off porting my customisations to Sass in the long run. Oh well.
Upgrade to Font Awesome v6
2024-03-13 17:10:38 +11:00 · 2024-03-13 16:57:00 +11:00
2 changed files with 15 additions and 11 deletions
--- a/lemoncurry/jinja2/lemoncurry/layout.html
+++ b/lemoncurry/jinja2/lemoncurry/layout.html
@ -1,5 +1,5 @@
 <!doctype html>
-<html{% block html_attr %} dir="ltr" lang="en"{% endblock %}>
+<html{% block html_attr %} dir="ltr" lang="en" data-bs-theme="dark"{% endblock %}>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@ -27,8 +27,8 @@
    <link rel="{{ i.rel }}" type="{{ i.mime }}" sizes="{{ i.sizes }}" href="{{ i.url }}" />
    {% endfor %}

-    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
-          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/monokai.min.css"
          integrity="sha384-bHqbpRh/XW+phptvH9nQvMKHwPH1ZbOxpIeAB2D2OIEL4Ni7aZzZgMFpsRra+v1g" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/openwebicons@1.6.0/css/openwebicons.min.css"
@ -40,12 +40,11 @@
    {% block styles %}{% endblock %}
    {% endcompress %}

-    <script type="text/javascript" defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"
-            integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"></script>
+    <script type="text/javascript" defer src="https://kit.fontawesome.com/a3aade9b41.js" crossorigin="anonymous"></script>
  </head>
  <body{% block body_attr %}{% endblock %}>
    <header>
-      <nav class="navbar navbar-expand-md navbar-dark">
+      <nav class="navbar navbar-expand-md"><div class="container-fluid">
        <a class="navbar-brand" rel="home" href="{{ url('home:index') }}">{{ request.site.name }}</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
                aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
@ -97,7 +96,7 @@
        </div>
        {% endactiveurl %}

-      </nav>
+      </div></nav>
    </header>

    <main>
@ -147,10 +146,8 @@

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"
            integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" crossorigin="anonymous"
-            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"
-            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"
+            integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js" crossorigin="anonymous"
            integrity="sha384-BlPof9RtjBqeJFskKv3sK3dh4Wk70iKlpIe92FeVN+6qxaGUOUu+mZNpALZ+K7ya"></script>
    <script src="https://unpkg.com/tippy.js@3.4.1/dist/tippy.standalone.min.js" crossorigin="anonymous"
--- a/lemoncurry/static/lemoncurry/css/layout.styl
+++ b/lemoncurry/static/lemoncurry/css/layout.styl
@ -5,6 +5,7 @@ html

 a
 	color $base0D
+	text-decoration none
 	&:hover
 		color $base0C

@ -103,6 +104,12 @@ ul.pagination
 			background-color $base02
 			border 1px solid rgba(0,0,0,.125)

+.media
+	display flex
+	> .media-body
+		flex-grow 1
+		margin-left 3px
+
 .card
 	background-color $base02