From 34f6575945f37ec8d55365f6a581472c4bee2148 Mon Sep 17 00:00:00 2001
From: Kenneth Ormandy <kenneth@chloi.io>
Date: Tue, 21 Jul 2015 19:30:11 -0700
Subject: [PATCH] Adds initial timeline test

---
 _templates/about.hbs |  28 ++++++
 src/css/_shame.scss  | 200 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 228 insertions(+)

diff --git a/_templates/about.hbs b/_templates/about.hbs
index 2768031..f7b90f6 100644
--- a/_templates/about.hbs
+++ b/_templates/about.hbs
@@ -67,6 +67,34 @@
       --}}
     {{/each}}
   </ul>
+
+  <ul class="timeline u-listBasic">
+  	<li class="timeline-block">
+  		<div class="timeline-img">
+  			<img src="https://placehold.it/300x300" alt="Picture">
+  		</div> <!-- cdtimeline-img -->
+  		<div class="timeline-content">
+  			<h2>Title of section 1</h2>
+  			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
+        <a href="#">Read the blog post…</a>
+        <time datetime="">Jan 14</time>
+  			{{!-- <a href="#0" class="button button--small">Read more</a> --}}
+  		</div>
+  	</li>
+    <li class="timeline-block">
+      <div class="timeline-img">
+        <img src="https://placehold.it/300x300" alt="Picture">
+      </div>
+      <div class="timeline-content">
+        <h2>Title of section 2</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
+        <a href="#">Read the blog post…</a>
+        <time datetime="">Jan 14</time>
+        {{!-- <a href="#0" class="button button--small">Read more</a> --}}
+      </div>
+    </li>
+  </ul>
+
 </div>
 
 {{> footer }}
diff --git a/src/css/_shame.scss b/src/css/_shame.scss
index 2db5573..8b3aeb9 100644
--- a/src/css/_shame.scss
+++ b/src/css/_shame.scss
@@ -26,3 +26,203 @@
 tbody {
   font-feature-settings: "kern" 1, "liga" 0, "calt" 1, "pnum" 0, "tnum" 1, "onum" 1, "lnum" 0, "zero" 0;
 }
+
+// Timeline
+//
+// Based on [this demo](http://codyhouse.co/gem/vertical-timeline/).
+//
+// No styleguide reference.
+.timeline {
+  position: relative;
+  padding: 2em 0;
+  margin-top: 2em;
+  margin-bottom: 2em;
+  @include media($mid) {
+    .timeline {
+      margin-top: 3em;
+      margin-bottom: 3em;
+    }
+  }
+  &:before {
+    // The vertical line
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 1em;
+    height: 100%;
+    width: 0.25em;
+    background: $gray;
+    @include media($mid) {
+      left: 50%;
+      margin-left: -2px; // Why?
+    }
+  }
+}
+
+.timeline-block {
+  position: relative;
+  margin: 2em 0;
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+  &:first-child {
+    margin-top: 0;
+  }
+  &:last-child {
+    margin-bottom: 0;
+  }
+  @include media($mid) {
+    margin: 4em 0;
+    &:first-child {
+      margin-top: 0;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.timeline-img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  box-shadow: 0 0 0 4px white, 0 3px 0 4px rgba(0, 0, 0, 0.05);
+  background-color: $red;
+  img {
+    display: block;
+    width: 24px;
+    height: 24px;
+    position: relative;
+    left: 50%;
+    top: 50%;
+    margin-left: -12px;
+    margin-top: -12px;
+  }
+}
+
+@media only screen and (min-width: 1170px) {
+  .timeline-img {
+    width: 60px;
+    height: 60px;
+    left: 50%;
+    margin-left: -30px;
+  }
+}
+
+.timeline-content {
+  position: relative;
+  margin-left: 60px;
+  background: white;
+  border-radius: 0.25em;
+  padding: 1em;
+  box-shadow: 0 3px 0 #d7e4ed;
+}
+
+.timeline-content:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+// .timeline-content h2 {
+//   color: #303e49;
+// }
+// .timeline-content p, .timeline-content .read-more, .timeline-content .date {
+//   font-size: 13px;
+//   font-size: 0.8125rem;
+// }
+.timeline-content .read-more, .timeline-content .date {
+  display: inline-block;
+}
+.timeline-content p {
+  margin: 1em 0;
+  line-height: 1.6;
+}
+.timeline-content .read-more {
+  float: right;
+  padding: .8em 1em;
+  background: #acb7c0;
+  color: white;
+  border-radius: 0.25em;
+}
+.no-touch .timeline-content .read-more:hover {
+  background-color: #bac4cb;
+}
+.timeline-content .date {
+  float: left;
+  padding: .8em 0;
+  opacity: .7;
+}
+.timeline-content::before {
+  content: "";
+  position: absolute;
+  top: 16px;
+  right: 100%;
+  height: 0;
+  width: 0;
+  border: 7px solid transparent;
+  border-right: 7px solid white;
+}
+
+@media only screen and (min-width: 768px) {
+  .timeline-content h2 {
+    font-size: 20px;
+    font-size: 1.25rem;
+  }
+  .timeline-content p {
+    font-size: 16px;
+    font-size: 1rem;
+  }
+  .timeline-content .read-more, .timeline-content .date {
+    font-size: 14px;
+    font-size: 0.875rem;
+  }
+}
+@media only screen and (min-width: 1170px) {
+  .timeline-content {
+    margin-left: 0;
+    padding: 1.6em;
+    width: 45%;
+  }
+  .timeline-content::before {
+    top: 24px;
+    left: 100%;
+    border-color: transparent;
+    border-left-color: white;
+  }
+  .timeline-content .read-more {
+    float: left;
+  }
+  .timeline-content .date {
+    position: absolute;
+    width: 100%;
+    left: 122%;
+    top: 6px;
+    font-size: 16px;
+    font-size: 1rem;
+  }
+
+  .timeline-block:nth-child(even) .timeline-content {
+    float: right;
+  }
+  .timeline-block:nth-child(even) .timeline-content::before {
+    top: 24px;
+    left: auto;
+    right: 100%;
+    border-color: transparent;
+    border-right-color: white;
+  }
+  .timeline-block:nth-child(even) .timeline-content .read-more {
+    float: right;
+  }
+  .timeline-block:nth-child(even) .timeline-content .date {
+    left: auto;
+    right: 122%;
+    text-align: right;
+  }
+}