news: fancy spinner

hyprwm · Jan 30, 2024 · 658a62f · 658a62f
1 parent 429e010
commit 658a62f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 9 deletions.
diff --git a/src/lib/Helper.mjs b/src/lib/Helper.mjs
@@ -46,11 +46,12 @@ export function animateIn(node, options = {}) {
 
 	function callback() {
 		timeoutId = setTimeout(
-			effects.forEach(([effect]) => {
-				if (effect === 'slide') node.style.removeProperty('translate')
-				else if (effect === 'fade') node.style.removeProperty('opacity')
-				else if (effect === 'zoom') node.style.removeProperty('scale')
-			}),
+			() =>
+				effects.forEach(([effect]) => {
+					if (effect === 'slide') node.style.removeProperty('translate')
+					else if (effect === 'fade') node.style.removeProperty('opacity')
+					else if (effect === 'zoom') node.style.removeProperty('scale')
+				}),
 			options.delay ?? 0
 		)
 	}

diff --git a/src/lib/components/news-thumb.svelte b/src/lib/components/news-thumb.svelte
@@ -8,7 +8,7 @@
 </script>
 
 <li class="flex gap-14" use:animateIn={{ fade: 0, slide: 24 }}>
-	<div class="flex flex-col gap-4 rounded">
+	<article class="flex flex-col gap-4 rounded">
 		<div class="flex flex-col gap-4 text-sm font-medium text-slate-400">
 			<p class="font-bold text-slate-400">{formatDate(entry.date)}</p>
 		</div>
@@ -18,7 +18,7 @@
 		<a
 			href={link}
 			class="group flex max-w-max items-center gap-4 font-medium text-slate-300 transition-all hover:text-white"
-			>Read up<ArrowRight class="transition-transform group-hover:translate-x-0.5" /></a
+			>Read up <ArrowRight class="transition-transform group-hover:translate-x-0.5" /></a
 		>
-	</div>
+	</article>
 </li>
diff --git a/src/routes/news/+page.svelte b/src/routes/news/+page.svelte
@@ -106,7 +106,7 @@
 	}
 
 	.spinner-wrapper {
-		@apply flex  items-center justify-center bg-gradient-to-tr from-blue-500/0 to-cyan-500 bg-clip-text text-transparent animate-in fade-in-0;
+		@apply mb-4  flex items-center justify-center bg-gradient-to-tr from-blue-500/0 to-cyan-500 bg-clip-text text-transparent animate-in fade-in-0;
 		animation-duration: 2000ms;
 		font-size: min(1vh, 1rem);
 		/* There are 36 rows */