ResiLien
/
terraform
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cta div

This commit is contained in:
JT 2014-07-22 18:46:21 -07:00
parent d0f47f63ce
commit 64c04b2b7e
5 changed files with 105 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
website/source/index.html.erb
View File

@ -126,9 +126,9 @@
<header> <header>
<h4>Terminal</h4> <h4>Terminal</h4>
<ul class='shell-dots'> <ul class='shell-dots'>
<li></li> <li class="d1"></li>
<li></li> <li class="d2"></li>
<li></li> <li class="d3"></li>
</ul> </ul>
</header> </header>
<div class="terminal-window"> <div class="terminal-window">
@ -165,7 +165,7 @@
a simple and approachable walkthrough for running Terraform locally.</p> a simple and approachable walkthrough for running Terraform locally.</p>
</div> </div>
<div class="col-xs-offset-5 col-xs-12 col-sm-6 col-sm-offset-0 right"> <div class="col-xs-offset-5 col-xs-12 col-sm-6 col-sm-offset-0 right">
<a class="outline-btn purple" href="/intro/index.html">Read the intro &#187;</a> <a class="outline-btn" href="/intro/index.html">Read the intro &#187;</a>
</div> </div>
</div> </div>
</div> </div>

4
website/source/layouts/_footer.erb
View File

@ -1,4 +1,5 @@
<div id="footer"> <div id="footer-wrap">
<div id="footer">
<div class="container"> <div class="container">
<div class="footer-links"> <div class="footer-links">
<ul class="main-links nav navbar-nav rls-sb"> <ul class="main-links nav navbar-nav rls-sb">
@ -22,6 +23,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<script src="/javascripts/lib/jquery-2.0.3.min.js"></script> <script src="/javascripts/lib/jquery-2.0.3.min.js"></script>
<script src="/javascripts/lib/bootstrap.min.js"></script> <script src="/javascripts/lib/bootstrap.min.js"></script>

73
website/source/stylesheets/_home.less
View File

@ -23,7 +23,6 @@
font-size: 16px; font-size: 16px;
letter-spacing: 1px; letter-spacing: 1px;
line-height: 1.5em; line-height: 1.5em;
color: @consul-gray;
font-family: @font-family-lato; font-family: @font-family-lato;
font-weight: @font-weight-lato-sb; font-weight: @font-weight-lato-sb;
} }
@ -93,11 +92,18 @@
} }
} }
#footer-wrap{
background-color: white;
padding: 0 0 50px 0;
}
#footer{ #footer{
background-color: @consul-footer-gray; background-color: white;
background: @consul-footer-gray url(../images/consul-footer-logo.png) center center no-repeat; .skewY(-2deg);
.img-retina("../images/consul-footer-logo.png", "../images/consul-footer-logo@2x.png", 446px, 443px);
>.container{
.skewY(2deg);
}
.footer-links{ .footer-links{
margin-bottom: 20px; margin-bottom: 20px;
@ -145,7 +151,13 @@
} }
#cta { #cta {
padding: 130px 0 130px; padding: 180px 0;
background-color: @purple;
.skewY(-2deg);
>.container{
.skewY(2deg);
}
.intro { .intro {
.left { .left {
@ -153,16 +165,16 @@
} }
.right { .right {
margin-top: 12px; //margin-top: 12px;
} }
} }
p{ p{
color: white;
font-size: 14px; font-size: 14px;
letter-spacing: 1px; letter-spacing: 1px;
line-height: 1.5em; line-height: 1.5em;
color: @consul-gray;
font-family: @font-family-lato; font-family: @font-family-lato;
font-weight: @font-weight-lato-sb; font-weight: @font-weight-lato-sb;
} }
@ -170,7 +182,7 @@
.outline-btn { .outline-btn {
padding: 8px; padding: 16px 40px;
display: inline-block; display: inline-block;
&:focus { &:focus {
outline: 0; outline: 0;
@ -180,18 +192,20 @@
a { a {
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 24px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 3px; letter-spacing: 3px;
color: @purple; color: white;
&:hover { .lato-light();
text-decoration: none;
} &:hover {
text-decoration: none;
}
} }
} }
#demos{ #demos{
padding: 30px 0 60px; padding: 180px 0 60px;
background-color: #000; background-color: #000;
margin-top: -80px; margin-top: -80px;
.skewY(-2deg); .skewY(-2deg);
@ -201,23 +215,23 @@
} }
.explantion { .explantion {
margin: 40px 0 40px 0; margin: 40px 0 60px 15px;
border-left: 8px solid #1e1e1e;
h2 { h2 {
font-size: 22px; margin-top: 0;
color: white; font-size: 28px;
text-transform: uppercase; color: lighten(@purple, 5%);
font-family: @font-family-lato; .lato-light();
font-weight: @font-weight-lato-xb;
} }
p{ p{
margin-bottom: 0;
font-size: 16px; font-size: 16px;
letter-spacing: 1px; letter-spacing: 1px;
line-height: 1.5em; line-height: 1.5em;
color: white; color: @gray-light;
font-family: @font-family-lato; font-weight: 400;
font-weight: @font-weight-lato-sb;
} }
} }
@ -225,7 +239,7 @@
margin-bottom: 80px; margin-bottom: 80px;
.terminal-item{ .terminal-item{
border-bottom: 1px solid #eaeae; margin-bottom: 120px;
&.last{ &.last{
border-bottom: none; border-bottom: none;
@ -261,6 +275,7 @@
position: relative; position: relative;
text-align: center; text-align: center;
padding: 3px; padding: 3px;
background-color: #1e1e1e;
border-bottom: 2px solid #1e1e1e; border-bottom: 2px solid #1e1e1e;
h4{ h4{
@ -311,14 +326,14 @@
} }
.txt-p { .txt-p {
font-weight: bold; font-weight: bold;
color: lighten(@purple, 15%); color: lighten(@green, 10%);
} }
p{ p{
margin-bottom: 2px; margin-bottom: 2px;
white-space: pre-wrap; white-space: pre-wrap;
} }
.cursor { .cursor {
background-color: @light-purple; background-color: lighten(@purple, %5);
} }
} }
} }

