status-im/consul
2
0
Fork 0
mirror of https://github.com/status-im/consul.git synced 2025-02-23 10:58:25 +00:00
Code Issues Projects Releases Wiki Activity

fix for jumping header issues on the website

Browse Source 
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 13ef4836f2
commit aa921bdbca
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; padding: 130px 0 0 0;
background: #f8f8f8 image-url('hero-dots-below@2x.png') center top no-repeat; background: #f8f8f8 image-url('hero-dots-below@2x.png') center top no-repeat;
background-size: 1280px 49px; background-size: 1280px 49px;
position: relative;
top: $negative-hero-margin;
.double-row{ .double-row{
padding: 0 0 50px 0; padding: 0 0 50px 0;
@ -158,6 +160,7 @@ body.page-home{
@media (max-width: 992px) { @media (max-width: 992px) {
#features{ #features{
top: $large-negative-hero-margin;
.double-row{ .double-row{
padding: 0 0 0 0; padding: 0 0 0 0;
.row{ .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
// -------------------------------------------------- // --------------------------------------------------
#jumbotron-mask{ #jumbotron-mask,
#jumbotron-mask-dummy{
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: $jumbotron-total-height; 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 { #jumbotron {
@ -72,6 +81,9 @@
margin-left: 0; margin-left: 0;
} }
} }
#jumbotron-mask-dummy{
top: $large-negative-hero-margin;
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {

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

@ -13,6 +13,7 @@ $jumbotron-color: #fff;
$btn-border-radius: 4px; $btn-border-radius: 4px;
$el-border-radius: 6px; $el-border-radius: 6px;
$negative-hero-margin: -93px; $negative-hero-margin: -93px;
$large-negative-hero-margin: -154px;
// colors // 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 class="jumbotron-dots"></div>
</div> </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 id="features">
<div class="container"> <div class="container">