From 0e70fcd2381f5e061129a559357e75412ab5863a 2022-06-27 13:40:17
From: Ben Sturmfels <ben@sturm.com.au>
Date: 2022-06-27 13:40:17
Subject: [PATCH] Don't set up for animation when no JavaScript available.

---

diff --git a/themes/next.copyleft.org/templates/base.html b/themes/next.copyleft.org/templates/base.html
index 5d41916c04b407017d3dbe9bd1d83eed7583331c..a22263b17c3af0edb76643994443e9d9f08c980b 100644
--- a/themes/next.copyleft.org/templates/base.html
+++ b/themes/next.copyleft.org/templates/base.html
@@ -73,7 +73,22 @@
              header a.active {
                text-decoration: underline;
              }
+
+             /* Set up the home page title animation */
+             header h1#title {
+               opacity: 0;
+               translate: 0 -10px;
+             }
             </style>
+            <noscript>
+                <style>
+                 /* But reset it if we don't have JavaScript to animate with. */
+                 header h1#title {
+                   opacity: 1;
+                   translate: 0 0;
+                 }
+                </style>
+            </noscript>
         {% endblock head %}
     </head>
 
@@ -102,7 +117,7 @@
                 </nav>
             </div>
             {% if output_file == 'index.html' %}
-                <h1 id="title" class="f2 f1-m f-subheadline-ns lh-title mb4 mt4 code black-70 tracked-tight" style="color: #3b1c4a; opacity: 0; translate: 0 -10px; position: relative;">&gt;&nbsp;{{ SITENAME }}</h1>
+                <h1 id="title" class="f2 f1-m f-subheadline-ns lh-title mb4 mt4 code black-70 tracked-tight" style="color: var(--purple);">&gt;&nbsp;{{ SITENAME }}</h1>
                 <p class="f4 f3-ns measure lh-copy">{% if SITESUBTITLE %}{{ SITESUBTITLE }}{% endif %}</p>
             {% endif %}
         </header>