make pages look better by putting them into panels

public/css/styles.less

@@ -7,6 +7,7 @@
 // Scaffolding
 // -------------------------
 
+
 html {
   position: relative;
   min-height: 100%;
@@ -157,7 +158,7 @@ ul {
 }
 
 .text-success {
-  color: #5cb85c;
+  color: @brand-success;
 }
 
 .delay-half {
@@ -239,3 +240,7 @@ ul {
 .dropdown-toggle {
   margin-top: -5px;
 }
+
+.btn-social {
+  width: 250px;
+}

views/account/login.jade

@@ -1,14 +1,17 @@
 extends ../layout
-
 block content
-  .page-header
+  .panel
-    h3 Sign in to Free Code Camp with any of these social network accounts:
+      .text-center
-    a.btn.btn-block.btn-linkedin.btn-social(href='/auth/linkedin')
+        h3 Sign in to Free Code Camp with any of these social network accounts:
-        i.fa.fa-linkedin
+        a.btn.btn-lg.btn-linkedin.btn-social(href='/auth/linkedin')
-        | Sign in with LinkedIn
+            i.fa.fa-linkedin
-    a.btn.btn-block.btn-twitter.btn-social(href='/auth/twitter')
+            | Sign in with LinkedIn
-        i.fa.fa-twitter
+        .ten-pixel-break
-        | Sign in with Twitter
+        a.btn.btn-lg.btn-twitter.btn-social(href='/auth/twitter')
-//    a.btn.btn-block.btn-facebook.btn-social(href='/auth/facebook')
+            i.fa.fa-twitter
-//        i.fa.fa-facebook
+            | Sign in with Twitter
-//        | Sign in with Facebook
+      br
+      br
+    //    a.btn.btn-block.btn-facebook.btn-social(href='/auth/facebook')
+    //        i.fa.fa-facebook
+    //        | Sign in with Facebook

views/challenges/show.jade

@@ -9,7 +9,7 @@ block content
                         h3.text-center
                             span.ion-android-clock
                             span Takes about #{time}
-                        .btn.btn-success.btn-large.btn-block.start-challenge Start the challenge
+                        .btn.btn-primary.btn-large.btn-block.start-challenge Start the challenge
                     .challenge-content.hidden-element
                         .responsive-container
                             iframe(src='//player.vimeo.com/video/#{video}', frameborder='0', webkitallowfullscreen='', mozallowfullscreen='', allowfullscreen='')
@@ -18,9 +18,9 @@ block content
                             ol
                                 for step in steps
                                     li!= step
-                        .btn.btn-success.btn-large.btn-block.completed-challenge I've completed this challenge
+                        .btn.btn-primary.btn-large.btn-block.completed-challenge I've completed this challenge
                         .ten-pixel-break
-                        .btn.btn-primary.btn-large.btn-block.skip-challenge I want to skip this challenge for now
+                        .btn.btn-success.btn-large.btn-block.skip-challenge I want to skip this challenge for now
                 .panel-footer.text-center
                     span Need a break?  
                     a(href="http://blog.freecodecamp.com", target="_blank") Check out our blog
@@ -35,8 +35,8 @@ block content
                                 .text-center
                                     h1.animated.zoomInDown Nicely done!
                                     .animated.zoomInUp.delay-1
-                                        span.landing-icon.ion-checkmark-circled.text-success
+                                        span.landing-icon.ion-checkmark-circled.text-primary
-                                a.animated.fadeIn.delay-2.btn.btn-primary.btn-block.next-button(name='_csrf', value=_csrf, aria-hidden='true') Take me to my next challenge
+                                a.animated.fadeIn.delay-2.btn.btn-lg.btn-primary.btn-block.next-button(name='_csrf', value=_csrf, aria-hidden='true') Take me to my next challenge
                 #skip-dialog.modal
                     .modal-dialog.animated.zoomIn.fast-animation
                         .modal-content
@@ -46,7 +46,7 @@ block content
                                     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-primary
+                                        span.landing-icon.ion-skip-forward.text-success
-                                a.animated.fadeIn.delay-2.btn.btn-primary.btn-block.next-button(aria-hidden='true') Take me to my next challenge
+                                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/home.jade

@@ -100,6 +100,7 @@ block content
                 h2 Does Free Code Camp have an application process?
                 ul
                     p Unlike most bootcamps, anyone can study at Free Code Camp. We're not going to tell you that you can't become a software engineer. We believe the only person who should be able to tell you that is you. If you perservere, and keep working through our challenges and nonprofits' projects, you will become an employable software engineer.
-    br
+                br
-    .text-center
+                .text-center
-        a.btn.btn-cta.btn-primary(href="/login") Sign in now to start coding (it's free)
+                    a.btn.btn-cta.btn-primary(href="/login") Sign in now to start coding (it's free)
+                br

views/layout.jade

@@ -2,6 +2,7 @@ doctype html
 html
   head
     script(src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js")
+    link(href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext', rel='stylesheet', type='text/css')
     include partials/meta
     title #{title} | Free Code Camp