feat: add dot at beginning of spine. Add TimelineEntry.

Author: Leonardo-Olivo

src/components/Timeline.astro

@@ -1,42 +1,24 @@
 ---
 type Props = {
-  elements: {
-    text: string;
-    title: string;
-  }[];
   shortSpine?: boolean;
 };
 
-const { elements, shortSpine = false } = Astro.props;
+const { 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">
+<div class="dot"></div>
+<div class="timeline" data-short-spine={shortSpine}>
   <ol>
-    {
-      elements.map((element) => (
-        <li>
-          <h6>{element.title}</h6>
-          <p>{element.text}</p>
-        </li>
-      ))
-    }
+    <slot />
   </ol>
 </div>
 
-<style define:vars={{ spineHeight, displayTriangle }}>
+<style define:vars={{ displayTriangle }}>
   .timeline {
     position: relative;
-  }
-
-  h6 {
-    margin-top: 0;
-  }
-
-  p {
-    font-size: 15px;
+    margin-top: 10px;
   }
 
   ol {
@@ -49,55 +31,44 @@ const displayTriangle = shortSpine ? "none" : "absolute";
     gap: var(--timeline-gap);
   }
 
-  /* spine of the timeline */
-  .timeline::before {
+  .dot {
+    position: relative;
+  }
+
+  .dot::before {
     content: "";
     width: 4px;
-    height: var(--spineHeight);
-    position: absolute;
+    height: 8px;
+    background-color: var(--color-primary);
     left: 50%;
+    top: 0;
+    position: absolute;
+    z-index: 3;
     transform: translateX(-50%);
-    background-color: var(--color-primary);
-    z-index: 3; /* above potential dividers */
   }
 
-  li {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    padding: 1rem;
-    background: var(--color-overlay);
-    width: 45%;
-    box-shadow: 0px 15px 30px -15px rgba(0, 0, 0, 0.5);
-  }
-
-  li::after {
+  /* spine of the timeline */
+  .timeline::before {
     content: "";
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    border-width: 4px;
-    border-style: solid;
-    border-color: var(--color-primary);
-    background: var(--color-white);
+    width: 4px;
+    height: calc(100% + var(--size-height-divider) + (3 * var(--size-gutter-massive)));
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
-    z-index: 5; /* above spine */
+    background-color: var(--color-primary);
+    z-index: 3; /* above potential dividers */
   }
 
-  @media screen and (min-width: 1025px) {
-    ol li:nth-child(even) {
-      align-self: flex-end;
-    }
+  .timeline[data-short-spine="true"]::before {
+    height: 100%;
   }
 
   @media screen and (max-width: 1025px) {
-    li::after {
+    .timeline::before {
       left: 90%;
     }
 
-    .timeline::before {
+    .dot::before {
       left: 90%;
     }
 
@@ -108,17 +79,13 @@ const displayTriangle = shortSpine ? "none" : "absolute";
       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))));
+      bottom: -5px;
       position: var(--displayTriangle);
       z-index: 3; /* above potential dividers */
     }
 
-    li {
-      width: 85%;
-    }
-
-    li:not(:last-child) {
-      margin-bottom: 4rem;
+    .timeline::before {
+      height: 100%;
     }
   }
 </style>

src/components/TimelineEntry.astro

@@ -0,0 +1,59 @@
+---
+
+---
+
+<li>
+  <slot />
+</li>
+
+<style>
+  li {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    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);
+    background: var(--color-white);
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 5; /* above spine */
+  }
+
+  @media screen and (min-width: 1025px) {
+    li:nth-child(even) {
+      align-self: flex-end;
+    }
+  }
+
+  @media screen and (max-width: 1025px) {
+    li::after {
+      left: 90%;
+    }
+
+    li {
+      width: 85%;
+    }
+
+    li:not(:last-child) {
+      margin-bottom: 4rem;
+    }
+
+    li::after {
+      width: 17px;
+      height: 17px;
+    }
+  }
+</style>

src/content/pages/de/past/formation.mdx

@@ -7,7 +7,7 @@ import FormationSection from "../../../../layouts/sections/FormationSection.astr
 import Divider from "../../../../components/Divider.astro";
 
 <FormationSection class="spotlight" key="founding">
-  <h2 name="title">Gründung</h2>
+  <h2>Gründung</h2>
 
   Obwohl die Idee und der Name schon einige Zeit zuvor existierten, wurde die Firma offiziell im Januar 2020 von Robin gegründet. Bald nach der Gründung ist Diego als zweiten Mitgründer dazugestossen. Fortan arbeiteten die beiden daran, die ersten Softwareprojekte umzusetzen.
 
@@ -16,7 +16,7 @@ import Divider from "../../../../components/Divider.astro";
 <Divider firstSegmentColor="var(--color-white)" fixAntialiasingBottom />
 
 <FormationSection class="white-background" key="office">
-  <h2 name="title">Büro und Mitarbeiter</h2>
+  <h2>Büro und Mitarbeiter</h2>
 
   Zuerst dachten wir, dass wir einfach von zu Hause aus arbeiten. Doch als wir davon erfuhren, dass in Oerlikon das ehemalige Swissôtel in eine WG für Studenten und Startups umgewandelt wird, haben wir uns sofort beworben und Glück gehabt. Die Geschichte kann [hier](https://www.srf.ch/news/schweiz/mit-rund-300-mitbewohnern-dieser-ehemalige-hotelturm-wird-zur-mega-wg) nachgelesen werden. Somit hatten wir von Februar 2021 bis Ende Jahr unser erstes Büro mitten in Oerlikon.
 
@@ -29,7 +29,7 @@ import Divider from "../../../../components/Divider.astro";
 <Divider firstSegmentColor="var(--color-white)" flipVertical fixAntialiasingTop />
 
 <FormationSection class="dark-background" key="evolution" last>
-  <h2 name="title">Entwicklung</h2>
+  <h2>Entwicklung</h2>
 
   Seither haben wir uns stetig weiterentwickelt und neue Projekte realisiert, die unsere Vision und Mission unterstützen. Wir freuen uns auf die kommenden Herausforderungen und Chancen, die vor uns liegen.
 

src/content/pages/en/past/formation.mdx

@@ -3,12 +3,11 @@ path: formation
 title: Formation
 ---
 
-
 import FormationSection from "../../../../layouts/sections/FormationSection.astro";
 import Divider from "../../../../components/Divider.astro";
 
 <FormationSection class="spotlight" key="founding">
-  <h2 name="title">Founding</h2>
+  <h2>Founding</h2>
 
   Although the idea and name had existed for some time before, the company was officially founded by Robin in January 2020. Shortly after the founding, Diego joined as the second co-founder. From then on, the two worked together to implement the first software projects.
 
@@ -17,7 +16,7 @@ import Divider from "../../../../components/Divider.astro";
 <Divider firstSegmentColor="var(--color-white)" fixAntialiasingBottom />
 
 <FormationSection class="white-background" key="office">
-  <h2 name="title">Office and employees</h2>
+  <h2>Office and employees</h2>
 
   At first, we thought we would simply work from home. But when we learned that the former Swissôtel in Oerlikon was being converted into shared accommodation for students and startups, we applied immediately and were lucky. The story can be read [here](https://www.srf.ch/news/schweiz/mit-rund-300-mitbewohnern-dieser-ehemalige-hotelturm-wird-zur-mega-wg). Thus, we had our first office in the heart of Oerlikon from February 2021 until the end of the year.
 
@@ -30,7 +29,7 @@ import Divider from "../../../../components/Divider.astro";
 <Divider firstSegmentColor="var(--color-white)" flipVertical fixAntialiasingTop />
 
 <FormationSection class="dark-background" key="evolution" last>
-  <h2 name="title">Evolution</h2>
+  <h2>Evolution</h2>
 
   Since then, we have continuously evolved and realized new projects that support our vision and mission. We look forward to the upcoming challenges and opportunities that lie ahead.
 

src/layouts/sections/FormationSection.astro

@@ -2,11 +2,13 @@
 import { currentLocale } from "astro-nanostores-i18n:runtime";
 import Timeline from "../../components/Timeline.astro";
 import { getCollection } from "astro:content";
+import TimelineEntry from "../../components/TimelineEntry.astro";
 
 type Props = {
   key: string;
   class?: string;
   last?: boolean;
+  start?: boolean;
 };
 
 const { key, class: className, last } = Astro.props;
@@ -27,17 +29,27 @@ const formationData = timelineCollection
 
 <section class:list={[className]}>
   <div>
-    <slot name="title" />
     <slot />
   </div>
-  <Timeline elements={formationData} shortSpine={last} />
+  <div class="timeline">
+    <Timeline shortSpine={last}>
+      {
+        formationData.map((element) => (
+          <TimelineEntry>
+            <div class="title">{element.title}</div>
+            <p>{element.text}</p>
+          </TimelineEntry>
+        ))
+      }
+    </Timeline>
+  </div>
 </section>
 
 <style>
   section {
     display: grid;
     column-gap: 1.5rem;
-    grid-template-columns: 60% 40%;
+    grid-template-columns: 55% 45%;
   }
 
   @media screen and (max-width: 1025px) {
@@ -46,4 +58,15 @@ const formationData = timelineCollection
       row-gap: 1rem;
     }
   }
+
+  .title {
+    font-size: 1.5rem;
+    font-weight: 700;
+  }
+
+  @media screen and (min-width: 1025px) {
+    .timeline {
+      margin-top: 2.2em;
+    }
+  }
 </style>