Add wavy title animation

diff --git a/src/littlesongplace/static/styles.css b/src/littlesongplace/static/styles.css
index e3ff419170ffa51109c56fd05a39b7eef9026676..5ac1dfe2abbff5b38a42dae3e248cedd3d737890 100644 (file)
--- 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 c5c914e1ee93a12c3a50aab36ab417545b629b23..e3a3fdc43dce93cf6bfe6f24a007243a80f3a46a 100644 (file)
--- 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">