[Sync] I forgor

This commit is contained in:
BOTAlex 2024-04-04 01:46:20 +02:00
parent e19bc385a1
commit 90f0e40ddf
4 changed files with 41 additions and 19 deletions

View File

@ -1,9 +1,8 @@
<div class="centralize"> <div>
<slot></slot> <slot></slot>
</div> </div>
<style> <style>
.centralize{ .centralize{
display: grid; display: grid;
justify-content: center; justify-content: center;

View File

@ -5,4 +5,11 @@
<HorizonalStack> <HorizonalStack>
<slot/> <slot/>
</HorizonalStack> </HorizonalStack>
<style>
.JustifyStart{
display: flex;
justify-content: start;
}
</style>

View File

@ -10,23 +10,29 @@
export let desc: string = "null"; export let desc: string = "null";
</script> </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"/> </div>
<span class="title">{title}</span>
{#if imagePath !== "null"} {#if imagePath !== "null"}
<Img src={imagePath}/> <img src={imagePath} alt="nothing"/>
{/if} {/if}
</div> </div>
<style> <style>
.relativeGrow{
position: relative;
width: 100%; .timelineItemContainer{
height: 100%; column-gap: 20px;
margin-top: 10px;
} }
.noPadding{padding: 0;}
.flexStart{ .flexStart{
display: flex; display: flex;
justify-content: start; justify-content: start;
@ -34,20 +40,30 @@
.title { .title {
font-size: 2.5rem; font-size: 2.5rem;
margin-bottom: 1rem;
display: flex;
align-content: center;
}
.bodyText{
font-size: 1rem;
}
.DateText{
margin: 0; margin: 0;
display: flex;
align-self: flex-start;
} }
.ItemStrip{ .ItemStrip{
width: 0.5vw; width: 0.5vw;
height: 90%; display: inline-flex;
position: relative; position: relative;
background-color: white; background-color: white;
} }
.centralize{
display: grid;
justify-content: center;
}
</style> </style>

View File

@ -1,9 +1,9 @@
<script lang="ts"> <script lang="ts">
import Timeline from "../../../comps/timeline/timeline.svelte"; import Timeline from "../../../comps/timeline/timeline.svelte";
import TimelineItem from "../../../comps/timeline/timelineItem.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> </script>
{image}
<Timeline> <Timeline>
<TimelineItem <TimelineItem
date="[Date]" date="[Date]"