Better style for jagged timeline items

cheeaun · Sep 9, 2023 · f4ce2e8 · f4ce2e8
1 parent 059fed4
commit f4ce2e8
Showing 1 changed file with 18 additions and 1 deletion.
diff --git a/src/app.css b/src/app.css
@@ -2226,15 +2226,32 @@ ul.link-list li a .icon {
     transition: var(--back-transition);
     transform: translate3d(-2.5vw, 0, 0);
   }
+  .timeline:not(.flat)
+    > li.timeline-item-container:has(.status-link.is-active) {
+    border-top-left-radius: var(--item-radius);
+    border-bottom-left-radius: var(--item-radius);
+  }
   .timeline:not(.flat)
     > li:not(:has(.status-carousel)):has(+ li .status-link.is-active),
-  .timeline:not(.flat) > li.timeline-item-container:has(.status-link.is-active),
   .timeline:not(.flat)
     > li:not(:has(.status-carousel)):has(.status-link.is-active)
     + li {
     transition: var(--back-transition);
     transform: translate3d(-1.25vw, 0, 0);
   }
+  .timeline:not(.flat)
+    > li.timeline-item-container:not(:has(.status-carousel)):has(
+      + li .status-link.is-active
+    ) {
+    border-top-left-radius: var(--item-radius);
+  }
+  .timeline:not(.flat)
+    > li.timeline-item-container:not(:has(.status-carousel)):has(
+      .status-link.is-active
+    )
+    + li.timeline-item-container {
+    border-bottom-left-radius: var(--item-radius);
+  }
   .box {
     padding: 32px;
   }