Add bubble to timeline

NUSComputingDev · Aug 2, 2024 · fb6c044 · fb6c044
1 parent 52a24b4
commit fb6c044
Showing 1 changed file with 7 additions and 6 deletions.
diff --git a/src/pages/elections/Timeline.tsx b/src/pages/elections/Timeline.tsx
@@ -31,20 +31,21 @@ function Timeline() {
           </div>
           <div className='relative col-span-12 px-4 space-y-6 sm:col-span-9'>
             <div
-              className='col-span-12 space-y-12 relative px-4 sm:col-span-8 sm:space-y-8 sm:before:absolute
-                sm:before:top-2 sm:before:bottom-0 sm:before:w-0.5 sm:before:-left-3 before:dark:bg-gray-300'
+              className='col-span-12 space-y-12 relative px-4 sm:col-span-8 sm:space-y-8 before:absolute
+                before:top-2 before:bottom-0 before:w-0.5 before:-left-3
+                before:dark:bg-gray-300 translate-x-[20px] sm:translate-x-0'
             >
               {TimelineEvents.map((event, index) => (
                 <div
                   key={index}
-                  className='flex flex-col sm:relative sm:before:absolute sm:before:top-2 sm:before:w-4
-                        sm:before:h-4 sm:before:rounded-full sm:before:left-[-35px]
-                        sm:before:z-[1] before:dark:bg-[#e58e26]'
+                  className='flex flex-col relative before:absolute before:top-2 before:w-4
+                        before:h-4 before:rounded-full before:left-[-35px]
+                        before:z-[1] before:dark:bg-[#e58e26]'
                 >
                   <h3 className='text-xl font-semibold tracking-wide'>
                     {event.title}
                   </h3>
-                  <time className='text-xs pt-2 tracking-wide uppercase dark:text-gray-600'>
+                  <time className='text-xs p-2 tracking-wide uppercase dark:text-gray-600'>
                     {event.date}
                   </time>
                   <p className='mt-3'>{event.description}</p>