Add timeline component

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;

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>

src/partials/components.ejs

@@ -20,6 +20,8 @@
 <hr />
 <%- include('components/card') %>
 <hr />
+<%- include('components/timeline') %>
+<hr />
 <%- include('components/alerts') %>
 <hr />
 <%- include('components/figure') %>

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>