[Sync] Continue on timeline

src/comps/Utils/HorizonalStack.svelte

@@ -1,16 +1,8 @@
 <div class="centralize">
-    <div class="flex-start">
+    <slot></slot>
-        <slot></slot>
-    </div>
 </div>
 
 <style>
-    .flex-start{
-        display: flex;
-        justify-items: start;
-        
-        padding: 0;
-    }
 
     .centralize{
         display: grid;

src/comps/timeline/timeline.svelte

@@ -4,13 +4,5 @@
 </script>
 
 <HorizonalStack>
-    <ul>
+    <slot/>
-        <!-- {#each {length: 3} as _, i}
-        <li>
-            <TimelineItem title="Item {i}"/>
-        </li>
-        {/each} -->
-
-        <slot/>
-    </ul>
 </HorizonalStack>

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"}
-        {#if imagePath !== "null"}
+        <Img src={imagePath}/>
-            <Img src={imagePath}/>
+    {/if}
-        {/if}
+</div>
-        <VerticalStack>
-            
-        </VerticalStack>
-    </HorizonalStack>
-</li>
 
 <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>