From 4290b1115c54f6f5533778f00390e5b0eea97a64 Mon Sep 17 00:00:00 2001
From: Eric Clark <eclark@theinfantree.com>
Date: Tue, 23 Oct 2018 11:43:17 -0400
Subject: [PATCH] Add 'entry-complete' class to signify that a milestone has
 been completed, allowing option for latest entry to appear in progress or
 complete.

---
 README.md         | 2 +-
 c/project-hub.css | 5 +++--
 index.html        | 4 ++--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 5a325df..6c42f99 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ Inspired by [Brad Frost](http://bradfrostweb.com/)—who I guess was [inspired b
 Here are a few details on what I thought needed improvement:
 
 - **Seeing the future.** Good Project Hubs document the past in a way that makes it easy for a client—or you—to keep track of the process. However, I&rsquo;ve started to pre-populate the entire process for my clients so that they know not only what&rsquo;s happened but also what&rsquo;s coming up.
-- **Focusing on a moment in time.** Though this Project Hub lets you see an  entire project timeline, it&rsquo;s still really valuable to know where you currently are in the process. By default, each milestone is labeled with a class name of `entry-future`, which keeps the upcoming milestone grayed out. Once you&rsquo;ve completed a milestone, remove this class name; that will darken the text and place a checkmark next to it. Lastly, add a class of `entry-latest` to the latest milestone to auto-scroll the page. (You can also change this class name on line 18 of the JavaScript file.)
+- **Focusing on a moment in time.** Though this Project Hub lets you see an  entire project timeline, it&rsquo;s still really valuable to know where you currently are in the process. By default, each milestone is labeled with a class name of `entry-future`, which keeps the upcoming milestone grayed out. Once you&rsquo;ve completed a milestone, remove this class name; that will darken the text. Add a class of 'entry-complete' to place a checkmark next to it. Add a class of `entry-latest` to the latest milestone to auto-scroll the page. (You can also change this class name on line 18 of the JavaScript file.)
 
 You can see the finished result here: [project-hub.superfriend.ly](http://project-hub.superfriend.ly/)
 
diff --git a/c/project-hub.css b/c/project-hub.css
index cd8381a..0e0f0a6 100644
--- a/c/project-hub.css
+++ b/c/project-hub.css
@@ -128,10 +128,11 @@ sub, sup { line-height: 0; }
 	.entry-future .entry-title { color: #9e9e9e; }
 	.entry-title:before { content: ''; display: block; width: 20px; height: 20px; border: 2px solid #000; border-radius: 20px; background: #000; position: absolute; left: -43px; top: 0.95em; }
 	.entry-future .entry-title:before { border-color: #c2c2c2; background: #fff; }
-	.entry-title:after { content: ''; display: block; position: absolute; top: 1.1em; left: -1.27em; width: 12px; height: 10px; background: transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTEuMzE0cHgiIGhlaWdodD0iOS4xOTJweCIgdmlld0JveD0iMCAwIDExLjMxNCA5LjE5MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTEuMzE0IDkuMTkyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iOS4xOTIsMCA0LjI0Myw0Ljk1IDIuMTIxLDIuODI4IDAsNC45NSAyLjEyMSw3LjA3MSA0LjI0Myw5LjE5MiA2LjM2NCw3LjA3MSAxMS4zMTQsMi4xMjEgIi8+DQo8L3N2Zz4NCg==) no-repeat 0 0;
-	}
+	
 	.entry-date { font-style: italic; color: #bababa; }
 	.entry-future .entry-date { color: #ccc; }
+	.entry-complete .entry-title:after { content: ''; display: block; position: absolute; top: 1.1em; left: -1.27em; width: 12px; height: 10px; background: transparent url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTEuMzE0cHgiIGhlaWdodD0iOS4xOTJweCIgdmlld0JveD0iMCAwIDExLjMxNCA5LjE5MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTEuMzE0IDkuMTkyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iOS4xOTIsMCA0LjI0Myw0Ljk1IDIuMTIxLDIuODI4IDAsNC45NSAyLjEyMSw3LjA3MSA0LjI0Myw5LjE5MiA2LjM2NCw3LjA3MSAxMS4zMTQsMi4xMjEgIi8+DQo8L3N2Zz4NCg==) no-repeat 0 0;
+	}
 
 
 
diff --git a/index.html b/index.html
index 235c79c..48622a6 100644
--- a/index.html
+++ b/index.html
@@ -117,7 +117,7 @@ <h1 class="entry-title">Design Round 3</h1>
 
 
 
-            <article class="entry">
+            <article class="entry entry-complete">
                 <h1 class="entry-title">Design Round 2 a long title of this entry</h1>
                 <p class="entry-date">June 4, 2014</p>
 
@@ -133,7 +133,7 @@ <h1 class="entry-title">Design Round 2 a long title of this entry</h1>
 
 
 
-            <article class="entry">
+            <article class="entry entry-complete">
                 <h1 class="entry-title">Design Round 1</h1>
                 <p class="entry-date">June 4, 2014</p>