luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

fix for jumping header issues on the website 

this fix was both a bit more involved and a bit hackier than I was hoping the
soultion would be, but that's how things go sometimes

to test:
 - open up the website in a browser and resize your window
 - make sure that the nav is always legible
This commit is contained in:
Matthew Irish 2015-10-26 14:51:03 -05:00
parent 41458dbbed
commit 36dd2cd9d0
4 changed files with 43 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
website/source/assets/stylesheets/_home.scss
View File

@ -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;
}
}

16
website/source/assets/stylesheets/_jumbotron.scss
View File

@ -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 {
@ -72,6 +81,9 @@
margin-left: 0;
}
}
#jumbotron-mask-dummy{
top: $large-negative-hero-margin;
}
}
@media (max-width: 480px) {

1
website/source/assets/stylesheets/_variables.scss
View File

@ -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
// -------------------------

19
website/source/index.html.erb
View File

@ -21,6 +21,25 @@ description: Service discovery and configuration made easy. Distributed, highly
<div class="jumbotron-dots"></div>
</div>
</div>
<!-- Make sure that any changes made to jumbotron are reproduced here as this takes up the space in the layout -->
<div id="jumbotron-mask-dummy" aria-hidden="true">
<div id="jumbotron">
<div class="container">
<div class="col-lg-6 col-md-6">
<h2 class="rls-l">
Service discovery and configuration made easy.
Distributed, highly available, and
datacenter-aware.
</h2>
</div>
<div class="jumbo-logo-wrap col-lg-offset-1 col-lg-5 col-md-6 hidden-xs hidden-sm">
<div class="jumbo-logo"></div>
</div>
<!-- <p><a class="btn btn-primary btn-lg">Learn more &raquo;</a></p> -->
</div>
<div class="jumbotron-dots"></div>
</div>
</div>
<div id="features">
<div class="container">