Minor aesthetic changes

client/less/challenge.less

@@ -1,39 +1,114 @@
-.bonfire-instructions h4 {
+.challenge-step-description {
-  margin-bottom: 0;
+  font-size: 1.5em;
+  text-align: center;
+}
+.challenge-step-counter {
+  font-size: 20px;
+  line-height: 44px;
 }
 
-.bonfire-instructions blockquote {
+.challenge-instructions-title {
-  font-size: 90%;
+  margin-top: 0;
-  font-family: @font-family-monospace;
+  i {
-  color: @code-color;
+    margin-left: 5px;
-  background-color: #fffbe5;
+    line-height: 20px;
-  border-radius: @border-radius-base;
+  }
-  border: 1px solid @pre-border-color;
-  white-space: pre;
-  padding: 5px 10px;
-  margin-bottom: 10px;
-  margin-top: -10px;
-  overflow: auto;
 }
 
-.bonfire-instructions dfn {
+.challenge-instructions {
-  font-family: @font-family-monospace;
+  margin-bottom: 5px;
-  color: @code-color;
+  h4 {
-  background-color: @code-bg;
+    margin-bottom: 0;
-  border-radius: @border-radius-base;
+  }
+  blockquote {
+    font-size: 90%;
+    font-family: @font-family-monospace;
+    color: @code-color;
+    background-color: #fffbe5;
+    border-radius: @border-radius-base;
+    border: 1px solid @pre-border-color;
+    white-space: pre;
+    padding: 5px 10px;
+    margin-bottom: 10px;
+    margin-top: -10px;
+    overflow: auto;
+  }
+  dfn {
+    font-family: @font-family-monospace;
+    color: @code-color;
+    background-color: @code-bg;
+    border-radius: @border-radius-base;
+  }
+  & a, #MDN-links a {
+    color: #31708f;
+  }
+  & a::after, #MDN-links a::after {
+    font-size: 70%;
+    font-family: FontAwesome;
+    content: " \f08e";
+  }
+  ol {
+    font-size: 16px;
+  }
 }
 
-.bonfire-instructions a, #MDN-links a {
+#testSuite {
-  color: #31708f;
+  margin-top: 10px;
+  > div >.row {
+    margin: 0!important;
+  }
 }
 
-.bonfire-instructions a::after, #MDN-links a::after {
+.test-output {
-  font-size: 70%;
+  font-size: 15px;
-  font-family: FontAwesome;
+  font-family: "Ubuntu Mono";
-  content: " \f08e";
+  margin-top: 8px;
+  line-height:20px;
 }
 
-.bonfire-instructions ol {
+.grayed-out-test-output {
-  font-size: 16px;
+  color: @gray-light;
 }
 
+.big-error-icon {
+  font-size: 30px;
+  color: @brand-danger;
+  top:50%;
+}
+
+.big-success-icon {
+  font-size: 30px;
+  color: @brand-primary;
+}
+
+iframe.iphone {
+  border: none;
+  @media(min-width: 992px) {
+    width: 280px;
+    height: 500px;
+    position: absolute;
+    top: 70px;
+    right: 35px;
+    overflow-y: scroll;
+  }
+  @media(max-width: 991px) {
+    width: 100%;
+    border-radius: 5px;
+    overflow-y: visible;
+    height: 500px;
+  }
+  @media (min-width: 1200px) and (max-width: 1250px){
+    right: 22px;      
+  }
+}
+
+// To adjust right margin, negative values bring the image closer to the edge of the screen
+.iphone-position {
+  position: absolute;
+  top: -50px;
+  z-index: -1;
+  right: -195px;
+  @media (min-width: 1200px) and (max-width: 1250px){
+    right: -207px;      
+  }
+}

client/less/lib/bootstrap/variables.less

@@ -348,7 +348,7 @@
 
 // Basics of a navbar
 @navbar-height:                    50px;
-@navbar-margin-bottom:             @line-height-computed;
+@navbar-margin-bottom:             @line-height-computed+10px;
 @navbar-border-radius:             @border-radius-base;
 @navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
 @navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);

client/less/main.less

@@ -65,7 +65,7 @@ body.top-and-bottom-margins {
 }
 
 body.no-top-and-bottom-margins {
-  margin: 70px 20px 0px 20px;
+  margin: 75px 20px 0px 20px;
 }
 
 h1, h2 {
@@ -655,10 +655,6 @@ thead {
   font-size: 15px;
 }
 
-.bonfire-instructions {
-  margin-bottom: 5px;
-}
-
 .graph-rect {
   fill: #ddd !important
 }
@@ -695,22 +691,6 @@ form.code span {
   overflow-y: auto;
 }
 
-.big-error-icon {
-  font-size: 40px;
-  color: @brand-danger;
-}
-
-.big-success-icon {
-  font-size: 40px;
-  color: @brand-primary;
-}
-
-.test-output {
-  font-size: 15px;
-  font-family: "Ubuntu Mono";
-  margin-top: 8px;
-}
-
 #mainEditorPanel .panel-body {
   padding-bottom: 0px;
 }
