From 90f0e40ddf43bf16b844fd451b24c59b9c553ab8 Mon Sep 17 00:00:00 2001
From: BOTAlex <zhentao2004@gmail.com>
Date: Thu, 4 Apr 2024 01:46:20 +0200
Subject: [PATCH] [Sync] I forgor

---
 src/comps/Utils/HorizonalStack.svelte  |  3 +-
 src/comps/timeline/timeline.svelte     |  9 +++++-
 src/comps/timeline/timelineItem.svelte | 44 ++++++++++++++++++--------
 src/routes/zhen/Comps/AboutMe.svelte   |  4 +--
 4 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/src/comps/Utils/HorizonalStack.svelte b/src/comps/Utils/HorizonalStack.svelte
index ada0b18..a12f302 100644
--- a/src/comps/Utils/HorizonalStack.svelte
+++ b/src/comps/Utils/HorizonalStack.svelte
@@ -1,9 +1,8 @@
-<div class="centralize">
+<div>
     <slot></slot>
 </div>
 
 <style>
-
     .centralize{
         display: grid;
         justify-content: center;
diff --git a/src/comps/timeline/timeline.svelte b/src/comps/timeline/timeline.svelte
index 34c7e62..6fd9812 100644
--- a/src/comps/timeline/timeline.svelte
+++ b/src/comps/timeline/timeline.svelte
@@ -5,4 +5,11 @@
 
 <HorizonalStack>
     <slot/>
-</HorizonalStack>
\ No newline at end of file
+</HorizonalStack>
+
+<style>
+    .JustifyStart{
+        display: flex;
+        justify-content: start;
+    }
+</style>
\ No newline at end of file
diff --git a/src/comps/timeline/timelineItem.svelte b/src/comps/timeline/timelineItem.svelte
index 5eaf227..5cbc147 100644
--- a/src/comps/timeline/timelineItem.svelte
+++ b/src/comps/timeline/timelineItem.svelte
@@ -10,23 +10,29 @@
     export let desc: string = "null";
 </script>
 
-<div class="relativeGrow flexStart">
+<div class="flexStart timelineItemContainer" style="overflow: auto;">
+    <dir class="DateText">{date}</dir>
+    <div class="ItemStrip"/>
+    <div class="noPadding">
+        <div class="title">{title}</div>
+        <div class="bodyText">{desc}</div>
 
-    <div class="ItemStrip centralize"/>
-    <span class="title">{title}</span>
+    </div>
     {#if imagePath !== "null"}
-        <Img src={imagePath}/>
+        <img src={imagePath} alt="nothing"/>
     {/if}
 </div>
 
 <style>
-    .relativeGrow{
-        position: relative;
 
-        width: 100%;
-        height: 100%;
+    .timelineItemContainer{
+        column-gap: 20px;
+
+        margin-top: 10px;
     }
 
+    .noPadding{padding: 0;}
+
     .flexStart{
         display: flex;
         justify-content: start;
@@ -34,20 +40,30 @@
 
     .title {
         font-size: 2.5rem;
+
+        margin-bottom: 1rem;
+
+        display: flex;
+        align-content: center;
+    }
+
+    .bodyText{
+        font-size: 1rem;
+    }
+
+    .DateText{
         margin: 0;
+
+        display: flex;
+        align-self: flex-start;
     }
 
     .ItemStrip{
         width: 0.5vw;
-        height: 90%;
+        display: inline-flex;
 
         position: relative;
 
         background-color: white;
     }
-
-    .centralize{
-        display: grid;
-        justify-content: center;
-    }
 </style>
\ No newline at end of file
diff --git a/src/routes/zhen/Comps/AboutMe.svelte b/src/routes/zhen/Comps/AboutMe.svelte
index dfd97f5..38112bc 100644
--- a/src/routes/zhen/Comps/AboutMe.svelte
+++ b/src/routes/zhen/Comps/AboutMe.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
     import Timeline from "../../../comps/timeline/timeline.svelte";
     import TimelineItem from "../../../comps/timeline/timelineItem.svelte";
-    import image from "/static/images/posts/folder-icons/cover.png"
+    import image from "/images/posts/folder-icons/cover.png"
 </script>
-
+{image}
 <Timeline>
     <TimelineItem 
     date="[Date]"