feat: tweak squiggle

src/components/tooltip.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <div class="group">
-    <div class="absolute scale-0 transition-all [transition-duration:300ms] opacity-0 group-hover:scale-100 group-hover:opacity-100 {y} {x} {targetY} {targetX} transform-gpu">
+    <div class="absolute scale-0 transition-all [transition-timing-function:cubic-bezier(0.4,0,0.2,1.6)] [transition-duration:300ms] opacity-0 group-hover:scale-100 group-hover:opacity-100 {y} {x} {targetY} {targetX}">
         <Window tooltip>
             <slot name="tooltipContent">Hello world!</slot>
         </Window>

src/routes/+layout.svelte

@@ -70,7 +70,7 @@
 			<filter id="squiggly-{index}">
 				<feTurbulence
 					id="turbulence"
-					baseFrequency="0.02"
+					baseFrequency=0.03
 					numOctaves="3"
 					result="noise"
 					seed={index}

src/routes/+page.svelte

@@ -2,6 +2,7 @@
 	import { PUBLIC_BASE_URL } from '$env/static/public';
 	import Tooltip from '../components/tooltip.svelte';
 	import Window from '../components/window.svelte';
+	import LatestStuff from './lateststuff.md';
 
 	export let data;
 </script>
@@ -65,16 +66,7 @@
 		</Window>
 		<Window title="latest stuff" style="mt-auto">
 			<div class="prose prose-ralsei prose-img:m-0 leading-6">
-				<p>
+				<LatestStuff/>
-					new game prototype thingy <a href="https://yusdacra.itch.io/lightfelt">at itch.io page</a
-					>! spent a lot of time learning and designing the environment and scene stuff :3
-					trenchbroom and func_godot were used mainly!
-				</p>
-				<img
-					class="md:max-w-[39.5rem]"
-					src="https://img.itch.zone/aW1hZ2UvMzExNTU5My8xODYyMjUwOS5qcGVn/original/%2BSrxFo.jpeg"
-					alt="lightfelt screenshot"
-				/>
 			</div>
 		</Window>
 	</div>

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 class="w-[50ch]">
-					<details>
+						<summary class="text-error">got error trying to send post</summary>
-						<summary>error</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 class="w-[50ch]">
-				<details>
+					<summary class="text-error">got error trying to fetch entries</summary>
-					<summary>error</summary>
 					<p>{data.getError}</p>
 				</details>
 			{:else}

src/routes/lateststuff.md

@@ -0,0 +1,9 @@
++++
+layout = false
++++
+
+new game prototype thingy at [itch.io page](https://yusdacra.itch.io/lightfelt)!
+spent a lot of time learning and designing the environment and scene stuff :3
+[trenchbroom](https://trenchbroom.github.io/) and [func_godot](https://func-godot.github.io/func_godot_docs/FuncGodot%20Manual/FuncGodot%20Manual.html) were used mainly!
+
+![lightfelt screenshot](https://img.itch.zone/aW1hZ2UvMzExNTU5My8xODYyMjUwOS5qcGVn/original/%2BSrxFo.jpeg)

src/styles/app.css

@@ -28,6 +28,11 @@
         content: '>>>> ';
     }
 
+    .prose h1::after,.prose h2::after,.prose h3::after,.prose h4::after {
+        @apply motion-safe: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: {