up to Blades CSS v2.4.3, syntax highlighting via PrismJS, and other visual improvements

content/projects/jinja.md

@@ -27,7 +27,7 @@ Jinja's philosophy is that while application logic belongs in Python if
 possible, it shouldn't make the template designer's job difficult by
 restricting functionality too much.
 
-```jinja
+```jinja2
 {% extends "base.html" %}
 {% block title %}Members{% endblock %}
 {% block content %}

content/projects/markupsafe.md

@@ -8,7 +8,7 @@ to use in HTML and XML. Characters that have special meanings are replaced so
 that they display as the actual characters. This mitigates injection attacks,
 meaning untrusted user input can safely be displayed on a page.
 
-```pycon
+```python
 >>> from markupsafe import Markup, escape
 
 >>> # escape replaces special characters and wraps in Markup

content/projects/quart.md

@@ -22,7 +22,7 @@ async def greet():
     return 'Hello, World!'
 ```
 
-```
-$ export QUART_APP=hello:app
-$ quart run
+```sh
+export QUART_APP=hello:app
+quart run
 ```

src/pallets/static/style.css

@@ -28,14 +28,6 @@ footer {
   align-items: start;
 }
 
-footer ul {
-  display: grid;
-}
-
-footer ul li {
-  list-style-type: none;
-}
-
 .title-replace {
   position: absolute;
   width: 1px;

src/pallets/templates/index.html

@@ -4,13 +4,13 @@
   <section>
     {{ page.content_html | safe }}
   </section>
-  <section style="display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(16ch, 21%, 100%), 1fr)); gap: var(--pico-spacing);">
+  <section style="display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(16ch, 21%, 100%), 1fr)); gap: var(--pico-spacing); row-gap: 2rem;">
     {% for title in ("Flask", "Quart", "Jinja", "Click", "Werkzeug", "ItsDangerous", "MarkupSafe") %}
       {% set name = title.lower() %}
-      <p>
-          <a href="projects/{{ name }}"><img src="/static/content/projects/{{ name }}-logo.svg" style="height: 3em;"></a>
-          <a href="projects/{{ name }}" class="contrast"><strong>{{ title }}</strong></a>
-      </p>
+      <a href="projects/{{ name }}" class="contrast" style="align-items: center;">
+        <i><img src="/static/content/projects/{{ name }}-logo.svg" style="height: 3em; margin: 0;"></i>
+        <strong>{{ title }}</strong>
+      </a>
     {% endfor %}
   </section>
 {% endblock %}

src/pallets/templates/layout.html

@@ -6,7 +6,7 @@
   <title>Pallets</title>
   <link rel=icon href="/static/pallets-logo.svg">
   <link rel="alternate" type="application/atom+xml" title="Blog" href="{{ url_for(".blog_feed") }}">
-  <link rel=stylesheet href="https://cdn.jsdelivr.net/npm/@anyblades/blades@2.3.1/css/blades.min.css">
+  <link rel=stylesheet href="https://cdn.jsdelivr.net/npm/@anyblades/blades@2.4.3/css/blades.min.css">
   <link rel=stylesheet href="/static/style.css">
   {% block extra_head %}{% endblock %}
 </head>
@@ -29,7 +29,7 @@
 <main class="container">
   {% block page %}{% endblock %}
 </main>
-<footer class="container grid">
+<footer class="container unlist-all grid" style="grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));">
     <ul>
       <li><strong>Policies</strong></li>
       <li><a href="/security">Security</a></li>

src/pallets/templates/project.html

@@ -1,18 +1,22 @@
 {% extends "layout.html" %}
 
+{% block extra_head %}
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism-okaidia.min.css" />
+  <script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-core.min.js" defer></script>
+  <script src="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js" defer></script>
+{% endblock %}
+
 {% block page %}
   <section style="text-align: center;">
     <h1 class="title-replace">{{ page.name }}</h1>
-    <img style="height: 6em;" src="/static/content/projects/{{ page.logo }}">
+    <img src="/static/content/projects/{{ page.logo }}" style="height: 6em; background: white; padding-right: 1em; border-radius: 0.6em;">
   </section>
-  <nav>
-    <span></span>
+  <nav style="justify-content: center;">
     <ul>
       <li><a href="{{ page.docs }}">Documentation</a></li>
       <li><a href="{{ page.pypi }}">Releases on PyPI</a></li>
       <li><a href="{{ page.github }}">Source on GitHub</a></li>
     </ul>
-    <span></span>
   </nav>
   <section>
     {{ page.content_html | safe }}