gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Minor aesthetic changes

Browse Source
This commit is contained in:
Hallaathrad
2016-02-04 11:24:09 -05:00
parent 19b26475e8
commit a903db76e3
10 changed files with 145 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
client/less/challenge.less
View File

@ -1,39 +1,114 @@
.bonfire-instructions h4 {
margin-bottom: 0;
.challenge-step-description {
font-size: 1.5em;
text-align: center;
}
.challenge-step-counter {
font-size: 20px;
line-height: 44px;
}
.bonfire-instructions 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;
.challenge-instructions-title {
margin-top: 0;
i {
margin-left: 5px;
line-height: 20px;
}
}
.bonfire-instructions dfn {
font-family: @font-family-monospace;
color: @code-color;
background-color: @code-bg;
border-radius: @border-radius-base;
.challenge-instructions {
margin-bottom: 5px;
h4 {
margin-bottom: 0;
}
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 {
color: #31708f;
#testSuite {
margin-top: 10px;
> div >.row {
margin: 0!important;
}
}
.bonfire-instructions a::after, #MDN-links a::after {
font-size: 70%;
font-family: FontAwesome;
content: " \f08e";
.test-output {
font-size: 15px;
font-family: "Ubuntu Mono";
margin-top: 8px;
line-height:20px;
}
.bonfire-instructions ol {
font-size: 16px;
.grayed-out-test-output {
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;
}
}

2
client/less/lib/bootstrap/variables.less
View File

@ -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);

67
client/less/main.less
View File

@ -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;
}

8
client/less/map.less
View File

@ -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;
}
}
}

4
server/views/challenges/showBonfire.jade
View File

@ -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

4
server/views/challenges/showHTML.jade
View File

@ -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

4
server/views/challenges/showJS.jade
View File

@ -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

44
server/views/challenges/showStep.jade
View File

@ -2,29 +2,29 @@ extends ../layout-wide
block content
.row
.col-md-8.col-md-offset-2
for step, index in description
.challenge-step(class=index !== 0 ? 'hidden': '')
a(href=step[0] data-lightbox='img-enlarge')
img.gif-block.img-center.img-responsive(src='#{step[0]}' alt='#{step[1]}')
.row
.spacer
.col-xs-12.col-sm-10.col-sm-offset-1.col-md-8.col-md-offset-2
p!= step[2]
for step, index in description
.challenge-step(class=index !== 0 ? 'hidden': '')
a(href=step[0] data-lightbox='img-enlarge')
img.gif-block.img-center.img-responsive(src='#{step[0]}' alt='#{step[1]}')
.row
.spacer
.challenge-button-block
if step[3]
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)
.button-spacer
if index === 0
.col-sm-5.hidden-xs  
else
.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
.challenge-step-counter.large-p.col-sm-2.col-xs-12.text-center (#{index + 1} / #{description.length})
if index + 1 === description.length
.btn.btn-primary.col-sm-5.col-xs-12.challenge-step-btn-finish.btn-lg(id='last' class=step[3] && !isCompleted ? 'disabled' : '') Finish challenge
else
.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
.clearfix
.col-xs-12.col-sm-10.col-sm-offset-1.col-md-8.col-md-offset-2
p.challenge-step-description!= step[2]
.spacer
.challenge-button-block
if step[3]
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)
.button-spacer
if index === 0
.col-sm-4.hidden-xs  
else
.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
.challenge-step-counter.large-p.col-sm-4.col-xs-12.text-center (#{index + 1} / #{description.length})
if index + 1 === description.length
.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

4
server/views/challenges/showVideo.jade
View File

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

6
server/views/challenges/showZiplineOrBasejump.jade
View File

@ -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