[Sync] started on timeline and added improvements for utils

src/comps/Utils/HorizonalStack.svelte

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

src/comps/Utils/VerticalStack.svelte

@@ -1,4 +1,4 @@
 <!-- Just used for ease of read -->
-<div>
+<div style="padding: 0;">
     <slot></slot>
 </div>

src/comps/timeline/timeline.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
+    import HorizonalStack from "../Utils/HorizonalStack.svelte";
     import TimelineItem from "./timelineItem.svelte";
-
 </script>
 
-<ul>
-    {#each {length: 3} as _, i}
-    <li>
-        <TimelineItem title="Item {i}"/>
-    </li>
-    {/each}
-</ul>
+<HorizonalStack>
+    <ul>
+        <!-- {#each {length: 3} as _, i}
+        <li>
+            <TimelineItem title="Item {i}"/>
+        </li>
+        {/each} -->
+
+        <slot/>
+    </ul>
+</HorizonalStack>

src/comps/timeline/timelineItem.svelte

@@ -10,8 +10,8 @@
     export let desc: string = "null";
 </script>
 
-<div>
-    <title>{title}</title>
+<li>
+    <span class="title">{title}</span>
     <HorizonalStack>
         {#if imagePath !== "null"}
             <Img src={imagePath}/>
@@ -20,8 +20,10 @@
             
         </VerticalStack>
     </HorizonalStack>
-</div>
+</li>
 
 <style>
-
+    .title {
+        font-size: 2.5rem;
+    }
 </style>