@@ -726,41 +706,6 @@ div.CodeMirror-scroll {
 .cm-s-monokai.CodeMirror {
   border-radius: 5px;
 }
-.bonfire-flames  {
- margin-top: -20px;
- margin-bottom: -2px;
-}
-
-.bonfire-top {
-  margin-top: -30px;
-}
-
-iframe.iphone {
-  border: none;
-  @media(min-width: 992px) {
-    width: 280px;
-    height: 500px;
-    position: absolute;
-    top: 70px;
-    right: 25px;
-    overflow-y: scroll;
-  }
-  @media(max-width: 991px) {
-    width: 100%;
-    border-radius: 5px;
-    overflow-y: visible;
-    height: 500px;
-  }
-}
-
-// To adjust right margin, negative values bring the image closer to the edge of the screen
-.iphone-position {
-  position: absolute;
-  top: -50px;
-  right: -205px;
-  z-index: -1;
-}
-
 .courseware-height {
   min-height: 650px;
 }
@@ -867,7 +812,7 @@ iframe.iphone {
 }
 
 .button-spacer {
-  padding: 5px 0 2px 0;
+  padding: 5px 0;
 }
 
 .spacer {
@@ -1023,10 +968,6 @@ hr {
   border-radius: 5px;
 }
 
-.grayed-out-test-output {
-  color: @gray-light;
-}
-
 code {
   padding: 0;
 }
@@ -1064,10 +1005,6 @@ code {
   shape-rendering: crispEdges;
 }
 
-#testSuite > div >.row {
-  margin: 0!important;
-}
-
 .gitter-chat-embed {
  z-index: 20000 !important;
 }

client/less/map.less

@@ -132,6 +132,9 @@
   position:relative;
   #nested {
     margin:0 15px;
+    @media (max-width: 400px) {
+    margin:0;
+    }
   }
   a:focus {
       text-decoration: none;
@@ -170,7 +173,10 @@
     p {
       text-indent: -15px;
       margin-left: 60px;
-      padding-right: 20px
+      padding-right: 20px;
+      @media (max-width: 400px) {
+          margin-left:30px;
+      }
     }
   }  
 

server/views/challenges/showBonfire.jade

@@ -9,14 +9,14 @@ block content
             .scroll-locker(id = "scroll-locker")
               .innerMarginFix(style=' width: 99%')
                 #testCreatePanel
-                    h4.text-center= name
+                    h4.text-center.challenge-instructions-title= name
                       if (isCompleted)
                           |  
                           i.ion-checkmark-circled.text-primary(title="Completed")
                     hr
                     .row
                         .col-xs-12
-                            .bonfire-instructions
+                            .challenge-instructions
                                 for sentence in description
                                     if (/blockquote|h4|table/.test(sentence))
                                         !=sentence

server/views/challenges/showHTML.jade

@@ -10,12 +10,12 @@ block content
                 .innerMarginFix(style = "width: 99%;")
                     .row
                         .col-xs-12
-                            h4.text-center= name
+                            h4.text-center.challenge-instructions-title= name
                                 if (isCompleted)
                                     |  
                                     i.ion-checkmark-circled.text-primary(title="Completed")
                             hr
-                            .bonfire-instructions
+                            .challenge-instructions
                                 for sentence in description
                                     if (/blockquote|h4|table/.test(sentence))
                                         !=sentence

server/views/challenges/showJS.jade

@@ -9,14 +9,14 @@ block content
             .scroll-locker(id = "scroll-locker")
                 .innerMarginFix(style = "width: 99%;")
                     #testCreatePanel
-                        h4.text-center= name
+                        h4.text-center.challenge-instructions-title= name
                             if (isCompleted)
                                 |  
                                 i.ion-checkmark-circled.text-primary(title="Completed")
                         hr
                         .row
                             .col-xs-12
-                                .bonfire-instructions
+                                .challenge-instructions
                                     for sentence in description
                                         if (/blockquote|h4|table/.test(sentence))
                                             !=sentence

server/views/challenges/showStep.jade

@@ -2,29 +2,29 @@ extends ../layout-wide
 block content
     .row
         .col-md-8.col-md-offset-2
