Timeline styles
An add-on that makes it easy to add a timeline to any page or blog post. Use it for listing jobs, changelog notes, countries visited, or your blogging journey.1
Preview
Year 3535
In the year 3535, ain't gonna need to tell the truth, tell no lie, everything you think, do and say, is in the pill you took today.Year 5555
In the year 5555, your arms hangin' limp at your sides, your legs got nothin' to do, some machine's doin' that for you.Year 9595
In the year 9595, I'm kinda wonderin' if man is gonna be alive, he's taken everything this old earth can give, and he ain't put back nothing.
How to use
Wrap your timeline in a container using the timeline class.
Markup
<div class="timeline">
* #### One time
Once upon a time, something happened.
* #### Another time
Another moment worth remembering.
* #### Today
And here we are.
</div>
Styles
/* Timeline | robertbirming.com */
.timeline {
margin-block: var(--space-block);
}
.timeline ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.timeline ul::before {
content: "";
position: absolute;
inset-block: 0.25em;
inset-inline-start: 0.35rem;
width: 1px;
background: color-mix(in srgb, var(--text) 22%, transparent);
}
.timeline li {
position: relative;
padding-inline-start: 2rem;
margin-block: 2rem;
}
.timeline li::before {
content: "";
position: absolute;
inset-block-start: 0.1em;
inset-inline-start: 0;
width: 0.7rem;
height: 0.7rem;
background: var(--bg);
border: 1px solid color-mix(in srgb, var(--text) 30%, transparent);
border-radius: 999px;
}
.timeline li > :last-child {
margin-block-end: 0;
}
.timeline h4 {
margin: 0;
padding-block-end: 0.9em;
font-size: 0.75em;
line-height: 1.2;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
Want more? Check out the Bear library.
Happy time-travel!
This add-on is built for Bearming. Using a different theme? Add the Bearming tokens to make it work with your setup.↩