chroe: clean up timeline

Author: openscript

src/components/Timeline.astro

@@ -8,7 +8,6 @@ const { shortSpine = false } = Astro.props;
 const displayTriangle = shortSpine ? "none" : "absolute";
 ---
 
-<div class="dot"></div>
 <div class="timeline" data-short-spine={shortSpine}>
   <ol>
     <slot />
@@ -18,7 +17,6 @@ const displayTriangle = shortSpine ? "none" : "absolute";
 <style define:vars={{ displayTriangle }}>
   .timeline {
     position: relative;
-    margin-top: 10px;
   }
 
   ol {
@@ -31,22 +29,6 @@ const displayTriangle = shortSpine ? "none" : "absolute";
     gap: var(--timeline-gap);
   }
 
-  .dot {
-    position: relative;
-  }
-
-  .dot::before {
-    content: "";
-    width: 4px;
-    height: 8px;
-    background-color: var(--color-primary);
-    left: 50%;
-    top: 0;
-    position: absolute;
-    z-index: 3;
-    transform: translateX(-50%);
-  }
-
   /* spine of the timeline */
   .timeline::before {
     content: "";
@@ -68,10 +50,6 @@ const displayTriangle = shortSpine ? "none" : "absolute";
       left: 90%;
     }
 
-    .dot::before {
-      left: 90%;
-    }
-
     .timeline::after {
       content: "";
       width: 20px;

src/components/TimelineEntry.astro

@@ -14,17 +14,14 @@
     padding: 1rem;
     background: var(--color-overlay);
     width: 45%;
-    box-shadow: 0px 15px 30px -15px rgba(0, 0, 0, 0.5);
   }
 
   li::after {
     content: "";
     width: 20px;
     height: 20px;
     border-radius: 50%;
-    border-width: 4px;
-    border-style: solid;
-    border-color: var(--color-primary);
+    border: 4px solid var(--color-primary);
     background: var(--color-white);
     position: absolute;
     left: 50%;