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>
<h4>Terminal</h4>
<ul class='shell-dots'>
<li></li>
<li></li>
<li></li>
<li class="d1"></li>
<li class="d2"></li>
<li class="d3"></li>
</ul>
</header>
<div class="terminal-window">
@ -165,7 +165,7 @@
a simple and approachable walkthrough for running Terraform locally.</p>
</div>
<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>

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

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

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

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

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

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

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

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