fix(timelineHome): item gradient (#113)

* fix(timelineHome): improved gradients * fix(timelineHome): improved gradients
dyne · Sep 18, 2023 · 60598fb · 60598fb
1 parent 36dec1b
commit 60598fb
Showing 1 changed file with 6 additions and 2 deletions.
diff --git a/src/components/timeline/home/TimelineHomeItem.svelte b/src/components/timeline/home/TimelineHomeItem.svelte
@@ -4,6 +4,8 @@
 
 	export let item: TimelineItem;
 	const { bg, accent, border } = timelineColors[item.type] ?? timelineColors['default'];
+
+	const isDefaultBackground = accent == timelineColors.default.accent;
 </script>
 
 <div class="relative py-6 select-none">
@@ -16,14 +18,16 @@
 		<div class="space-y-3 text-white relative p-4 h-0 grow overflow-hidden">
 			{#if item.description}
 				<p class="text-gray-400 text-xl">{item.description}</p>
-				<div class={`absolute bottom-0 left-0 w-full h-full bg-gradient-to-t from-black`} />
+				<div class="absolute bottom-0 left-0 w-full h-full bg-gradient-to-t from-[var(--secondary-accent-color)]" />
 			{/if}
 			<div class={`absolute bottom-0 left-0 w-full h-full ${bg}`} />
 		</div>
 		<div class={`${bg} p-4 shrink-0`}>
 			<a
 				href={`/timeline#${encodeURIComponent(item.title)}`}
-				class={`block w-fit ${accent} px-3 py-2 rounded-full text-lg`}
+				class={`block w-fit ${accent} px-3 py-2 rounded-full text-lg ${
+					isDefaultBackground ? 'text-black' : 'text-white'
+				}`}
 			>
 				See more
 			</a>