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

feature auto responive small screen

This commit is contained in:
JT 2014-07-24 11:58:22 -07:00
parent 9b59821bf1
commit 963048faf0
2 changed files with 99 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,7 +50,7 @@
} }
h2{ h2{
font-size: 41px font-size: 43px
} }
p{ p{
@ -63,8 +63,8 @@
color: white; color: white;
line-height: 88px; line-height: 88px;
text-align: center; text-align: center;
margin: 60px 20px 0; margin: 81px 20px 0;
font-size: 35px; font-size: 30px;
font-family: "Courier New", Monaco, Menlo, Consolas, monospace; font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
} }
} }
@ -380,6 +380,22 @@
} }
} }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#demos{
.terminals{
.terminal-item{
.feature-bullets{
li{
background-size: 12px 12px;
}
}
}
}
}
}
@media (min-width: 1500px) { @media (min-width: 1500px) {
#feature-auto{ #feature-auto{
@ -402,46 +418,30 @@
} }
} }
@media (min-width: 1200px) {
@media (max-width: 992px) { #feature-auto{
#features{ h2{
.double-row{ font-size: 41px;
padding: 0 0 0 0;
.row{
padding-bottom: 90px;
}
} }
.terminal-text{
.icn{ background: black;
height: 200px; color: white;
line-height: 88px;
text-align: center;
margin: 60px 20px 0;
font-size: 32px;
} }
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
#features{ #features{
text-align: center; text-align: center;
} }
} }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#demos{
.terminals{
.terminal-item{
.feature-bullets{
li{
background-size: 12px 12px;
}
}
}
}
}
}
@media (max-width: 992px) { @media (max-width: 992px) {
.feature{ .feature{
@ -451,6 +451,35 @@
} }
} }
#feature-clone{
.clone-icon{
width: 382px;
margin: 40px auto 0;
padding-left: 0 !important;
}
}
#feature-auto{
h2{
font-size: 43px
}
p{
text-align: right;
padding-left: 100px;
}
.terminal-text{
background: black;
color: white;
line-height: 88px;
text-align: center;
margin: 60px 20px 0;
font-size: 32px;
}
}
#demos{ #demos{
.terminals{ .terminals{
.terminal-item{ .terminal-item{
@ -476,7 +505,6 @@
text-align: center; text-align: center;
} }
} }
#demos{ #demos{
.terminals{ .terminals{

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

@ -679,7 +679,7 @@ body.page-home #footer {
transform: skewY(3deg); transform: skewY(3deg);
} }
#feature-auto h2 { #feature-auto h2 {
font-size: 41px; font-size: 43px;
} }
#feature-auto p { #feature-auto p {
text-align: right; text-align: right;
@ -690,8 +690,8 @@ body.page-home #footer {
color: white; color: white;
line-height: 88px; line-height: 88px;
text-align: center; text-align: center;
margin: 60px 20px 0; margin: 81px 20px 0;
font-size: 35px; font-size: 30px;
font-family: "Courier New", Monaco, Menlo, Consolas, monospace; font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
} }
#feature-iterate { #feature-iterate {
@ -983,6 +983,11 @@ body.page-home #footer {
#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 (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#demos .terminals .terminal-item .feature-bullets li {
background-size: 12px 12px;
}
}
@media (min-width: 1500px) { @media (min-width: 1500px) {
#feature-auto { #feature-auto {
padding: 270px 0 400px; padding: 270px 0 400px;
@ -1000,15 +1005,17 @@ body.page-home #footer {
padding-top: 240px; padding-top: 240px;
} }
} }
@media (max-width: 992px) { @media (min-width: 1200px) {
#features .double-row { #feature-auto h2 {
padding: 0 0 0 0; font-size: 41px;
} }
#features .double-row .row { #feature-auto .terminal-text {
padding-bottom: 90px; background: black;
} color: white;
#features .icn { line-height: 88px;
height: 200px; text-align: center;
margin: 60px 20px 0;
font-size: 32px;
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
@ -1016,17 +1023,32 @@ body.page-home #footer {
text-align: center; text-align: center;
} }
} }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#demos .terminals .terminal-item .feature-bullets li {
background-size: 12px 12px;
}
}
@media (max-width: 992px) { @media (max-width: 992px) {
.feature h2, .feature h2,
.feature p { .feature p {
text-align: center !important; text-align: center !important;
padding-left: 0 !important; padding-left: 0 !important;
} }
#feature-clone .clone-icon {
width: 382px;
margin: 40px auto 0;
padding-left: 0 !important;
}
#feature-auto h2 {
font-size: 43px;
}
#feature-auto p {
text-align: right;
padding-left: 100px;
}
#feature-auto .terminal-text {
background: black;
color: white;
line-height: 88px;
text-align: center;
margin: 60px 20px 0;
font-size: 32px;
}
#demos .terminals .terminal-item > header .right { #demos .terminals .terminal-item > header .right {
padding-left: 54px; padding-left: 54px;
} }