Simple Timelines

Simple timelines are perfect to show of events within your articles. While this doesn't aim to replace the timeline or chronicles feature, it can be very helpful to display the most important events without the reader having to leave the page. It's a nice way to break up your long history sections and make them easier to read.
They can be used standalone, or in columns like you see here. If you want to use them in your own world, just copy the CSS below to your world css and use the bbcode in your articles.
I first saw similar timelines created by Annie Stein for her world Solaris.

431 DAW
Lornan gifts the Tome of Infinite Wisdom to the Boradrinians

308 DAW
The People of Boradrin transform the Southern Golden Coast into a lush and fertile area.

Around 200 DAW
Tria claims the Lighthouse of Okodranous

1 DAW
Destruction of Escarl and Kathal'Dir

If you run into any issues with this component, or need help to customise it to your world, feel free to leave a comment on this article, or hit me up on discord.

Variants

Default

431 DAW
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id facilisis nunc. Curabitur ac odio ac leo imperdiet vehicula. Phasellus placerat quis neque id vulputate. Quisque finibus, tortor sit amet mollis finibus, ipsum tortor rhoncus lectus, nec convallis eros tellus mattis libero. Maecenas lobortis at nisl et tincidunt.

308 DAW
Nullam eget risus vitae urna commodo aliquet sed non justo. Nullam nec turpis ac augue sodales venenatis. Ut suscipit tempor risus at bibendum. Vestibulum fermentum ex in purus ultricies, in hendrerit nunc gravida. Aenean sapien sem, pretium quis condimentum sit amet, posuere sed neque. Quisque vitae sapien quis nibh vestibulum euismod. Sed vehicula nisi at nibh sollicitudin tempor. Ut a mauris gravida nisi elementum maximus. Nam iaculis elit porta blandit tincidunt

Around 200 DAW
Donec at erat eu nisl consectetur convallis. Aliquam interdum, arcu a dictum dictum, arcu ligula aliquet massa, id viverra metus nunc commodo turpis. Nam quis venenatis ipsum. Aenean pharetra sollicitudin elit, a ultrices sapien. Maecenas scelerisque elementum magna dignissim tempus. In eu mollis neque

1 DAW
Nulla malesuada dui eget efficitur finibus. Vivamus eget augue vestibulum lorem porta interdum sit amet in sapien. Maecenas nec magna sit amet erat dapibus porttitor. Aenean nibh neque, placerat ultricies justo ut, mollis posuere urna. Nulla scelerisque tellus sed pulvinar blandit. Fusce id gravida nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam ut purus sodales, maximus justo nec, condimentum turpis. In nec aliquet libero

Small

To use these small timelines, just add small-timeline class to your outer most container. To have the timeline reverse like you can see on the right side here, add the reverse-timeline class. For the right timeline the outer most container would look like this [container:simple-timeline small-timeline reverse-timeline]

431 DAW
Lornan gifts the Tome of Infinite Wisdom to the Boradrinians

308 DAW
The People of Boradrin transform the Southern Golden Coast into a lush and fertile area.

Around 200 DAW
Tria claims the Lighthouse of Okodranous

1 DAW
Destruction of Escarl and Kathal'Dir

431 DAW
Lornan gifts the Tome of Infinite Wisdom to the Boradrinians

308 DAW
The People of Boradrin transform the Southern Golden Coast into a lush and fertile area.

Around 200 DAW
Tria claims the Lighthouse of Okodranous

1 DAW
Destruction of Escarl and Kathal'Dir

Code

BBCode

You can add as many [container:timeline-event] blocks as you want. Each of them will create a separate entry on your timeline.

[container:simple-timeline]
[container:timeline-event]
[container:timeline-icon][section:ra ra-2x ra-pine-tree] [/section][/container] 
[container:timeline-info]
[b]308 DAW[/b][br]
The People of Boradrin transform the Southern Golden Coast into a lush and fertile area.
[/container]
[/container] 
[/container] 

CSS

This first block defines the colors used by the timeline. Depending on your theme, the colors set here might look weird, or won't work at all. Change them to fit your world.
Copy this CSS into your World CSS or Article CSS.

.simple-timeline{
--first-bg-color: var(--sp-light-l);
--second-bg-color: var(--sp-dark);
--hover-bg-color: var(--sp-danger-l);


--first-icon-color: var(--sp-dark);
--second-icon-color: var(--sp-light-l);
--hover-icon-color: var(--sp-light);
}

.simple-timeline .timeline-event {
display: flex;
align-items: center;
}


.simple-timeline .timeline-event .timeline-info {
display: block;
border-left-style: solid;
border-left-width: 5px;
padding: 10px 0 10px 15px;
transition: 250ms ease-in-out;
flex-grow: 1;
border-color: var(--first-bg-color);
}


.simple-timeline .timeline-event .timeline-icon {
border: 1px solid black;
border-radius: 50%;
padding: 5px;
text-align: center;
line-height: 55px;
width: 45px;
height: 45px;
margin-right: 10px;
color: var(--first-icon-color);
background: var(--first-bg-color);
transition: 250ms ease-in-out;
position: relative;
}


.simple-timeline .timeline-event .timeline-icon::after {
content: url(attr);
position: absolute;
background: var(--first-bg-color);
top: 50%;
top: calc(50% - 2px);
height: 4px;
left: 43px;
width: 10px;
transition: 250ms ease-in-out;
}




.simple-timeline .timeline-event:nth-child(2n) .timeline-icon,
.simple-timeline .timeline-event:nth-child(2n) .timeline-icon::after {
background: var(--second-bg-color);
color: var(--second-icon-color);
}


.simple-timeline .timeline-event:nth-child(2n) .timeline-info {
border-color: var(--second-bg-color);
}


.simple-timeline .timeline-event:hover .timeline-info {
border-color: var(--hover-bg-color);
}


.simple-timeline .timeline-event:hover .timeline-icon,
.simple-timeline .timeline-event:hover .timeline-icon::after {
background: var(--hover-bg-color);
color: var(--hover-icon-color);
}




.simple-timeline.small-timeline .timeline-event .timeline-icon {
width: 30px;
height: 30px;
font-size: 60%;
line-height: 30px;
}


.simple-timeline.small-timeline .timeline-event .timeline-info {
font-size: 70%;
}


.simple-timeline.small-timeline .timeline-event .timeline-icon::after {
left: 30px;
}




.simple-timeline.reverse-timeline .timeline-event {
flex-direction: row-reverse;
}


.simple-timeline.reverse-timeline .timeline-event .timeline-info {
border-left: none;
border-right-style: solid;
border-right-width: 5px;
padding: 10px 15px 10px 0;
}


.simple-timeline.reverse-timeline .timeline-event .timeline-icon::after {
left: unset;
right: 29px;
}


.simple-timeline.reverse-timeline .timeline-event .timeline-icon {
margin-right: none;
margin-left: 10px;
}

Available for Grandmaster and above

Simple Timelines make heavy use of containers and sections and are therefor only available for Grandmasters and above

Articles using this feature