From: Chris Fulljames <christianfulljames@gmail.com>
Date: Thu, 3 Jul 2025 20:48:07 +0000 (-0400)
Subject: Add wavy title animation
X-Git-Url: https://littlesong.place/gitweb/?a=commitdiff_plain;h=7e12de1739a99c67635b5e00b3d2584bca7d384e;p=littlesongplace.git

Add wavy title animation
---

diff --git a/src/littlesongplace/static/styles.css b/src/littlesongplace/static/styles.css
index e3ff419..5ac1dfe 100644
--- a/src/littlesongplace/static/styles.css
+++ b/src/littlesongplace/static/styles.css
@@ -164,6 +164,9 @@ div.main {
 }
 
 .site-title {
+    display: flex;
+    justify-content: center;
+
     text-align: center;
     font-size: 3em;
     font-family: "Mat Saleh", sans-serif;
@@ -173,6 +176,17 @@ div.main {
     text-shadow: 2px 2px 0px var(--black);
 }
 
+.site-title span {
+    position: relative;
+    animation: gentle-wave 8s infinite;
+    animation-delay: calc(0.5s * var(--i));
+}
+
+@keyframes gentle-wave {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-5px); }
+}
+
 @media screen and (max-width: 480px) {
     .site-title {
         font-size: 2em;
diff --git a/src/littlesongplace/templates/base.html b/src/littlesongplace/templates/base.html
index c5c914e..e3a3fdc 100644
--- a/src/littlesongplace/templates/base.html
+++ b/src/littlesongplace/templates/base.html
@@ -20,7 +20,25 @@
         <!-- Embedded image data -->
         {{ gif_data|safe }}
 
-        <div class="site-title">little song place</div>
+        <div class="site-title">
+            <span style="--i:0">l</span>
+            <span style="--i:1">i</span>
+            <span style="--i:2">t</span>
+            <span style="--i:3">t</span>
+            <span style="--i:4">l</span>
+            <span style="--i:5">e</span>
+            <span style="--i:6">&nbsp;</span>
+            <span style="--i:7">s</span>
+            <span style="--i:8">o</span>
+            <span style="--i:9">n</span>
+            <span style="--i:10">g</span>
+            <span style="--i:11">&nbsp;</span>
+            <span style="--i:12">p</span>
+            <span style="--i:13">l</span>
+            <span style="--i:14">a</span>
+            <span style="--i:15">c</span>
+            <span style="--i:16">e</span>
+        </div>
 
         <div class="layout-flex">