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’ve started to pre-populate the entire process for my clients so that they know not only what’s happened but also what’s coming up. -- **Focusing on a moment in time.** Though this Project Hub lets you see an entire project timeline, it’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’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’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’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 @@

Design Round 3

-
+

Design Round 2 a long title of this entry

@@ -133,7 +133,7 @@

Design Round 2 a long title of this entry

-
+

Design Round 1