From 1cf62ddea52c6bc24c1a12e695469a42c1c55c6d Mon Sep 17 00:00:00 2001 From: JT Date: Thu, 24 Jul 2014 12:28:00 -0700 Subject: [PATCH] more responsive changes --- website/source/stylesheets/_home.less | 60 +++++++++++++++++++++++---- website/source/stylesheets/main.css | 42 ++++++++++++++++--- 2 files changed, 89 insertions(+), 13 deletions(-) diff --git a/website/source/stylesheets/_home.less b/website/source/stylesheets/_home.less index 1cdb3b552..ead68b975 100755 --- a/website/source/stylesheets/_home.less +++ b/website/source/stylesheets/_home.less @@ -217,7 +217,6 @@ &:focus { outline: 0; } - } a { @@ -435,10 +434,21 @@ } +@media (max-width: 1200px) { + #feature-iterate{ + h2{ + font-size: 40px; + } -@media (max-width: 480px) { - #features{ - text-align: center; + .it-icon{ + margin-top: 52px; + } + + .t-block{ + width: 73px; + height: 73px; + margin-right: 20px; + } } } @@ -451,6 +461,15 @@ } } + #feature-iterate{ + .it-icon{ + width: 372px; + margin: 0 auto 40px; + padding-left: 0 !important; + } + } + + #feature-clone{ .clone-icon{ width: 382px; @@ -535,7 +554,17 @@ } } -@media (max-width: 320px) { + +@media (max-width: 480px) { + + #demos .explantion { + margin: 40px 0 60px 0; + } + + #feature-auto .terminal-text { + font-size: 24px; + } + .feature{ h2{ text-align: center; @@ -549,6 +578,22 @@ } } + #features{ + text-align: center; + } +} + + +@media (max-width: 320px) { + + #feature-clone{ + .clone-icon{ + width: 320px; + margin: 40px auto 0; + padding-left: 0 !important; + } + } + #feature-iterate{ margin-top: -80px; padding: 280px 0 360px; @@ -570,8 +615,9 @@ } .it-icon{ - margin-left: 45px; - margin-bottom: 40px; + width: 320px; + margin: 0 auto 40px; + padding-left: 0 !important; } .t-block{ diff --git a/website/source/stylesheets/main.css b/website/source/stylesheets/main.css index a00ad9b27..53bd3e199 100644 --- a/website/source/stylesheets/main.css +++ b/website/source/stylesheets/main.css @@ -1018,9 +1018,17 @@ body.page-home #footer { font-size: 32px; } } -@media (max-width: 480px) { - #features { - text-align: center; +@media (max-width: 1200px) { + #feature-iterate h2 { + font-size: 40px; + } + #feature-iterate .it-icon { + margin-top: 52px; + } + #feature-iterate .t-block { + width: 73px; + height: 73px; + margin-right: 20px; } } @media (max-width: 992px) { @@ -1029,6 +1037,11 @@ body.page-home #footer { text-align: center !important; padding-left: 0 !important; } + #feature-iterate .it-icon { + width: 372px; + margin: 0 auto 40px; + padding-left: 0 !important; + } #feature-clone .clone-icon { width: 382px; margin: 40px auto 0; @@ -1072,7 +1085,13 @@ body.page-home #footer { margin-bottom: 15px; } } -@media (max-width: 320px) { +@media (max-width: 480px) { + #demos .explantion { + margin: 40px 0 60px 0; + } + #feature-auto .terminal-text { + font-size: 24px; + } .feature h2 { text-align: center; font-size: 28px !important; @@ -1083,6 +1102,16 @@ body.page-home #footer { text-align: center !important; padding: 0 !important; } + #features { + text-align: center; + } +} +@media (max-width: 320px) { + #feature-clone .clone-icon { + width: 320px; + margin: 40px auto 0; + padding-left: 0 !important; + } #feature-iterate { margin-top: -80px; padding: 280px 0 360px; @@ -1110,8 +1139,9 @@ body.page-home #footer { font-weight: 100; } #feature-iterate .it-icon { - margin-left: 45px; - margin-bottom: 40px; + width: 320px; + margin: 0 auto 40px; + padding-left: 0 !important; } #feature-iterate .t-block { background-color: #ffffff;