Merge pull request #344 from zackproser/glowing-green-highlights

Add glowing green highlights to newsletter capture form
zackproser · Feb 12, 2024 · 2eca99f · 2eca99f
2 parents 151c978 + d3a4320
commit 2eca99f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/src/components/Newsletter.jsx b/src/components/Newsletter.jsx
@@ -87,7 +87,7 @@ export const Newsletter = () => {
 	) : (
 		<form
 			onSubmit={handleSubmit}
-			className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40"
+			className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40 tracer-glow"
 		>
 			<h2 className="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
 				<MailIcon className="h-6 w-6 flex-none" />

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -19,6 +19,38 @@
   animation: glow-animation 2s infinite alternate;
 }
 
+@keyframes traceBorder {
+  0%, 100% {
+    box-shadow: 0 0 1px #21fc0d;
+  }
+  12.5% {
+    box-shadow: 0 -1px 1px #21fc0d;
+  }
+  25% {
+    box-shadow: 1px -1px 1px #21fc0d;
+  }
+  37.5% {
+    box-shadow: 1px 0 1px #21fc0d;
+  }
+  50% {
+    box-shadow: 1px 1px 1px #21fc0d;
+  }
+  62.5% {
+    box-shadow: 0 1px 1px #21fc0d;
+  }
+  75% {
+    box-shadow: -1px 1px 1px #21fc0d;
+  }
+  87.5% {
+    box-shadow: -1px 0 1px #21fc0d;
+  }
+}
+
+.tracer-glow {
+  position: relative;
+  animation: traceBorder 3s infinite linear;
+}
+
 .sparkle {
   width: 10px;
   height: 10px;