chore: remove last key

Author: Leonardo-Olivo

src/components/Timeline.astro

@@ -1,20 +1,14 @@
 ---
-type Props = {
-  shortSpine?: boolean;
-};
 
-const { shortSpine = false } = Astro.props;
-
-const displayTriangle = shortSpine ? "none" : "absolute";
 ---
 
-<div class="timeline" data-short-spine={shortSpine}>
+<div class="timeline">
   <ol>
     <slot />
   </ol>
 </div>
 
-<style define:vars={{ displayTriangle }}>
+<style>
   .timeline {
     position: relative;
   }
@@ -47,7 +41,7 @@ const displayTriangle = shortSpine ? "none" : "absolute";
     z-index: 3; /* above potential dividers */
   }
 
-  .timeline[data-short-spine="true"]::before {
+  :global(article section:last-of-type .timeline::before) {
     height: 100%;
   }
 
@@ -64,7 +58,7 @@ const displayTriangle = shortSpine ? "none" : "absolute";
       background-color: var(--color-primary);
       left: calc(90% - 10px);
       bottom: -5px;
-      position: var(--displayTriangle);
+      position: absolute;
       z-index: 3; /* above potential dividers */
     }
 

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

@@ -28,7 +28,7 @@ import Divider from "../../../../components/Divider.astro";
 
 <Divider firstSegmentColor="var(--color-white)" flipVertical fixAntialiasingTop />
 
-<FormationSection class="dark-background" key="evolution" last>
+<FormationSection class="dark-background" key="evolution">
   <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

@@ -28,7 +28,7 @@ import Divider from "../../../../components/Divider.astro";
 
 <Divider firstSegmentColor="var(--color-white)" flipVertical fixAntialiasingTop />
 
-<FormationSection class="dark-background" key="evolution" last>
+<FormationSection class="dark-background" key="evolution">
   <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/Shell.css

@@ -31,6 +31,7 @@
   --color-overlay: #f7f9f3;
 
   --size-gutter: 1rem;
+  --size-gutter: 1.5rem;
   --size-gutter-big: 2rem;
   --size-gutter-huge: 4rem;
   --size-gutter-massive: 8rem;
@@ -39,6 +40,8 @@
   --size-burger: 2rem;
   --size-carousel-buttons: 2rem;
 
+  --heading-margin: 2.2em;
+
   --font-size: 16px;
   --font-text: "PT Sans", sans-serif;
   --font-mono: "Fira Mono", monospace;
@@ -176,7 +179,7 @@ h5,
 h6 {
   font-family: var(--font-heading);
   font-weight: 900;
-  margin-top: 2.2em;
+  margin-top: var(--heading-margin);
 }
 
 h1 {

src/layouts/sections/FormationSection.astro

@@ -7,11 +7,9 @@ import TimelineEntry from "../../components/TimelineEntry.astro";
 type Props = {
   key: string;
   class?: string;
-  last?: boolean;
-  start?: boolean;
 };
 
-const { key, class: className, last } = Astro.props;
+const { key, class: className } = Astro.props;
 
 const locale = currentLocale.get();
 
@@ -32,7 +30,7 @@ const formationData = timelineCollection
     <slot />
   </div>
   <div class="timeline">
-    <Timeline shortSpine={last}>
+    <Timeline>
       {
         formationData.map((element) => (
           <TimelineEntry>
@@ -48,25 +46,25 @@ const formationData = timelineCollection
 <style>
   section {
     display: grid;
-    column-gap: 1.5rem;
+    column-gap: var(--size-gutter-medium);
     grid-template-columns: 55% 45%;
   }
 
   @media screen and (max-width: 1025px) {
     section {
       grid-template-columns: 100%;
-      row-gap: 1rem;
+      row-gap: var(--size-gutter);
     }
   }
 
   .title {
     font-size: 1.5rem;
-    font-weight: 700;
+    font-weight: bold;
   }
 
   @media screen and (min-width: 1025px) {
     .timeline {
-      margin-top: 2.2em;
+      margin-top: var(--heading-margin);
     }
   }
 </style>