Include teaser media and do some style adjustments.

This commit is contained in:
Paulo Reis 2016-11-01 11:36:21 +00:00
parent 2c78b5967f
commit 06629e05d4
2 changed files with 28 additions and 10 deletions

View file

@ -12,26 +12,36 @@
p.feat-onboard-description
span.feat-onboard-description-name Code check 
| will highlight potential problems in your LaTeX code, allowing you to handle errors earlier and become more productive.
.row
video.feat-onboard-video(autoplay, loop)
source(src="/img/teasers/code-checker/code-checker.mp4", type="video/mp4")
img(src="/img/teasers/code-checker/code-checker.gif")
.row.feat-onboard-adv-wrapper
.col-xs-4
h2.feat-onboard-adv-title
| Missing 
span.feat-onboard-adv-title-highlight brackets
p Lorem ipsum feature description stuff.
p Forgot to place a closing bracket? We'll warn you.
.col-xs-4
h2.feat-onboard-adv-title
| Missing 
span.feat-onboard-adv-title-highlight brackets
p Lorem ipsum feature description stuff.
| Unclosed 
span.feat-onboard-adv-title-highlight environments
p
| Know when you are missing an 
code \end{...}
|  command.
.col-xs-4
h2.feat-onboard-adv-title
| Missing 
span.feat-onboard-adv-title-highlight brackets
p Lorem ipsum feature description stuff.
| Incorrect 
span.feat-onboard-adv-title-highlight nesting
p
| Order matters. Get notified when you use an 
code \end{...}
|   too soon.
.feat-onboard-btn-wrapper
button.btn.btn-primary(ng-click="turnCodeCheckOn();") Yes, turn Code check on
.feat-onboard-btn-wrapper
button.btn.btn-default(ng-click="turnCodeCheckOn();") No, disable it for now
button.btn.btn-default(ng-click="turnCodeCheckOff();") No, disable it for now
div(ng-if="innerStep === 2;")
p.feat-onboard-description
| Remember: you can always turn 

View file

@ -1,4 +1,5 @@
@feat-onboard-wrapper-width: 700px;
@feat-onboard-wrapper-width: 820px;
@feat-onboard-max-text-width: 750px;
.feat-onboard {
position: fixed;
@ -61,20 +62,27 @@
color: #FFF;
font-weight: bold;
}
.feat-onboard-description {
margin-bottom: 40px;
max-width: @feat-onboard-max-text-width;
margin: 0 auto 40px;
padding: 0 80px;
}
.feat-onboard-description-name {
font-weight: bold;
}
.feat-onboard-video {
box-shadow: 0 0 70px rgba(255, 255, 255, 0.3);
}
.feat-onboard-adv-wrapper {
text-align: left;
margin-bottom: 40px;
}
.feat-onboard-adv-title {
color: #FFF;
font-size: 23px;
}
.feat-onboard-adv-title-highlight {
font-weight: bold;