From 0220af6f3adcb014e8179c2b73438b2ede0c6344 Mon Sep 17 00:00:00 2001
From: Ava Gaiety W <ava@wroten.me>
Date: Mon, 2 Jun 2025 00:10:32 -0600
Subject: [PATCH] typing teaser animation pinned

---
 _includes/pinned.njk |  6 +++---
 styles.css           | 22 ++++++++++++++++++++++
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/_includes/pinned.njk b/_includes/pinned.njk
index 53f6801..31764ce 100644
--- a/_includes/pinned.njk
+++ b/_includes/pinned.njk
@@ -2,9 +2,9 @@
 
 <main class="max-w-7xl mx-auto px-2">
   <div class="relative max-w-lg mx-auto divide-y-2 divide-yellow lg:max-w-7xl">
-    <div class="p-2 bg-base/75 shadow-lg shadow-yellow/50 rounded border-2 border-base border-l-yellow sm:rounded-tl-none sm:rounded-tr-none">
-      <h1 class="font-serif mt-2 mb-8 text-4xl tracking-tight fancy-heading inline-block motion-safe:animate-fade">
-        {{ title | markdown | safe }}
+    <div class="pt-2 px-4 sm:pt-8 sm:px-8 sm:pb-4 bg-base/75 shadow-lg shadow-yellow/50 rounded border-2 border-base border-l-yellow sm:rounded-tl-none sm:rounded-tr-none">
+      <h1 class="font-serif mt-2 mb-8 text-4xl tracking-tight fancy-heading flex flex-row gap-1 motion-safe:animate-fade">
+        <span>{{ title | markdown | safe }}</span><div class="typing"></div>
       </h1>
       <div class="mt-3 max-w-2xl">
         {{ content | safe }}
diff --git a/styles.css b/styles.css
index cde95ce..fe7c8fb 100644
--- a/styles.css
+++ b/styles.css
@@ -157,3 +157,25 @@ pre {
     margin-bottom: 0;
   }
 }
+
+@keyframes blink-animation {
+  to {
+    visibility: hidden;
+  }
+}
+
+.typing {
+  width: 0.4em;
+  height: .75em;
+  background: linear-gradient(to bottom right,
+    rgb(var(--ctp-peach)),
+    rgb(var(--ctp-mauve))
+  );
+  opacity: 0.4;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .typing {
+    animation: blink-animation 1s steps(5, start) infinite;
+  }
+}