Enhancing the timeline

dyne · Sep 13, 2023 · 88bd4e1 · 88bd4e1
1 parent cd7deb4
commit 88bd4e1
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 11 deletions.
diff --git a/public/dyne-timeline.csv b/public/dyne-timeline.csv
@@ -1,5 +1,5 @@
 "YEAR","REST OF DATE","NAME EVENT","TYPE","LINK","COPY","IMAGE URL","MILESTONE","LOCATION","CTA1","CTA LINK1","CTA2","CTA LINK2","CTA3","CTA LINK3"
-2023,"14th Sep 2023 ∙ 13:15-13:55","What sauce goes with a Tech Barbecue","crypto","https://techbbq.dk/speakers-2023/","The best of course. That's what Planet Dyne is bringing to Copenhagen in September. It happens between 13th and 14th in 2023, and the panel will be about Privacy.","https://substackcdn.com/image/fetch/f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F5bffe0ee-7ef7-4cdb-a3c5-00742d8280c5_800x786.png","Matrikel1, Copenhagen","👉 More info here 👈🏾","https://techbbq.dk/speakers-2023/",,,,,
+2023,"14th Sep 2023 ∙ 13:15-13:55","What sauce goes with a Tech Barbecue","crypto","https://techbbq.dk/speakers-2023/","The best of course. That's what Planet Dyne is bringing to Copenhagen in September. It happens between 13th and 14th in 2023, and the panel will be about Privacy.","/timeline/2023-09-14-tech-bbq.png",,"Matrikel1, Copenhagen","👉 More info here 👈🏾","https://techbbq.dk/speakers-2023/",,,,
 1994,,"Freaknet Medialab",,"freaknet.org","The first Italian medialab is born: freaknet.org in Sicily, co-founded by some of the people at the origin of Dyne.org","https://www.freaknet.org/img/logo_freaknet_trasparente.png",,"Amsterdam","mimmo","ciao","uno","due","tre","4"
 1994,,"Metro Olografix",,"olografix.org"," Metro Olografix is born in Pescara, cultural association for telematic cultures",,,"Copenhagen",,,,,,
 1997,,"TIG97 demoscene event",,"http://storico.olografix.org/ig97","The Italian Gathering demo party",,,"Palazzolo Acreide",,,,,,

diff --git a/public/images/timeline/tech-bbq.png b/public/images/timeline/tech-bbq.png
diff --git a/public/timeline/2023-09-14-tech-bbq.png b/public/timeline/2023-09-14-tech-bbq.png
diff --git a/src/components/timeline/colors.ts b/src/components/timeline/colors.ts
@@ -5,7 +5,7 @@ type TimelineColorDefs = {
 };
 
 export const timelineColors: Record<string, TimelineColorDefs> = {
-	cyber: {
+	crypto: {
 		accent: 'bg-dyne-purple',
 		bg: 'bg-dyne-purple/20',
 		border: 'border-dyne-purple',

diff --git a/src/components/timeline/page/TimelinePageItem.svelte b/src/components/timeline/page/TimelinePageItem.svelte
@@ -11,7 +11,7 @@
 	console.log(item);
 </script>
 
-<div class="relative pl-6" id={encodeURIComponent(item.title)}>
+<div class="relative pl-6 font-sans" id={encodeURIComponent(item.title)}>
 	{#if item.restOfDate}
 		<div
 			class={`absolute top-0.5 -left-32 text-primary-light pr-2 w-28 text-right text-xl ${isMilestone ? `pt-4` : ''}`}
@@ -21,7 +21,7 @@
 	{/if}
 	<div class={`absolute ${isMilestone ? 'top-5' : 'top-1'} -left-3 w-6 h-6 ${accent} rounded-full ring-4 ring-black`} />
 	<div
-		class={`flex flex-col space-y-4 text-primary-60 rounded-2xl ${isMilestone ? `p-4 border-4 ${border} ${bg}` : ''}`}
+		class={`flex flex-col space-y-5 text-primary-60 rounded-2xl ${isMilestone ? `p-4 border-4 ${border} ${bg}` : ''}`}
 	>
 		<!-- Base content -->
 		<h3 class="text-3xl font-bold text-primary-light font-sans">
@@ -33,13 +33,50 @@
 		{#if item.description}
 			<p class="text-xl mb-2">{item.description}</p>
 		{/if}
-		{#if item.ctaLink1}
-			<a
-				href={item.ctaLink1}
-				class={`${accent} cursor-pointer ${bg} border-2 ${border} hover:bg-saccent hover:text-white hover:border-saccent py-2 px-4 rounded-full w-fit text-xl whitespace-nowrap`}
-			>
-				{item.cta1}
-			</a>
+		{#if item.location}
+			<div class="flex items-center">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-7 w-7 mr-1"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						fill-rule="evenodd"
+						clip-rule="evenodd"
+						d="M0 6.8871C0 3.3596 2.8596 0.5 6.3871 0.5C9.91459 0.5 12.7742 3.3596 12.7742 6.8871C12.7742 9.79993 10.4191 12.9565 8.3699 15.7032C7.62633 16.6998 6.92302 17.6425 6.3871 18.5C5.85117 17.6425 5.14786 16.6998 4.40429 15.7032C2.35505 12.9565 0 9.79993 0 6.8871ZM6.375 10.25C8.23896 10.25 9.75 8.73896 9.75 6.875C9.75 5.01104 8.23896 3.5 6.375 3.5C4.51104 3.5 3 5.01104 3 6.875C3 8.73896 4.51104 10.25 6.375 10.25Z"
+						fill="currentColor"
+					/>
+				</svg>
+				<div class="text-xl">{item.location}</div>
+			</div>
 		{/if}
+		<div class="flex gap-2">
+			{#if item.ctaLink1}
+				<a
+					href={item.ctaLink1}
+					class={`${accent} cursor-pointer ${bg} border-2 ${border} hover:bg-saccent hover:text-white hover:border-saccent py-2 px-4 rounded-full w-fit text-xl whitespace-nowrap`}
+				>
+					{item.cta1}
+				</a>
+			{/if}
+			{#if item.ctaLink2}
+				<a
+					href={item.ctaLink2}
+					class={`${accent} cursor-pointer ${bg} border-2 ${border} hover:bg-saccent hover:text-white hover:border-saccent py-2 px-4 rounded-full w-fit text-xl whitespace-nowrap`}
+				>
+					{item.cta2}
+				</a>
+			{/if}
+			{#if item.ctaLink3}
+				<a
+					href={item.ctaLink3}
+					class={`${accent} cursor-pointer ${bg} border-2 ${border} hover:bg-saccent hover:text-white hover:border-saccent py-2 px-4 rounded-full w-fit text-xl whitespace-nowrap`}
+				>
+					{item.cta3}
+				</a>
+			{/if}
+		</div>
 	</div>
 </div>