From e19bc385a193632079c5a21a7e1525b071b3121d Mon Sep 17 00:00:00 2001
From: BOT Alex <44818698+MagicBOTAlex@users.noreply.github.com>
Date: Wed, 3 Apr 2024 17:56:31 +0200
Subject: [PATCH] [Sync] Continue on timeline

---
 src/comps/Utils/HorizonalStack.svelte  | 10 +-----
 src/comps/timeline/timeline.svelte     | 10 +-----
 src/comps/timeline/timelineItem.svelte | 44 ++++++++++++++++++++------
 3 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/comps/Utils/HorizonalStack.svelte b/src/comps/Utils/HorizonalStack.svelte
index b5cc04b..ada0b18 100644
--- a/src/comps/Utils/HorizonalStack.svelte
+++ b/src/comps/Utils/HorizonalStack.svelte
@@ -1,16 +1,8 @@
 <div class="centralize">
-    <div class="flex-start">
-        <slot></slot>
-    </div>
+    <slot></slot>
 </div>
 
 <style>
-    .flex-start{
-        display: flex;
-        justify-items: start;
-        
-        padding: 0;
-    }
 
     .centralize{
         display: grid;
diff --git a/src/comps/timeline/timeline.svelte b/src/comps/timeline/timeline.svelte
index 1302842..34c7e62 100644
--- a/src/comps/timeline/timeline.svelte
+++ b/src/comps/timeline/timeline.svelte
@@ -4,13 +4,5 @@
 </script>
 
 <HorizonalStack>
-    <ul>
-        <!-- {#each {length: 3} as _, i}
-        <li>
-            <TimelineItem title="Item {i}"/>
-        </li>
-        {/each} -->
-
-        <slot/>
-    </ul>
+    <slot/>
 </HorizonalStack>
\ No newline at end of file
diff --git a/src/comps/timeline/timelineItem.svelte b/src/comps/timeline/timelineItem.svelte
index 677ff4a..5eaf227 100644
--- a/src/comps/timeline/timelineItem.svelte
+++ b/src/comps/timeline/timelineItem.svelte
@@ -10,20 +10,44 @@
     export let desc: string = "null";
 </script>
 
-<li>
+<div class="relativeGrow flexStart">
+
+    <div class="ItemStrip centralize"/>
     <span class="title">{title}</span>
-    <HorizonalStack>
-        {#if imagePath !== "null"}
-            <Img src={imagePath}/>
-        {/if}
-        <VerticalStack>
-            
-        </VerticalStack>
-    </HorizonalStack>
-</li>
+    {#if imagePath !== "null"}
+        <Img src={imagePath}/>
+    {/if}
+</div>
 
 <style>
+    .relativeGrow{
+        position: relative;
+
+        width: 100%;
+        height: 100%;
+    }
+
+    .flexStart{
+        display: flex;
+        justify-content: start;
+    }
+
     .title {
         font-size: 2.5rem;
+        margin: 0;
+    }
+
+    .ItemStrip{
+        width: 0.5vw;
+        height: 90%;
+
+        position: relative;
+
+        background-color: white;
+    }
+
+    .centralize{
+        display: grid;
+        justify-content: center;
     }
 </style>
\ No newline at end of file