From 5f9c04fe7f9bf1ca9938c1710fe8c129bef05287 Mon Sep 17 00:00:00 2001
From: Ben <git@othyn.com>
Date: Mon, 15 Jul 2019 18:48:21 +0100
Subject: [PATCH] Add timeline component

---
 lib/terminal.css                     | 33 ++++++++++++++++++++++++++++
 src/partials/aside.ejs               |  1 +
 src/partials/components.ejs          |  2 ++
 src/partials/components/timeline.ejs | 22 +++++++++++++++++++
 4 files changed, 58 insertions(+)
 create mode 100644 src/partials/components/timeline.ejs

diff --git a/lib/terminal.css b/lib/terminal.css
index af716c7..9e86849 100644
--- a/lib/terminal.css
+++ b/lib/terminal.css
@@ -764,6 +764,39 @@ select:-webkit-autofill:focus {
   padding: var(--global-space);
 }
 
+.terminal-timeline {
+    position: relative;
+    padding-left: 70px;
+}
+
+.terminal-timeline:before {
+        content: ' ';
+        background: var(--secondary-color);
+        display: inline-block;
+        position: absolute;
+        left: 35px;
+        width: 2px;
+        height: 100%;
+        z-index: 400;
+}
+
+.terminal-timeline .terminal-card {
+    margin-bottom: 25px;
+}
+
+.terminal-timeline .terminal-card:before {
+    content: ' ';
+    background: var(--invert-font-color);
+    border: 2px solid var(--secondary-color);
+    display: inline-block;
+    position: absolute;
+    margin-top: 25px;
+    left: 26px;
+    width: 15px;
+    height: 15px;
+    z-index: 400;
+}
+
 .terminal-alert {
   color: var(--font-color);
   padding: 1em;
diff --git a/src/partials/aside.ejs b/src/partials/aside.ejs
index 6fd2c76..9a6a0ae 100644
--- a/src/partials/aside.ejs
+++ b/src/partials/aside.ejs
@@ -18,6 +18,7 @@
       <li><a href="#Forms">Forms</a></li>
       <li><a href="#Progress">Progress Bar</a></li>
       <li><a href="#Cards">Cards</a></li>
+      <li><a href="#Timeline">Timeline</a></li>
       <li><a href="#Alerts">Alerts</a></li>
       <li><a href="#Media">Media</a></li>
       <li><a href="#Figure">Image with caption</a></li>
diff --git a/src/partials/components.ejs b/src/partials/components.ejs
index 0c9d0ab..ff135d9 100644
--- a/src/partials/components.ejs
+++ b/src/partials/components.ejs
@@ -20,6 +20,8 @@
 <hr />
 <%- include('components/card') %>
 <hr />
+<%- include('components/timeline') %>
+<hr />
 <%- include('components/alerts') %>
 <hr />
 <%- include('components/figure') %>
diff --git a/src/partials/components/timeline.ejs b/src/partials/components/timeline.ejs
new file mode 100644
index 0000000..faa5679
--- /dev/null
+++ b/src/partials/components/timeline.ejs
@@ -0,0 +1,22 @@
+<section>
+  <header><h2 id="Timeline">Timeline</h2></header>
+  <div class="terminal-timeline">
+    <div class="terminal-card">
+      <header>Card Title</header>
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas
+        ex vero enim in doloribus officiis ullam vel nam esse sapiente velit
+        incidunt. Eaque quod et, aut maiores excepturi sint.
+      </div>
+    </div>
+    <div class="terminal-card">
+      <header>Card Title</header>
+      <div>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas
+        ex vero enim in doloribus officiis ullam vel nam esse sapiente velit
+        incidunt. Eaque quod et, aut maiores excepturi sint.
+      </div>
+    </div>
+  </div>
+  <br />
+</section>