improve challenge map look

public/css/main.less

@@ -916,9 +916,18 @@ iframe.iphone {
   padding-bottom: 10px;
 }
 
-.italic {
+.faded {
-  font-style: italic;
+  opacity: 0.5;
 }
+
+.same-line {
+  display: inline-block;
+}
+
+.padded-ionic-icon {
+  padding-top: 5px;
+}
+
 //uncomment this to see the dimensions of all elements outlined in red
 //* {
 //  border-color: red;

public/js/main.js

@@ -26,7 +26,7 @@ $(document).ready(function() {
   $('.checklist-element').each(function() {
     var checklistElementId = $(this).attr('id');
     if(!!localStorage[checklistElementId]) {
-      $(this).children('.step-text').addClass('italic');
+      $(this).children('.step-text').addClass('faded');
       $(this).children().children('input').trigger('click');
     }
   });
@@ -45,13 +45,13 @@ $(document).ready(function() {
   $('.challenge-list-checkbox').on('change', function() {
     var checkboxId = $(this).parent().parent().attr('id');
     if ($(this).is(":checked")) {
-      $(this).parent().parent().children('.step-text').addClass('italic');
+      $(this).parent().parent().children('.step-text').addClass('faded');
       if (!localStorage || !localStorage[checkboxId]) {
         localStorage[checkboxId] = true;
       }
     }
     if (!$(this).is(":checked")) {
-      $(this).parent().parent().children('.step-text').removeClass('italic');
+      $(this).parent().parent().children('.step-text').removeClass('faded');
       if (localStorage[checkboxId]) {
         localStorage.removeItem(checkboxId);
       }

seed_data/coursewares.json

@@ -662,7 +662,7 @@
       "<span class='text-info'>Hint:</span> Here's an example call to Twitch.tv's JSON API: <code>https://api.twitch.tv/kraken/streams/freecodecamp</code>.",
       "<span class='text-info'>Hint:</span> The relevant documentation about this API call is here: <a href='https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel' target='_blank'>https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel</a>.",
       "<span class='text-info'>Hint:</span> Here's an array of the Twitch.tv usernames of people who regularly stream coding: <code>[\"freecodecamp\", \"storbeck\", \"terakilobyte\", \"habathcx\",\"notmichaelmcdonald\",\"RobotCaleb\",\"comster404\",\"brunofin\",\"thomasballinger\",\"joe_at_underflow\",\"noobs2ninjas\",\"mdwasp\",\"beohoff\",\"xenocomagain\"]</code>",
-      "When you are finished, click the \"I've completed this challenge\" button and include a link to your Codepen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
+      "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
       "If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>."
     ],
     "challengeType": 3,
@@ -681,7 +681,7 @@
       "Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
       "<span class='text-info'>User Story:</span> As a user, I can click a button to show me a new random quote.",
       "<span class='text-info'>Bonus User Story:</span> As a user, I can press a button to tweet out a quote.",
-      "When you are finished, click the \"I've completed this challenge\" button and include a link to your Codepen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
+      "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
       "If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>."
     ],
     "challengeType": 3,
@@ -704,7 +704,7 @@
       "<span class='text-info'>Bonus User Story:</span> As a user, I can push a button to toggle between Fahrenheit and Celsius.",
       "<span class='text-info'>Hint:</span> Get a zipcode's weather (in Kelvin) at <code>http://api.openweathermap.org/data/2.5/weather?q=99705</code>.",
       "<span class='text-info'>Hint:</span> Get your current user's zipcode (based on their IP address) with this line of jQuery: <code>$.get(\"http://ipinfo.io\", function(response) {}, \"jsonp\");</code>",
-      "When you are finished, click the \"I've completed this challenge\" button and include a link to your Codepen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
+      "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
       "If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>."
     ],
     "challengeType": 3,
@@ -726,7 +726,7 @@
       "<span class='text-info'>User Story:</span> As a user, I can click on a link on that post and be taken to the post's discussion page.",
       "<span class='text-info'>Bonus User Story:</span> As a user, I can see how many upvotes each story has.",
       "<span class='text-info'>Hint:</span> Here's the Camper News Hot Stories API endpoint: <code>http://www.freecodecamp.com/stories/hotStories</code>.",
-      "When you are finished, click the \"I've completed this challenge\" button and include a link to your Codepen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
+      "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
       "If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>."
     ],
     "challengeType": 3,
@@ -746,7 +746,7 @@
       "<span class='text-info'>User Story:</span> As a user, I can start a 25 minute pomodoro, and the timer will go off once 25 minutes have elapsed.",
       "<span class='text-info'>Bonus User Story:</span> As a user, I can reset the clock for my next pomodoro.",
       "<span class='text-info'>Bonus User Story:</span> As a user, I can customize the length of each pomodoro.",
-      "When you are finished, click the \"I've completed this challenge\" button and include a link to your Codepen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
+      "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
       "If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>."
     ],
     "challengeType": 3,
@@ -766,7 +766,7 @@
       "<span class='text-info'>User Story:</span> As a user, I can add, subtract, multiply and divide two numbers.",
       "<span class='text-info'>Bonus User Story:</span> I can clear the input field with a clear button.",
       "<span class='text-info'>Bonus User Story:</span> I can keep chaining mathematical operations together until I hit the clear button and it will tell me the correct output.",
-      "When you are finished, click the \"I've completed this challenge\" button and include a link to your Codepen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
+      "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
       "If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>."
     ],
     "challengeType": 3,
@@ -774,7 +774,7 @@
   },
   {
     "_id": "bd7158d8c442eddfaeb5bd1c",
-    "name": "Zipline: ",
+    "name": "Zipline: Build a Tic Tac Toe Game",
     "difficulty": 1.07,
     "challengeSeed": "123488494",
     "description": [
@@ -787,7 +787,7 @@
       "<span class='text-info'>Bonus User Story:</span> As a user, my game will reset as soon as it's over so I can play again.",
       "<span class='text-info'>Bonus User Story:</span> As a user, I can choose whether I want to play as X or O.",
       "<span class='text-info'>Hint:</span> Here's an example call to Twitch.tv's JSON API: <code>https://api.twitch.tv/kraken/streams/freecodecamp</code>.",
-      "When you are finished, click the \"I've completed this challenge\" button and include a link to your Codepen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
+      "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
       "If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.<a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>."
     ],
     "challengeType": 3,

views/challengeMap/show.jade

@@ -6,66 +6,98 @@ block content
                 h1 Challenge Map
             .panel-body
                 .row
-                    .col-xs-12.col-sm-12.col-md-8.col-md-offset-2
+                    .col-xs-12.col-sm-12.col-md-10.col-md-offset-2
-                        h3 You must complete all of these challenges before you can start working on nonprofit projects.
+                        h3 Complete all of these challenges from top to bottom.
-                        h3 You should complete these in order from top to bottom.
+                        h3 Then we'll assign you to your first nonprofit project.
                         h2
                             span.fa.fa-flag
-                            |   Waypoints (web development lessons)
+                            |   Waypoints (200 hours of lessons)
 
                         .col-xs-12
                             h3.negative-15
                                 ol
                                     for waypoint in waypoints
                                         if completedCoursewareList.indexOf(waypoint._id) > -1
-                                            li.strikethrough
+                                            .row
+                                                .hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center
+                                                .col-xs-12.col-sm-9.col-md-10
+                                                    li.faded
                                                         a(href="/challenges/#{waypoint.name}")= waypoint.name
+
                                         else
+                                            .row
+                                                .hidden-xs.col-sm-3.col-md-2
+                                                    span
+                                                .col-xs-12.col-sm-9.col-md-10
                                                     li
                                                         a(href="/challenges/#{waypoint.name}")= waypoint.name
                         h2
                             span.ion-bonfire
-                            |   Bonfires (algorithm practice)
+                            |   Bonfires (200 hours of JavaScript algorithm practice)
                         .col-xs-12
                             h3.negative-15
                                 ol
                                     for bonfire in bonfires
                                         if completedBonfireList.indexOf(bonfire._id) > -1
-                                            li.strikethrough
+                                            .row
+                                                .hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center
+                                                .col-xs-12.col-sm-9.col-md-10
+                                                    li.faded
                                                         a(href="/bonfires/#{bonfire.name}")= bonfire.name
                                         else
+                                            .row
+                                                .hidden-xs.col-sm-3.col-md-2
+                                                    span
+                                                .col-xs-12.col-sm-9.col-md-10
                                                     li
                                                         a(href="/bonfires/#{bonfire.name}")= bonfire.name
                         h2
                             span.fa.fa-angle-double-right
-                            |   Ziplines (front end development practice)
+                            |   Ziplines (200 hours of front end development)
                         .col-xs-12
                             h3.negative-15
                                 ol
                                     for zipline in ziplines
                                         if completedCoursewareList.indexOf(zipline._id) > -1
-                                            li.strikethrough
+                                            .row
+                                                .hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center
+                                                .col-xs-12.col-sm-9.col-md-10
+                                                    li.faded
                                                         a(href="/challenges/#{zipline.name}")= zipline.name
                                         else
+                                            .row
+                                                .hidden-xs.col-sm-3.col-md-2
+                                                    span
+                                                .col-xs-12.col-sm-9.col-md-10
                                                     li
                                                         a(href="/challenges/#{zipline.name}")= zipline.name
                         h2
                             span.fa.fa-level-down
-                            |   Basejumps (full stack development practice)
+                            |   Basejumps (200 hours of full stack development)
                         .col-xs-12
                             h3.negative-15
                                 ol
                                     for basejump in basejumps
                                         if completedCoursewareList.indexOf(basejump._id) > -1
-                                            li.strikethrough
+                                            .row
+                                                .hidden-xs.col-sm-3.col-md-2.text-primary.ion-checkmark-circled.padded-ionic-icon.text-center
+                                                .col-xs-12.col-sm-9.col-md-10
+                                                    li.faded
                                                         a(href="/challenges/#{basejump.name}")= basejump.name
                                         else
+                                            .row
+                                                .hidden-xs.col-sm-3.col-md-2
+                                                    span
+                                                .col-xs-12.col-sm-9.col-md-10
                                                     li
                                                         a(href="/challenges/#{basejump.name}")= basejump.name
                         h2
-                            span.ion-ios-heart
+                            span.ion-ios-heart   Nonprofit Projects (800 hours of real-world experience)
-                            |   Nonprofit Projects
                             h3.negative-15
                                 ul
+                                    .row
+                                        .hidden-xs.col-sm-3.col-md-2
+                                            span
+                                        .col-xs-12.col-sm-9.col-md-10
                                             li
                                                 a(href="/nonprofits/directory") Browse our nonprofit projects