7
website/source/stylesheets/_variables.less
View File

@ -18,16 +18,15 @@
@white: #fff; @white: #fff;
@black: #242424; @black: #242424;
@orange: #e78c5b;
@blue: #5b7fe7;
@green: #5be764;
@gray-darker: #555; @gray-darker: #555;
@gray: #777; @gray: #777;
@gray-light: #939393; @gray-light: #939393;
@gray-lighter: #979797; @gray-lighter: #979797;
@red: #dd4e58; @red: #dd4e58;
@red-dark: #c5454e; @red-dark: #c5454e;
@red-darker: #b03c44;
@tan: #f0f0e5;
@consul-gray: #909090;
@consul-footer-gray: #d7d4d7;
@purple: #822ff7; @purple: #822ff7;
@light-purple: #f7f3f9; @light-purple: #f7f3f9;
@btn-color: #4592C5; @btn-color: #4592C5;

82
website/source/stylesheets/main.css
View File

@ -546,7 +546,6 @@ body.page-sub #header {
font-size: 16px; font-size: 16px;
letter-spacing: 1px; letter-spacing: 1px;
line-height: 1.5em; line-height: 1.5em;
color: #909090;
font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500; font-weight: 500;
} }
@ -628,17 +627,24 @@ body.page-sub #header {
#feature-clone h2 { #feature-clone h2 {
color: white; color: white;
} }
#footer { #footer-wrap {
background-color: #d7d4d7; background-color: white;
background: #d7d4d7 url(../images/consul-footer-logo.png) center center no-repeat; padding: 0 0 50px 0;
background-image: url("../images/consul-footer-logo.png");
background-size: 446px 443px;
} }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { #footer {
#footer { background-color: white;
background-image: url("../images/consul-footer-logo@2x.png"); -webkit-transform: skewY(-2deg);
background-size: 446px 443px; -moz-transform: skewY(-2deg);
} -ms-transform: skewY(-2deg);
-o-transform: skewY(-2deg);
transform: skewY(-2deg);
}
#footer > .container {
-webkit-transform: skewY(2deg);
-moz-transform: skewY(2deg);
-ms-transform: skewY(2deg);
-o-transform: skewY(2deg);
transform: skewY(2deg);
} }
#footer .footer-links { #footer .footer-links {
margin-bottom: 20px; margin-bottom: 20px;
@ -675,24 +681,34 @@ body.page-sub #header {
} }
} }
#cta { #cta {
padding: 130px 0 130px; padding: 180px 0;
background-color: #822ff7;
-webkit-transform: skewY(-2deg);
-moz-transform: skewY(-2deg);
-ms-transform: skewY(-2deg);
-o-transform: skewY(-2deg);
transform: skewY(-2deg);
}
#cta > .container {
-webkit-transform: skewY(2deg);
-moz-transform: skewY(2deg);
-ms-transform: skewY(2deg);
-o-transform: skewY(2deg);
transform: skewY(2deg);
} }
#cta .intro .left { #cta .intro .left {
text-align: right; text-align: right;
} }
#cta .intro .right {
margin-top: 12px;
}
#cta p { #cta p {
color: white;
font-size: 14px; font-size: 14px;
letter-spacing: 1px; letter-spacing: 1px;
line-height: 1.5em; line-height: 1.5em;
color: #909090;
font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 500; font-weight: 500;
} }
#cta .outline-btn { #cta .outline-btn {
padding: 8px; padding: 16px 40px;
display: inline-block; display: inline-block;
} }
#cta .outline-btn:focus { #cta .outline-btn:focus {
@ -700,16 +716,18 @@ body.page-sub #header {
} }
#cta a { #cta a {
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 24px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 3px; letter-spacing: 3px;
color: #822ff7; color: white;
font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 100;
} }
#cta a:hover { #cta a:hover {
text-decoration: none; text-decoration: none;
} }
#demos { #demos {
padding: 30px 0 60px; padding: 180px 0 60px;
background-color: #000; background-color: #000;
margin-top: -80px; margin-top: -80px;
-webkit-transform: skewY(-2deg); -webkit-transform: skewY(-2deg);
@ -726,28 +744,29 @@ body.page-sub #header {
transform: skewY(2deg); transform: skewY(2deg);
} }
#demos .explantion { #demos .explantion {
margin: 40px 0 40px 0; margin: 40px 0 60px 15px;
border-left: 8px solid #1e1e1e;
} }
#demos .explantion h2 { #demos .explantion h2 {
font-size: 22px; margin-top: 0;
color: white; font-size: 28px;
text-transform: uppercase; color: #9148f8;
font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700; font-weight: 100;
} }
#demos .explantion p { #demos .explantion p {
margin-bottom: 0;
font-size: 16px; font-size: 16px;
letter-spacing: 1px; letter-spacing: 1px;
line-height: 1.5em; line-height: 1.5em;
color: white; color: #939393;
font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400;
font-weight: 500;
} }
#demos .terminals { #demos .terminals {
margin-bottom: 80px; margin-bottom: 80px;
} }
#demos .terminals .terminal-item { #demos .terminals .terminal-item {
border-bottom: 1px solid #eaeae; margin-bottom: 120px;
} }
#demos .terminals .terminal-item.last { #demos .terminals .terminal-item.last {
border-bottom: none; border-bottom: none;
@ -775,6 +794,7 @@ body.page-sub #header {
position: relative; position: relative;
text-align: center; text-align: center;
padding: 3px; padding: 3px;
background-color: #1e1e1e;
border-bottom: 2px solid #1e1e1e; border-bottom: 2px solid #1e1e1e;
} }
#demos .terminals .terminal-item .terminal header h4 { #demos .terminals .terminal-item .terminal header h4 {
@ -820,14 +840,14 @@ body.page-sub #header {
} }
#demos .terminals .terminal-item .terminal .terminal-window .txt-p { #demos .terminals .terminal-item .terminal .terminal-window .txt-p {
font-weight: bold; font-weight: bold;
color: #ae79fa; color: #87ee8e;
} }
#demos .terminals .terminal-item .terminal .terminal-window p { #demos .terminals .terminal-item .terminal .terminal-window p {
margin-bottom: 2px; margin-bottom: 2px;
white-space: pre-wrap; white-space: pre-wrap;
} }
#demos .terminals .terminal-item .terminal .terminal-window .cursor { #demos .terminals .terminal-item .terminal .terminal-window .cursor {
background-color: #f7f3f9; background-color: #NaNNaNNaN;
} }
#demos .terminals .terminal-item .feature-bullets { #demos .terminals .terminal-item .feature-bullets {
list-style-type: none; list-style-type: none;