feat: blink

src/routes/guestbook/+page.svelte

@@ -62,9 +62,8 @@ import Window from '../../components/window.svelte';
 					<p class="text-error">you are ratelimited, try again in 30 seconds</p>
 				{/if}
 				{#if data.sendError}
-					<p class="text-error">got error trying to send post</p>
-					<details>
-						<summary>error</summary>
+					<details class="w-[50ch]">
+						<summary class="text-error">got error trying to send post</summary>
 						<p>{data.sendError}</p>
 					</details>
 				{/if}
@@ -79,9 +78,8 @@ import Window from '../../components/window.svelte';
 					woops, looks like you are being ratelimited, try again in like half a minute :3
 				</p>
 			{:else if data.getError}
-				<p class="text-error">got error trying to fetch entries, pls tell me about this</p>
-				<details>
-					<summary>error</summary>
+				<details class="w-[50ch]">
+					<summary class="text-error">got error trying to fetch entries</summary>
 					<p>{data.getError}</p>
 				</details>
 			{:else}

src/styles/app.css

@@ -28,6 +28,11 @@
         content: '>>>> ';
     }
 
+    .prose h1::after,.prose h2::after,.prose h3::after,.prose h4::after {
+        @apply animate-blink;
+        content: '_';
+    }
+
     .prose a {
         text-decoration: none;
     }
@@ -139,6 +144,18 @@
     .dither-bg {
         backdrop-filter: url("#dither");
     }
+
+    @keyframes blink {
+        0% {
+            opacity: 1.0;
+        }
+        50% {
+            opacity: 0.0;
+        }
+        100% {
+            opacity: 1.0;
+        }
+    }
 }
 
 @layer utilities {

tailwind.config.js

@@ -31,6 +31,7 @@ export default {
       animation: {
         'bounce-slow': 'bounce 3s infinite',
         'pulse-fast': 'pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        'blink': 'blink 1s step-start infinite',
       },
       colors: {
         ralsei: {