change degree to 3 for more drastic effect

This commit is contained in:
JT 2014-07-23 03:09:31 -07:00
parent 040f4f4bb5
commit f40ac522a1
3 changed files with 110 additions and 100 deletions

View File

@ -4,6 +4,13 @@
padding: 0 0 50px 0; padding: 0 0 50px 0;
} }
body.page-home{
#footer{
margin-top: -40px;
}
}
#footer{ #footer{
padding: 140px 0 40px; padding: 140px 0 40px;
color: black; color: black;

View File

@ -43,10 +43,10 @@
margin-top: -36px; margin-top: -36px;
background: #fff url(../images/white-wireframe.png) center top no-repeat; background: #fff url(../images/white-wireframe.png) center top no-repeat;
background-size: cover; background-size: cover;
.skewY(-2deg); .skewY(-3deg);
>.container{ >.container{
.skewY(2deg); .skewY(3deg);
} }
h2{ h2{
@ -77,10 +77,10 @@
border-top: 2px solid white; border-top: 2px solid white;
border-bottom: 2px solid @purple; border-bottom: 2px solid @purple;
background-size: cover; background-size: cover;
.skewY(2deg); .skewY(3deg);
>.container{ >.container{
.skewY(-2deg); .skewY(-3deg);
} }
p{ p{
@ -124,10 +124,10 @@
padding: 240px 0 300px; padding: 240px 0 300px;
color: white; color: white;
background-color: @purple; background-color: @purple;
.skewY(2deg); .skewY(3deg);
>.container{ >.container{
.skewY(-2deg); .skewY(-3deg);
} }
h2{ h2{
@ -174,35 +174,13 @@
} }
@media (max-width: 992px) {
#features{
.double-row{
padding: 0 0 0 0;
.row{
padding-bottom: 90px;
}
}
.icn{
height: 200px;
}
}
}
@media (max-width: 480px) {
#features{
text-align: center;
}
}
#cta { #cta {
padding: 180px 0; padding: 180px 0 220px;
background-color: @purple; background-color: @purple;
.skewY(-2deg); .skewY(-3deg);
>.container{ >.container{
.skewY(2deg); .skewY(3deg);
} }
.intro { .intro {
@ -255,10 +233,10 @@
padding: 180px 0 60px; padding: 180px 0 60px;
background-color: #000; background-color: #000;
margin-top: -80px; margin-top: -80px;
.skewY(-2deg); .skewY(-3deg);
>.container{ >.container{
.skewY(2deg); .skewY(3deg);
} }
.explantion { .explantion {
@ -397,6 +375,28 @@
} }
} }
@media (max-width: 992px) {
#features{
.double-row{
padding: 0 0 0 0;
.row{
padding-bottom: 90px;
}
}
.icn{
height: 200px;
}
}
}
@media (max-width: 480px) {
#features{
text-align: center;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#demos{ #demos{

View File

@ -324,6 +324,9 @@ body.page-sub #header .main-links.navbar-nav li + li::before {
background-color: white; background-color: white;
padding: 0 0 50px 0; padding: 0 0 50px 0;
} }
body.page-home #footer {
margin-top: -40px;
}
#footer { #footer {
padding: 140px 0 40px; padding: 140px 0 40px;
color: black; color: black;
@ -624,18 +627,18 @@ body.page-sub #header .main-links.navbar-nav li + li::before {
margin-top: -36px; margin-top: -36px;
background: #ffffff url(../images/white-wireframe.png) center top no-repeat; background: #ffffff url(../images/white-wireframe.png) center top no-repeat;
background-size: cover; background-size: cover;
-webkit-transform: skewY(-2deg); -webkit-transform: skewY(-3deg);
-moz-transform: skewY(-2deg); -moz-transform: skewY(-3deg);
-ms-transform: skewY(-2deg); -ms-transform: skewY(-3deg);
-o-transform: skewY(-2deg); -o-transform: skewY(-3deg);
transform: skewY(-2deg); transform: skewY(-3deg);
} }
#feature-auto > .container { #feature-auto > .container {
-webkit-transform: skewY(2deg); -webkit-transform: skewY(3deg);
-moz-transform: skewY(2deg); -moz-transform: skewY(3deg);
-ms-transform: skewY(2deg); -ms-transform: skewY(3deg);
-o-transform: skewY(2deg); -o-transform: skewY(3deg);
transform: skewY(2deg); transform: skewY(3deg);
} }
#feature-auto h2 { #feature-auto h2 {
font-size: 41px; font-size: 41px;
@ -661,18 +664,18 @@ body.page-sub #header .main-links.navbar-nav li + li::before {
border-top: 2px solid white; border-top: 2px solid white;
border-bottom: 2px solid #822ff7; border-bottom: 2px solid #822ff7;
background-size: cover; background-size: cover;
-webkit-transform: skewY(2deg); -webkit-transform: skewY(3deg);
-moz-transform: skewY(2deg); -moz-transform: skewY(3deg);
-ms-transform: skewY(2deg); -ms-transform: skewY(3deg);
-o-transform: skewY(2deg); -o-transform: skewY(3deg);
transform: skewY(2deg); transform: skewY(3deg);
} }
#feature-iterate > .container { #feature-iterate > .container {
-webkit-transform: skewY(-2deg); -webkit-transform: skewY(-3deg);
-moz-transform: skewY(-2deg); -moz-transform: skewY(-3deg);
-ms-transform: skewY(-2deg); -ms-transform: skewY(-3deg);
-o-transform: skewY(-2deg); -o-transform: skewY(-3deg);
transform: skewY(-2deg); transform: skewY(-3deg);
} }
#feature-iterate p { #feature-iterate p {
text-align: right; text-align: right;
@ -711,18 +714,18 @@ body.page-sub #header .main-links.navbar-nav li + li::before {
padding: 240px 0 300px; padding: 240px 0 300px;
color: white; color: white;
background-color: #822ff7; background-color: #822ff7;
-webkit-transform: skewY(2deg); -webkit-transform: skewY(3deg);
-moz-transform: skewY(2deg); -moz-transform: skewY(3deg);
-ms-transform: skewY(2deg); -ms-transform: skewY(3deg);
-o-transform: skewY(2deg); -o-transform: skewY(3deg);
transform: skewY(2deg); transform: skewY(3deg);
} }
#feature-clone > .container { #feature-clone > .container {
-webkit-transform: skewY(-2deg); -webkit-transform: skewY(-3deg);
-moz-transform: skewY(-2deg); -moz-transform: skewY(-3deg);
-ms-transform: skewY(-2deg); -ms-transform: skewY(-3deg);
-o-transform: skewY(-2deg); -o-transform: skewY(-3deg);
transform: skewY(-2deg); transform: skewY(-3deg);
} }
#feature-clone h2 { #feature-clone h2 {
color: white; color: white;
@ -761,37 +764,21 @@ body.page-sub #header .main-links.navbar-nav li + li::before {
transform: skewY(30deg); transform: skewY(30deg);
margin: 5px 5px 0 0; margin: 5px 5px 0 0;
} }
@media (max-width: 992px) {
#features .double-row {
padding: 0 0 0 0;
}
#features .double-row .row {
padding-bottom: 90px;
}
#features .icn {
height: 200px;
}
}
@media (max-width: 480px) {
#features {
text-align: center;
}
}
#cta { #cta {
padding: 180px 0; padding: 180px 0 220px;
background-color: #822ff7; background-color: #822ff7;
-webkit-transform: skewY(-2deg); -webkit-transform: skewY(-3deg);
-moz-transform: skewY(-2deg); -moz-transform: skewY(-3deg);
-ms-transform: skewY(-2deg); -ms-transform: skewY(-3deg);
-o-transform: skewY(-2deg); -o-transform: skewY(-3deg);
transform: skewY(-2deg); transform: skewY(-3deg);
} }
#cta > .container { #cta > .container {
-webkit-transform: skewY(2deg); -webkit-transform: skewY(3deg);
-moz-transform: skewY(2deg); -moz-transform: skewY(3deg);
-ms-transform: skewY(2deg); -ms-transform: skewY(3deg);
-o-transform: skewY(2deg); -o-transform: skewY(3deg);
transform: skewY(2deg); transform: skewY(3deg);
} }
#cta .intro .left { #cta .intro .left {
text-align: right; text-align: right;
@ -828,18 +815,18 @@ body.page-sub #header .main-links.navbar-nav li + li::before {
padding: 180px 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(-3deg);
-moz-transform: skewY(-2deg); -moz-transform: skewY(-3deg);
-ms-transform: skewY(-2deg); -ms-transform: skewY(-3deg);
-o-transform: skewY(-2deg); -o-transform: skewY(-3deg);
transform: skewY(-2deg); transform: skewY(-3deg);
} }
#demos > .container { #demos > .container {
-webkit-transform: skewY(2deg); -webkit-transform: skewY(3deg);
-moz-transform: skewY(2deg); -moz-transform: skewY(3deg);
-ms-transform: skewY(2deg); -ms-transform: skewY(3deg);
-o-transform: skewY(2deg); -o-transform: skewY(3deg);
transform: skewY(2deg); transform: skewY(3deg);
} }
#demos .explantion { #demos .explantion {
margin: 40px 0 60px 15px; margin: 40px 0 60px 15px;
@ -954,6 +941,22 @@ body.page-sub #header .main-links.navbar-nav li + li::before {
#demos .terminals .terminal-item .feature-bullets li { #demos .terminals .terminal-item .feature-bullets li {
padding: 5px 0 5px 45px; padding: 5px 0 5px 45px;
} }
@media (max-width: 992px) {
#features .double-row {
padding: 0 0 0 0;
}
#features .double-row .row {
padding-bottom: 90px;
}
#features .icn {
height: 200px;
}
}
@media (max-width: 480px) {
#features {
text-align: center;
}
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#demos .terminals .terminal-item .feature-bullets li { #demos .terminals .terminal-item .feature-bullets li {
background-size: 12px 12px; background-size: 12px 12px;