Korbs/sudovanilla-website
Korbs/sudovanilla-website
1
Fork 0
Code Issues Pull requests Activity

Add Timeline component

Browse source
This commit is contained in:
Korbs 2024-12-09 17:09:37 -05:00
parent dfd2d922fc
commit 5df4ae4024
1 changed files with 41 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/components/Timeline.astro Normal file
View file

@ -0,0 +1,41 @@
---
const {
Date,
Time
} = Astro.props
---
<div class="timeline">
<p class="timeline-date">{Date} - {Time}</p>
<slot/>
</div>
<style>
.timeline {
border-left: 2px white solid;
padding-left: 24px;
margin-left: 24px;
margin-bottom: -48px;
.timeline-date {
font-weight: bold;
position: relative;
background: black;
color: white !important;
font-size: 14px;
width: fit-content;
border-radius: 0px 1rem 1rem 0px;
padding: 12px 24px 12px 24px;
border: 2px white solid;
border-left-width: 2px;
border-left-style: solid;
border-left-color: white;
margin: 48px 0px 16px -26px;
border-left: none;
}
ul {
padding: 0px;
margin: 24px 16px;
list-style: disclosure-closed;
}
}
</style>