timeline shortcode

sass/css/_timeline.scss

@@ -0,0 +1,67 @@
+#timeline-content {
+  margin-top: 50px;
+  text-align: center;
+}
+/* Timeline */
+.timeline {
+  border-left: 4px solid var(--hover-color);
+  border-bottom-right-radius: 4px;
+  border-top-right-radius: 4px;
+  background: var(--code-bg-color);
+
+  margin: auto;
+  position: relative;
+  padding: 50px;
+  list-style: none;
+  text-align: left;
+  font-weight: 100;
+  max-width: 60%;
+}
+
+.timeline .event {
+  border-bottom: 1px dashed var(--invis-color);
+  padding-bottom: 25px;
+  margin-bottom: 50px;
+  position: relative;
+  list-style: none;
+  line-height: 1.5em;
+  font-size: 1.2em;
+  font-weight: 100;
+  h3 {
+    font-weight:500;
+  }
+}
+.timeline .event:last-of-type {
+  padding-bottom: 0;
+  margin-bottom: 0;
+  border: none;
+}
+.timeline .event:before,
+.timeline .event:after {
+  position: absolute;
+  display: block;
+  top: 0;
+}
+.timeline .event:before {
+  left: -217.5px;
+  color: var(--invis-color);
+  content: attr(data-date);
+  text-align: right;
+  font-weight: 100;
+  font-size: 0.9em;
+  min-width: 120px;
+  font-family: 'Saira', sans-serif;
+  ul, li {
+    list-style: none;
+  }
+}
+.timeline .event:after {
+  box-shadow: 0 0 0 4px var(--hover-color);
+  left: -57.85px;
+  background: var(--code-bg-color);
+  border-radius: 50%;
+  height: 11px;
+  width: 11px;
+  content: "";
+  top: 5px;
+}

sass/css/_vars.css

@@ -0,0 +1,32 @@
+[color-theme="light"] {
+  --bg-color: #f6f8fa; 
+  --bg-sec-color: #d6d7d9;
+  --font-color: #333;
+  --hover-color: #4078c0;
+  --invis-color: rgb(131, 141, 158);
+  --pagination-hover: rgba(64,120,192, .4);
+  --header-bg: #ebeced;
+
+  --code-bg-color: #eeeeee; 
+  --code-fg-color: #383a42;
+  --code-kw-color: #0184bc;
+  --code-string-color:#50a14f;
+  --code-comment-color:#91a3b5; 
+}
+
+[color-theme="dark"] {
+  --bg-color: #24292e;
+  --bg-sec-color: #191d20;
+  --font-color: #fafbfc;
+  --hover-color: #4078c0;
+  --invis-color: rgba(164, 178, 197, 0.3);
+  --pagination-hover: rgba(64,120,192, .4);
+  --header-bg: #2a3036;
+
+  --img-bg-color: #6f7f8e;
+  --code-bg-color: #2b3137; 
+  --code-fg-color: #dcdfe4;
+  --code-kw-color: #61afef;
+  --code-string-color:#98c379;
+  --code-comment-color:#535d68; 
+}

templates/shortcodes/timeline.html

@@ -0,0 +1,12 @@
+
+{% set dt = load_data(literal = body, format="json")%}
+  <div id="timeline-content">
+    <ul class="timeline">
+        {% for d in dt %}
+      <li class="event" data-date="{{ d.date }}">
+        <h3>{{ d.title }}</h3>
+        <p>{{ d.body }}</p>
+      </li>
+      {% endfor %}
+    </ul>
+  </div>