diff --git a/website/source/assets/stylesheets/_home.scss b/website/source/assets/stylesheets/_home.scss index ac15183475..0519ec5e4c 100755 --- a/website/source/assets/stylesheets/_home.scss +++ b/website/source/assets/stylesheets/_home.scss @@ -10,6 +10,8 @@ body.page-home{ padding: 130px 0 0 0; background: #f8f8f8 image-url('hero-dots-below@2x.png') center top no-repeat; background-size: 1280px 49px; + position: relative; + top: $negative-hero-margin; .double-row{ padding: 0 0 50px 0; @@ -158,6 +160,7 @@ body.page-home{ @media (max-width: 992px) { #features{ + top: $large-negative-hero-margin; .double-row{ padding: 0 0 0 0; .row{ @@ -412,4 +415,8 @@ body.page-home{ } } - +@media (max-width: 480px) { + #features { + top: $negative-hero-margin; + } +} diff --git a/website/source/assets/stylesheets/_jumbotron.scss b/website/source/assets/stylesheets/_jumbotron.scss index 9b776e58dc..99e998354b 100755 --- a/website/source/assets/stylesheets/_jumbotron.scss +++ b/website/source/assets/stylesheets/_jumbotron.scss @@ -2,11 +2,20 @@ // Jumbotron // -------------------------------------------------- -#jumbotron-mask{ +#jumbotron-mask, +#jumbotron-mask-dummy{ overflow: hidden; width: 100%; height: $jumbotron-total-height; - margin-top: $negative-hero-margin; +} +#jumbotron-mask { + position: absolute; + top: 0; +} +#jumbotron-mask-dummy{ + visibility: hidden; + position:relative; + top: $negative-hero-margin; } #jumbotron { @@ -42,7 +51,7 @@ height: 100%; margin-top: $header-height; -webkit-backface-visibility:hidden; - + .jumbo-logo-wrap{ margin-top: 135px; @@ -72,6 +81,9 @@ margin-left: 0; } } + #jumbotron-mask-dummy{ + top: $large-negative-hero-margin; + } } @media (max-width: 480px) { diff --git a/website/source/assets/stylesheets/_variables.scss b/website/source/assets/stylesheets/_variables.scss index 70c59c1f63..50dc53473e 100755 --- a/website/source/assets/stylesheets/_variables.scss +++ b/website/source/assets/stylesheets/_variables.scss @@ -13,6 +13,7 @@ $jumbotron-color: #fff; $btn-border-radius: 4px; $el-border-radius: 6px; $negative-hero-margin: -93px; +$large-negative-hero-margin: -154px; // colors // ------------------------- diff --git a/website/source/index.html.erb b/website/source/index.html.erb index 6f09e33560..d69c7638b5 100644 --- a/website/source/index.html.erb +++ b/website/source/index.html.erb @@ -21,6 +21,25 @@ description: Service discovery and configuration made easy. Distributed, highly
+ +