Robert Birming

Timeline for Bear Blog

Bear timeline

Do you want to present your blogging timeline in a stylish way? Or perhaps have a unique style for your micro thoughts? Or keep a changelog for documenting your blog’s development?

Say hello to the latest cub in the Bearming theme family: Timeline.

Here’s an example with the time-focused timeless song In the Year 2525 (further down the page, you’ll find instructions on how to implement it on your blog):

Just like the other Bearming theme add-ons, I wanted to keep this one simple and make it work with Markdown. Easier said than done. Anyway, this is what I came up with…

Instructions

The timeline uses an unordered list, and the list is wrapped around a div (a “section”) with the class timeline. For the title of each ’timestamp’, a heading 4 tag is used. Example:

<div class="timeline">

* #### One time
Once upon a time…

* #### Another time
Another point in time…

</div>

Then, in your theme, add the following styles:

/* Timeline */
.timeline {
  margin: 40px 0;
}
.timeline ul {
  padding-left: 20px;
  border-left: 6px solid var(--accent-color);
}
.timeline li {
  margin: 0 0 25px;
  padding: 10px 25px;
  list-style: none;
  background: var(--accent-color);
  border-radius: 10px;
}
.timeline h4 {
  position: relative;
  margin: 10px 0 0;
  padding: 8px 15px 6px;
  font-size: .8em;
  text-align: center;
  text-transform: uppercase;
  background: var(--background-color);
  border-radius: 7px;
}
.timeline h4::before {
  position: absolute;
  top: 10px;
  left: -55px;
  content: "";
  width: 15px;
  height: 15px;
  border: 5px solid var(--text-color);
  border-radius: 999px;
}

That’s it! I hope you find it useful.

Live examples