diff --git a/client/less/lib/bootstrap/variables.less b/client/less/lib/bootstrap/variables.less index 01e26f3433..8b8fefa81d 100755 --- a/client/less/lib/bootstrap/variables.less +++ b/client/less/lib/bootstrap/variables.less @@ -107,7 +107,7 @@ @border-radius-small: 3px; //** Global color for active items (e.g., navs or dropdowns). -@component-active-color: #eee; +@component-active-color: @gray-lighter; //** Global background color for active items (e.g., navs or dropdowns). @component-active-bg: @brand-primary; @@ -145,26 +145,26 @@ @btn-font-weight: normal; @btn-default-color: #333; -@btn-default-bg: #eee; +@btn-default-bg: @gray-lighter; @btn-default-border: #ccc; -@btn-primary-color: #eee; +@btn-primary-color: @gray-lighter; @btn-primary-bg: @brand-primary; @btn-primary-border: darken(@btn-primary-bg, 5%); -@btn-success-color: #eee; +@btn-success-color: @gray-lighter; @btn-success-bg: @brand-success; @btn-success-border: darken(@btn-success-bg, 5%); -@btn-info-color: #eee; +@btn-info-color: @gray-lighter; @btn-info-bg: @brand-info; @btn-info-border: darken(@btn-info-bg, 5%); -@btn-warning-color: #eee; +@btn-warning-color: @gray-lighter; @btn-warning-bg: @brand-warning; @btn-warning-border: darken(@btn-warning-bg, 5%); -@btn-danger-color: #eee; +@btn-danger-color: @gray-lighter; @btn-danger-bg: @brand-danger; @btn-danger-border: darken(@btn-danger-bg, 5%); @@ -176,7 +176,7 @@ //## //** `` background color -@input-bg: #eee; +@input-bg: @gray-lighter; //** `` background color @input-bg-disabled: @gray-lighter; @@ -223,7 +223,7 @@ //## Dropdown menu container and contents. //** Background for the dropdown menu. -@dropdown-bg: #eee; +@dropdown-bg: @gray-lighter; //** Dropdown menu `border-color`. @dropdown-border: rgba(0,0,0,.15); //** Dropdown menu `border-color` **for IE8**. @@ -359,10 +359,10 @@ @navbar-default-border: darken(@navbar-default-bg, 6.5%); // Navbar links -@navbar-default-link-color: #eee; +@navbar-default-link-color: @gray-lighter; @navbar-default-link-hover-color: #4a2b0f; -@navbar-default-link-hover-bg: #eee; -@navbar-default-link-active-color: #eee; +@navbar-default-link-hover-bg: @gray-lighter; +@navbar-default-link-active-color: @gray-lighter; @navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%); @navbar-default-link-disabled-color: #ccc; @navbar-default-link-disabled-bg: transparent; @@ -386,7 +386,7 @@ // Inverted navbar links @navbar-inverse-link-color: @gray-light; -@navbar-inverse-link-hover-color: #eee; +@navbar-inverse-link-hover-color: @gray-lighter; @navbar-inverse-link-hover-bg: transparent; @navbar-inverse-link-active-color: @navbar-inverse-link-hover-color; @navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%); @@ -395,12 +395,12 @@ // Inverted navbar brand label @navbar-inverse-brand-color: @navbar-inverse-link-color; -@navbar-inverse-brand-hover-color: #eee; +@navbar-inverse-brand-hover-color: @gray-lighter; @navbar-inverse-brand-hover-bg: transparent; // Inverted navbar toggle @navbar-inverse-toggle-hover-bg: #333; -@navbar-inverse-toggle-icon-bar-bg: #eee; +@navbar-inverse-toggle-icon-bar-bg: @gray-lighter; @navbar-inverse-toggle-border-color: #333; @@ -415,7 +415,7 @@ @nav-disabled-link-color: @gray-light; @nav-disabled-link-hover-color: @gray-light; -@nav-open-link-hover-color: #eee; +@nav-open-link-hover-color: @gray-lighter; //== Tabs @nav-tabs-border-color: #ddd; @@ -440,19 +440,19 @@ //## @pagination-color: @link-color; -@pagination-bg: #eee; +@pagination-bg: @gray-lighter; @pagination-border: #ddd; @pagination-hover-color: @link-hover-color; @pagination-hover-bg: @gray-lighter; @pagination-hover-border: #ddd; -@pagination-active-color: #eee; +@pagination-active-color: @gray-lighter; @pagination-active-bg: @brand-primary; @pagination-active-border: @brand-primary; @pagination-disabled-color: @gray-light; -@pagination-disabled-bg: #eee; +@pagination-disabled-bg: @gray-lighter; @pagination-disabled-border: #ddd; @@ -511,7 +511,7 @@ //** Tooltip max width @tooltip-max-width: 200px; //** Tooltip text color -@tooltip-color: #eee; +@tooltip-color: @gray-lighter; //** Tooltip background color @tooltip-bg: #000; @tooltip-opacity: .9; @@ -527,7 +527,7 @@ //## //** Popover body background color -@popover-bg: #eee; +@popover-bg: @gray-lighter; //** Popover maximum width @popover-max-width: 276px; //** Popover border color @@ -541,7 +541,7 @@ //** Popover arrow width @popover-arrow-width: 10px; //** Popover arrow color -@popover-arrow-color: #eee; +@popover-arrow-color: @gray-lighter; @popover-arrow-color: @popover-bg; //** Popover outer arrow width @@ -570,9 +570,9 @@ @label-danger-bg: @brand-danger; //** Default label text color -@label-color: #eee; +@label-color: @gray-lighter; //** Default text color of a linked label -@label-link-hover-color: #eee; +@label-link-hover-color: @gray-lighter; //== Modals @@ -588,7 +588,7 @@ @modal-title-line-height: @line-height-base; //** Background color of modal content area -@modal-content-bg: #eee; +@modal-content-bg: @gray-lighter; //** Modal content border color @modal-content-border-color: rgba(0,0,0,.2); //** Modal content border color **for IE8** @@ -640,7 +640,7 @@ //** Background color of the whole progress component @progress-bg: #f5f5f5; //** Progress bar text color -@progress-bar-color: #eee; +@progress-bar-color: @gray-lighter; //** Variable for setting rounded corners on progress bar. @progress-border-radius: @border-radius-base; @@ -662,7 +662,7 @@ //## //** Background color on `.list-group-item` -@list-group-bg: #eee; +@list-group-bg: @gray-lighter; //** `.list-group-item` border color @list-group-border: #ddd; //** List group border radius @@ -695,7 +695,7 @@ // //## -@panel-bg: #eee; +@panel-bg: @gray-lighter; @panel-body-padding: 15px; @panel-heading-padding: 10px 15px; @panel-footer-padding: @panel-heading-padding; @@ -709,7 +709,7 @@ @panel-default-border: #ddd; @panel-default-heading-bg: #f5f5f5; -@panel-primary-text: #eee; +@panel-primary-text: @gray-lighter; @panel-primary-border: @brand-primary; @panel-primary-heading-bg: @brand-primary; @@ -717,7 +717,7 @@ @panel-success-border: @state-success-border; @panel-success-heading-bg: @state-success-bg; -@panel-info-text: #eee; +@panel-info-text: @gray-lighter; @panel-info-border: darken(#4a2b0f, 5%); @panel-info-heading-bg: #4a2b0f; @@ -761,15 +761,15 @@ // //## -@badge-color: #eee; +@badge-color: @gray-lighter; //** Linked badge text color on hover -@badge-link-hover-color: #eee; +@badge-link-hover-color: @gray-lighter; @badge-bg: @gray-light; //** Badge text color in active nav link @badge-active-color: @link-color; //** Badge background color in active nav link -@badge-active-bg: #eee; +@badge-active-bg: @gray-lighter; @badge-font-weight: bold; @badge-line-height: 1; @@ -798,15 +798,15 @@ @carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6); -@carousel-control-color: #eee; +@carousel-control-color: @gray-lighter; @carousel-control-width: 15%; @carousel-control-opacity: .5; @carousel-control-font-size: 20px; -@carousel-indicator-active-bg: #eee; -@carousel-indicator-border-color: #eee; +@carousel-indicator-active-bg: @gray-lighter; +@carousel-indicator-border-color: @gray-lighter; -@carousel-caption-color: #eee; +@carousel-caption-color: @gray-lighter; //== Close @@ -815,7 +815,7 @@ @close-font-weight: bold; @close-color: #000; -@close-text-shadow: 0 1px 0 #eee; +@close-text-shadow: 0 1px 0 @gray-lighter; //== Code @@ -825,7 +825,7 @@ @code-color: #c7254e; @code-bg: #f9f2f4; -@kbd-color: #eee; +@kbd-color: @gray-lighter; @kbd-bg: #333; @pre-bg: #f5f5f5; diff --git a/client/less/main.less b/client/less/main.less index 814e99cb54..6d6260aac7 100644 --- a/client/less/main.less +++ b/client/less/main.less @@ -37,8 +37,7 @@ html { overflow-x: hidden; } -input[type=checkbox] -{ +input[type=checkbox] { /* Double-sized Checkboxes */ -ms-transform: scale(2); /* IE */ -moz-transform: scale(2); /* FF */ @@ -48,7 +47,7 @@ input[type=checkbox] } body.full-screen-body-background { - background-color: #eeeeee; + background-color: @gray-lighter; } @@ -101,24 +100,10 @@ h1, h2, h3, h4, h5, h6, p, li { margin: 0 auto; } -.three-by-three { - height: 100px; -} - -.darker-background { - background-color: #dedede; -} - -/**/ - .btn-cta { font-size: 40px; } -.nonprofit-cta { - font-size: 28px; -} - .btn, .shadow { white-space: normal; -webkit-box-shadow: 2px 4px 1px rgba(0, 0, 0, 0.3); @@ -142,25 +127,6 @@ ul { word-wrap: break-word; } -.img-center { - margin:0 auto; -} - -.centered-iframe { - display:block; -} - -@media (min-width: 767px) { - .landing-panel-body { - padding-left: 40px; - padding-right: 40px; - } -} - -.landing-panel-heading { - font-size: 40px; -} - .panel-heading { font-size: 25px; } @@ -175,14 +141,6 @@ ul { font-size: 26px; } -.five-pixel-break { - height: 5px; -} - -.fifteen-pixel-break { - height: 15px; -} - .nav-height { height: 50px; border: none; @@ -193,55 +151,34 @@ ul { width: 200px; } -.completion-icon{ +.completion-icon { font-size: 150px; } -.responsive-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } -.responsive-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } - -.positive-10 { - margin-top: 10px; -} - -.positive-15-bottom { - margin-bottom: 15px; -} - .positive-15 { margin-top: 15px; } -.negative-45 { - margin-top: -45px; - margin-bottom: -45px; +.positive-15-bottom { + margin-bottom: 15px; } -.negative-55 { - margin-top: -55px; - margin-bottom: -55px; +.positive-10 { + margin-top: 10px; } -.negative-10 { - margin-top: -10px; -} - -.negative-28 { - margin-top: -28px; -} - -.negative-35 { - margin-top: -35px; -} - -.negative-30 { - margin-top: -30px; +.positive-5 { + margin-top: 5px; } .negative-5 { margin-top: -5px; } +.negative-10 { + margin-top: -10px; +} + .negative-15 { margin-top: -15px; } @@ -250,10 +187,27 @@ ul { margin-top: -20px; } -.negative-bottom-margin-30 { +.negative-28 { + margin-top: -28px; +} + +.negative-30 { + margin-top: -30px; +} + +.negative-30-bottom { margin-bottom: -30px; } +.negative-35 { + margin-top: -35px; +} + +.negative-55 { + margin-top: -55px; + margin-bottom: -55px; +} + .large-p { font-size: 24px; } @@ -270,36 +224,11 @@ ul { color: @brand-success; } -.delay-1 { - -webkit-animation-delay: 1s; - animation-delay: 1s; -} - -.delay-2 { - -webkit-animation-delay: 2s; - animation-delay: 2s; -} - -.delay-4 { - -webkit-animation-delay: 4s; - animation-delay: 4s; -} - -.delay-10 { - -webkit-animation-delay: 10s; - animation-delay: 10s; -} - .fast-animation { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } -.slow-animation { - -webkit-animation-duration: 1.5s; - animation-duration: 1.5s; -} - .disabled { pointer-events: none; cursor: default; @@ -310,10 +239,6 @@ ul { display: none; } -.button-container { - height: 120px; -} - .nav-logo { height: 40px; margin-top: -10px; @@ -329,7 +254,7 @@ ul { } @media (max-width: 991px) and (min-width: 768px) { position: absolute; - right:0; + right: 0; margin-right: 10px; white-space: nowrap; } @@ -346,8 +271,8 @@ ul { .thin-progress-bar { height: 8px; - margin-top:3px; - margin-bottom:0px; + margin-top: 3px; + margin-bottom: 0px; width: 60%; margin-right: auto; margin-left: auto; @@ -357,10 +282,6 @@ ul { margin-bottom: -6px; } -.strikethrough { - text-decoration: line-through; -} - .btn-social { width: 250px; margin: auto; @@ -377,7 +298,7 @@ ul { } .navbar-nav > li > a { - color: #eee; + color: @gray-lighter; &:hover { color: #4a2b0f; } @@ -396,11 +317,6 @@ ul { font-size: 63px; } -.scroll-lock { - overflow: hidden; - height: 100%; -} - .signup-btn.btn { background-color: #ffac33; background-image: linear-gradient(#ffcc4d, #ffac33); @@ -421,41 +337,9 @@ ul { background-image: none; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3); } -.profile-image { - border-radius: 5px; - width: 200px; - height: 200px; - padding-left: 5px; - padding-right: 5px; -} -.team-member { - height: 420px; -} - -*, *:before, *:after {box-sizing: border-box !important;} - -.masonry-row { - -moz-column-width: 18em; - -webkit-column-width: 18em; - -moz-column-gap: 1em; - -webkit-column-gap:1em; -} - -.masonry-block { - display: inline-block; - padding: .25rem; - width: 100%; -} - -.masonry-relative { - position:relative; - display: block; -} - -.next-challenge-button { - max-width: 1500px; - margin:0 auto; +*, *:before, *:after { + box-sizing: border-box !important; } .btn-big { @@ -505,13 +389,13 @@ thead { } .navbar-nav a { - color: #eee; + color: @gray-lighter; font-size: 20px; margin-top: -5px; margin-bottom: -5px; } .navbar-toggle { - color: #eee; + color: @gray-lighter; } .navbar-right { @@ -520,16 +404,11 @@ thead { } .signup-btn-nav { - margin-top:-2px !important; + margin-top: -2px !important; padding-top: 10px !important; padding-bottom: 10px !important; } -.nameline { - margin-top: -5px; - font-size: 40px; -} - .public-profile-img { height: 200px; width: 200px; @@ -543,23 +422,6 @@ thead { border-color: #78FA89; } -.desktop-narrow { - @media (min-width: 767px) { - marign: 0 auto; - width: 80%; - } -} - -.min650 { - min-height: 630px; -} - -.portfolio-image { - height: 225px; - width: 300px; - border-radius: 5px; -} - .flat-top { margin-top: -5px; } @@ -573,7 +435,7 @@ thead { } .points-on-top { - color: #eee; + color: @gray-lighter; font-size: 35px; z-index: 2; width: 60%; @@ -642,7 +504,7 @@ thead { .challenge-list-header { background-color: #215f1e; - color: #eee; + color: @gray-lighter; font-size: 36px; text-align: center; margin-bottom: -30px; @@ -650,19 +512,8 @@ thead { padding-left: 50px; } -.all-list-header { - background-color: #4A2B0F; - color: #eee; - font-size: 36px; - text-align: center; - margin-bottom: -30px; - border-radius: 5px 5px 0px 0px; - padding-left: 50px; - -} - .closing-x { - color: #eee; + color: @gray-lighter; font-size: 50px; text-align: right; } @@ -678,7 +529,7 @@ thead { position: absolute; a { font-size: 20px; - color: #eee; + color: @gray-lighter; margin-left: 0px; margin-right: 0px; padding-left: 10px; @@ -687,7 +538,7 @@ thead { padding-bottom: 12px; &:hover { color: #4a2b0f; - background-color: #eee; + background-color: @gray-lighter; text-decoration: none; } } @@ -702,19 +553,6 @@ thead { font-size: 15px; } -.jquery-exercises-well { - text-align: left; - height: 200px; -} - -#exercise-directory { - font-size: 20px; -} - -#current-exercise { - text-size: 250px; -} - .bonfire-instructions { margin-bottom: 5px; } @@ -770,10 +608,6 @@ form.code span { padding-bottom: 0px; } -.panel-bonfire { - height: 100% -} - div.CodeMirror-scroll { padding-bottom: 30px; } @@ -812,11 +646,6 @@ iframe.iphone { } } -.nonprofit-help-select-text-height { - font-size: 40px; - padding-top: 20px; -} - // To adjust right margin, negative values bring the image closer to the edge of the screen .iphone-position { position: absolute; @@ -829,25 +658,6 @@ iframe.iphone { min-height: 650px; } -// This is used to give icons text for screen readers to read out, without needing the text to actually appear. -.icon-lock{ - font-size: 0px; -} - -.stats-text { - font-size: 26px; - line-height: 150%; -} - -.github-and-twitter-button-text { - padding-top: 10px; -} - -.gitter-imbed { - height: 100%; - margin-bottom: 50px; -} - .btn-primary-ghost { background: transparent; color: @brand-primary; @@ -908,7 +718,7 @@ iframe.iphone { padding-right: 8px; margin-left: 0px; margin-right: 2px; - text-align:left; + text-align: left; font-size: 10px; } @@ -918,38 +728,11 @@ iframe.iphone { font-size: 18px; } -.tight-h3 { - margin-top: -4px; - margin-bottom: -4px; -} - .story-list { padding-bottom: 30px; margin-bottom: 30px; } -.big-ion-up-arrow { - font-size: 45px; - margin-top: -10px; - margin-bottom: -15px; - text-align: center; -} - -.big-ion-up-arrow #upvote, #reply-to-main-post { - cursor: pointer; -} - -.story-up-votes { - padding-top: 0px; - margin-left: -5px; - text-align: center; -} - -.img-story-post { - max-width: 110px; - max-height: 110px; -} - .button-spacer { padding: 5px 0 2px 0; } @@ -1057,11 +840,7 @@ hr { } .cal-heatmap-container { - background-color: #EEEEEE; -} - -.checkbox-table label { - margin-left: 10px; + background-color: @gray-lighter; } .interested-camper-image { @@ -1070,16 +849,6 @@ hr { padding: 5px; } -.svg-challenge-map { - fill: #333; - height: 40px; -} - -.news-number { - font-size: 30px; - text-align: center; -} - .mobile-story-image { border-radius: 5px; width: 100%; @@ -1101,10 +870,6 @@ hr { opacity: 0.5; } -.same-line { - display: inline-block; -} - .padded-ionic-icon { padding-top: 5px; } @@ -1142,10 +907,6 @@ hr { // Calculator styles -.initially-hidden { - display: none; -} - .chart rect { fill: steelblue; } diff --git a/client/main.js b/client/main.js index 6bb0c865de..ebebdd10c7 100644 --- a/client/main.js +++ b/client/main.js @@ -236,12 +236,6 @@ $(document).ready(function() { } }); - $('.next-challenge-button').unbind('click'); - $('.next-challenge-button').on('click', function() { - l = location.pathname.split('/'); - window.location = '/challenges/' + (parseInt(l[l.length - 1]) + 1); - }); - $('#complete-courseware-dialog').on('hidden.bs.modal', function() { editor.focus(); }); diff --git a/server/views/coursewares/showBonfire.jade b/server/views/coursewares/showBonfire.jade index eb74dfaf38..687ce496b3 100644 --- a/server/views/coursewares/showBonfire.jade +++ b/server/views/coursewares/showBonfire.jade @@ -64,7 +64,7 @@ block content .bonfire-instructions for sentence in details p.wrappable.negative-10!= sentence - .negative-bottom-margin-30 + .negative-30-bottom #MDN-links p.negative-10 Here are some helpful links: for link, index in MDNlinks diff --git a/server/views/coursewares/showHTML.jade b/server/views/coursewares/showHTML.jade index 7b83db4168..699355924c 100644 --- a/server/views/coursewares/showHTML.jade +++ b/server/views/coursewares/showHTML.jade @@ -86,6 +86,7 @@ block content a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') × .modal-body .text-center +<<<<<<< HEAD #checkmark-container.row #challenge-checkmark.animated.zoomInDown.delay-half span.completion-icon.ion-checkmark-circled.text-primary @@ -94,4 +95,9 @@ block content #submit-challenge.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit and go to my next challenge (ctrl + enter) else a.btn.btn-lg.btn-primary.btn-block(href='/challenges/next-challenge?id=' + challengeId) Go to my next challenge +======= + .animated.zoomInDown + span.completion-icon.ion-checkmark-circled.text-primary + a.animated.fadeIn.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress +>>>>>>> 45e8cef504bada71c3fa805b8e0422208299eada include ../partials/challenge-modals diff --git a/server/views/coursewares/showVideo.jade b/server/views/coursewares/showVideo.jade index c4e7d8fa92..30ad2d5f1a 100644 --- a/server/views/coursewares/showVideo.jade +++ b/server/views/coursewares/showVideo.jade @@ -63,7 +63,7 @@ block content a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') × .modal-body(ng-controller="pairedWithController") .text-center - .animated.zoomInDown.delay-half + .animated.zoomInDown span.completion-icon.ion-checkmark-circled.text-primary if (user) a.btn.btn-lg.btn-primary.btn-block#next-courseware-button(name='_csrf', value=_csrf) I've completed this challenge (ctrl + enter) diff --git a/server/views/coursewares/showZiplineOrBasejump.jade b/server/views/coursewares/showZiplineOrBasejump.jade index 2421adf256..3ce88987e2 100644 --- a/server/views/coursewares/showZiplineOrBasejump.jade +++ b/server/views/coursewares/showZiplineOrBasejump.jade @@ -69,7 +69,7 @@ block content a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') × .modal-body(ng-controller="pairedWithController") .text-center - .animated.zoomInDown.delay-half + .animated.zoomInDown span.completion-icon.ion-checkmark-circled.text-primary if (user) form.form-horizontal(novalidate='novalidate', name='completedWithForm')