-                for step, index in description
+            for step, index in description
-                    .challenge-step(class=index !== 0 ? 'hidden': '')
+                .challenge-step(class=index !== 0 ? 'hidden': '')
-                        a(href=step[0] data-lightbox='img-enlarge')
+                    a(href=step[0] data-lightbox='img-enlarge')
-                            img.gif-block.img-center.img-responsive(src='#{step[0]}' alt='#{step[1]}')
+                        img.gif-block.img-center.img-responsive(src='#{step[0]}' alt='#{step[1]}')
-                        .row
+                    .row
-                            .spacer
-                            .col-xs-12.col-sm-10.col-sm-offset-1.col-md-8.col-md-offset-2
-                                p!= step[2]
                         .spacer
-                        .challenge-button-block
+                        .col-xs-12.col-sm-10.col-sm-offset-1.col-md-8.col-md-offset-2
-                            if step[3]
+                            p.challenge-step-description!= step[2]
-                                a.btn.btn-block.btn-primary.challenge-step-btn-action.btn-lg(id='#{index}' href='#{step[3]}' target='_blank') Open link in new tab (this unlocks the next step)
+                    .spacer
-                                .button-spacer
+                    .challenge-button-block
-                            if index === 0
+                        if step[3]
-                                .col-sm-5.hidden-xs  
+                            a.btn.btn-block.btn-primary.challenge-step-btn-action.btn-lg(id='#{index}' href='#{step[3]}' target='_blank') Open link in new tab (this unlocks the next step)
-                            else
+                            .button-spacer
-                                .btn.btn-primary.btn-primary-ghost.col-sm-5.col-xs-12.challenge-step-btn-prev.btn-lg(id='#{index - 1}') Go to my previous step
+                        if index === 0
-                            .challenge-step-counter.large-p.col-sm-2.col-xs-12.text-center (#{index + 1} / #{description.length})
+                            .col-sm-4.hidden-xs  
-                            if index + 1 === description.length
+                        else
-                                .btn.btn-primary.col-sm-5.col-xs-12.challenge-step-btn-finish.btn-lg(id='last' class=step[3] && !isCompleted ? 'disabled' : '') Finish challenge
+                            .btn.btn-primary.btn-primary-ghost.col-sm-4.col-xs-12.challenge-step-btn-prev.btn-lg(id='#{index - 1}') Go to my previous step
-                            else
+                        .challenge-step-counter.large-p.col-sm-4.col-xs-12.text-center (#{index + 1} / #{description.length})
-                                .btn.btn-primary.col-sm-5.col-xs-12.challenge-step-btn-next.btn-lg(id='#{index}' class=step[3] && !isCompleted ? 'disabled' : '') Go to my next step
+                        if index + 1 === description.length
-                        .clearfix
+                            .btn.btn-primary.col-sm-4.col-xs-12.challenge-step-btn-finish.btn-lg(id='last' class=step[3] && !isCompleted ? 'disabled' : '') Finish challenge
+                        else
+                            .btn.btn-primary.col-sm-4.col-xs-12.challenge-step-btn-next.btn-lg(id='#{index}' class=step[3] && !isCompleted ? 'disabled' : '') Go to my next step
+                    .clearfix
     .spacer
     #challenge-step-modal.modal(tabindex='-1')
         .modal-dialog.animated.fadeIn.fast-animation

server/views/challenges/showVideo.jade

@@ -1,8 +1,8 @@
 extends ../layout-wide
 block content
     .row
-        .col-xs-12.col-sm-12.col-md-4.bonfire-top
+        .col-xs-12.col-sm-12.col-md-4
-            h4.text-center= name
+            h4.text-center.challenge-instructions-title= name
             hr
             ol
                 for step, index in description

server/views/challenges/showZiplineOrBasejump.jade

@@ -2,14 +2,14 @@ extends ../layout-wide
 block content
     .row
         .col-md-4
-            h4.text-center= name
+            h4.text-center.challenge-instructions-title= name
             hr
             ol
                 for step, index in description
                     .row.checklist-element(id="#{dashedName + index}")
-                        .col-xs-2.col-sm-1.col-md-2.padded-ionic-icon.text-right
+                        .col-xs-3.col-sm-1.col-md-2.padded-ionic-icon.text-center
                             input(type='checkbox' class='challenge-list-checkbox')
-                        .col-xs-10.col-sm-11.col-md-10
+                        .col-xs-9.col-sm-11.col-md-10
                             li.step-text.wrappable!= step
         .col-xs-12.col-sm-12.col-md-8
             .embed-responsive.embed-responsive-16by9