turned the challenges list into a modal

public/css/main.less

@@ -29,7 +29,7 @@ html {
 
 body {
   padding-top: 80px;
-  margin-bottom: 75px;
+  margin-bottom: 60px;
 }
 
 .footer {

public/js/main.js

@@ -31,8 +31,8 @@ $(document).ready(function() {
       });
   });
 
-  $('.skip-challenge').on('click', function() {
+  $('.all-challenges').on('click', function() {
-      $('#skip-dialog').modal('show');
+      $('#all-challenges-dialog').modal('show');
   });
 
   $('.next-button').on('click', function() {

views/challenges/show.jade

@@ -1,12 +1,13 @@
 extends ../layout
 block content
     .row
-        .col-sm-12.col-md-8.col-xs-12
+        .col-sm-12.col-md-12.col-xs-12
             .panel.panel-primary
-                .panel-heading #{name} (takes #{time} minutes)
+                .panel-heading.text-center #{name} (takes #{time} minutes)
                 .panel.panel-body
                     .embed-responsive.embed-responsive-16by9
                         iframe.embed-responsive-item(src='//player.vimeo.com/video/#{video}')
+                    .col-xs-12.col-sm-10.col-sm-offset-1.col-md-8.col-md-offset-2
                         h3 Steps:
                         h4
                             ol
@@ -14,8 +15,8 @@ block content
                                     li!= step
                         .btn.btn-primary.btn-big.btn-block.completed-challenge I've completed this challenge
                         .ten-pixel-break
-                    .btn.btn-success.btn-large.btn-block.skip-challenge I want to skip this challenge for now
+                        .btn.btn-success.btn-big.btn-block.all-challenges Show me all the challenges
-                #complete-dialog.modal
+                #complete-dialog.modal(tabindex='-1')
                     .modal-dialog.animated.zoomIn.fast-animation
                         .modal-content
                             .modal-header
@@ -32,16 +33,9 @@ block content
                                              = phrase
                                 - else
                                     a.animated.fadeIn.delay-2.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress
-                #skip-dialog.modal
+                #all-challenges-dialog.modal(tabindex='-1')
                     .modal-dialog.animated.zoomIn.fast-animation
                         .modal-content
                             .modal-header
                                 a.close(href='#', data-dismiss='modal', aria-hidden='true') ×
-                                .text-center
-                                    h1.animated.zoomInDown No problem.
-                                    h2.animated.zoomInDown You can retry this challenge any time.
-                                    .animated.zoomInUp.delay-1
-                                        span.landing-icon.ion-skip-forward.text-success
-                                a.animated.fadeIn.delay-2.btn.btn-lg.btn-primary.btn-block.next-button(aria-hidden='true') Take me to my next challenge
-        .col-sm-12.col-md-4.col-xs-12
                                     include ../partials/challenges

views/partials/challenges.jade

@@ -1,6 +1,3 @@
-.panel.panel-primary
-    .panel-heading Challenges
-    .panel-body
 ol(start='0')
     for challenge in challenges
         li