[Sync] I forgor
This commit is contained in:
parent
e19bc385a1
commit
90f0e40ddf
|
@ -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;
|
||||||
|
|
|
@ -5,4 +5,11 @@
|
||||||
|
|
||||||
<HorizonalStack>
|
<HorizonalStack>
|
||||||
<slot/>
|
<slot/>
|
||||||
</HorizonalStack>
|
</HorizonalStack>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.JustifyStart{
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -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>
|
|
@ -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]"
|
||||||
|
|
Loading…
Reference in New Issue