From 00012d3285dbc960001b6c341906af918b27960a Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Wed, 19 Oct 2022 18:16:45 +1100
Subject: Use shape-outside to wrap event text in circles

---
 src/components/TimeLine.vue | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'src')

diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index b3bab51..4832cfd 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -42,6 +42,10 @@
 	<div v-for="id in idToPos.keys()" :key="id"
 		class="absolute bg-black text-white rounded-full border border-yellow-500 animate-fadein text-sm text-center"
 		:style="eventStyles(id)">
+		<div class="w-1/2 h-full float-left"
+			style="shape-outside: radial-gradient(farthest-side at right, transparent 100%, #fff 0%)"></div>
+		<div class="w-1/2 h-full float-right"
+			style="shape-outside: radial-gradient(farthest-side at left, transparent 100%, #fff 0%)"></div>
 		{{idToEvent.get(id)!.title}}
 	</div>
 	<!-- Buttons -->
-- 
cgit v1.2.3