feat: add responsiveness to timeline component

Author: Leonardo-Olivo

src/components/Timeline.astro

@@ -10,6 +10,7 @@ type Props = {
 const { elements, shortSpine = false } = Astro.props;
 
 const spineHeight = shortSpine ? "100%" : "calc(100% + var(--size-height-divider) + (2 * var(--size-gutter-massive)))";
+const displayTriangle = shortSpine ? "none" : "absolute";
 ---
 
 <div class="timeline">
@@ -25,7 +26,7 @@ const spineHeight = shortSpine ? "100%" : "calc(100% + var(--size-height-divider
   </ol>
 </div>
 
-<style define:vars={{ spineHeight }}>
+<style define:vars={{ spineHeight, displayTriangle }}>
   .timeline {
     position: relative;
   }
@@ -65,7 +66,6 @@ const spineHeight = shortSpine ? "100%" : "calc(100% + var(--size-height-divider
     flex-direction: column;
     box-sizing: border-box;
     padding: 1rem;
-    /* background: #fcfaf3; */
     background: var(--color-overlay);
     width: 45%;
     box-shadow: 0px 15px 30px -15px rgba(0, 0, 0, 0.5);
@@ -86,7 +86,39 @@ const spineHeight = shortSpine ? "100%" : "calc(100% + var(--size-height-divider
     z-index: 5; /* above spine */
   }
 
-  ol li:nth-child(even) {
-    align-self: flex-end;
+  @media screen and (min-width: 1025px) {
+    ol li:nth-child(even) {
+      align-self: flex-end;
+    }
+  }
+
+  @media screen and (max-width: 1025px) {
+    li::after {
+      left: 90%;
+    }
+
+    .timeline::before {
+      left: 90%;
+    }
+
+    .timeline::after {
+      content: "";
+      width: 20px;
+      aspect-ratio: 1;
+      clip-path: polygon(0 0, 50% 100%, 100% 0);
+      background-color: var(--color-primary);
+      left: calc(90% - 10px);
+      bottom: calc(-1 * (5px + var(--size-height-divider) + (2 * var(--size-gutter-massive))));
+      position: var(--displayTriangle);
+      z-index: 3; /* above potential dividers */
+    }
+
+    li {
+      width: 85%;
+    }
+
+    li:not(:last-child) {
+      margin-bottom: 4rem;
+    }
   }
 </style>

src/layouts/sections/FormationSection.astro

@@ -39,4 +39,11 @@ const formationData = timelineCollection
     column-gap: 1.5rem;
     grid-template-columns: 60% 40%;
   }
+
+  @media screen and (max-width: 1025px) {
+    section {
+      grid-template-columns: 100%;
+      row-gap: 1rem;
+    }
+  }
 </style>