update borders

assets/templates/base.njk

@@ -21,9 +21,23 @@
 <body class="{% block body_class %}{% endblock %}"
       hx-boost="true" hx-target="#content" hx-swap="innerHTML show:window:top">
 
+{% include "sidebar.njk" %}
+
 <main id="content" hx-history-elt>
 {% block content %}{% endblock %}
 </main>
 
+<script>
+// The sidebar, and on a phone its button, fade out once the page leaves the
+// top, so they are out of the way while reading; the stylesheet brings the
+// sidebar back under the pointer.
+(function () {
+  var root = document.documentElement;
+  function update() { root.classList.toggle('scrolled', window.scrollY > 0); }
+  addEventListener('scroll', update, { passive: true });
+  update();
+})();
+</script>
+
 </body>
 </html>