feat: pulse download header on navigation

src/lib/h2.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   export let id: string = "";
+  export let className: string = "";
 </script>
 
-<h2 class="text-4xl font-vinque my-8" {id}><slot /></h2>
+<h2 class="text-4xl font-vinque my-8 {className}" {id}><slot /></h2>

src/routes/+page.svelte

@@ -100,7 +100,7 @@
 
 <Divider />
 
-<H2 id="download">Herunterladen</H2>
+<H2 id="download" className="target:animate-pulse-once">Herunterladen</H2>
 
 <p class="my-8 flex items-center flex-col justify-center md:flex-row">
   <DownloadButton href="/">Hörspiel (mp3)</DownloadButton>

tailwind.config.cjs

@@ -29,6 +29,9 @@ module.exports = {
     },
     extend: {
       fontFamily: { vinque: "Vinque, serif" },
+      animation: {
+        "pulse-once": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) 2",
+      }
     },
   },
   variants: {