bigchaindb
/
site
mirror of https://github.com/bigchaindb/site.git
1
0
Fork 0
Code Releases Activity

new on-page sub menu

This commit is contained in:
Matthias Kretschmann 2017-06-27 20:39:49 +02:00
parent 095e60d7c7
commit 43c75dd5ca
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 79 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
_src/_assets/styles/_page-getstarted.scss
View File

@ -418,32 +418,3 @@
opacity: .8;
}
}
//
// Sticky sub menu
//
body {
position: relative;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 2;
@supports (position: sticky) {
position: sticky;
}
.menu__link {
@media ($screen-sm) {
padding-top: $spacer;
padding-bottom: $spacer;
&:after {
bottom: $spacer / 2;
}
}
}
}

1
_src/_assets/styles/_page-usecases.scss
View File

@ -137,7 +137,6 @@
}
}
//
// Single use case page
//

81
_src/_assets/styles/bigchain/_menus.scss
View File

@ -116,7 +116,6 @@
}
}
//
// Main menu overlaying a dark background image
// in front page hero or page headers
@ -220,7 +219,6 @@
}
}
.footer__copyright {
border-top: 1px solid $brand-main-gray;
text-align: center;
@ -256,7 +254,6 @@
}
}
//
// ERDF logo
//
@ -289,13 +286,18 @@
display: inline-block;
}
//
// On-page sub menu
//
.menu--sub {
@include transition;
background: rgba(lighten($gray, 30%), .85);
backdrop-filter: saturate(200%) blur(10px);
transform: translate3d(0, 0, 0);
background: lighten($gray, 30%);
a {
.menu__link {
color: $gray-dark;
margin-left: $spacer;
margin-right: $spacer;
&:after {
background: darken($gray-dark, 10%);
@ -316,7 +318,72 @@
vertical-align: baseline;
margin-right: $spacer / 6;
margin-bottom: -2px;
stroke-width: 3px;
stroke-width: 4px; // that's weird
color: $gray;
stroke: $gray-dark;
}
.number {
text-align: center;
display: inline-block;
width: 1rem;
height: 1rem;
border-radius: 50%;
font-size: $font-size-xs;
vertical-align: .1rem;
background: $gray;
color: $gray-light;
font-weight: $font-weight-bold;
line-height: 1rem;
margin-right: .2rem;
margin-left: -1.2rem;
}
&.sticky {
background: rgba(lighten($gray, 30%), .85);
backdrop-filter: saturate(200%) blur(10px);
box-shadow: 0 2px 6px rgba($gray-dark, .4);
// fake less padding and smaller menu bar
// for performant and smoooth transition
transform: translate3d(0, -2rem, 0);
.menu__link {
@media ($screen-sm) {
transform: scale(.85) translate3d(0, .6rem, 0);
transform-origin: bottom;
}
&.active {
color: $headings-color;
.number {
background: $headings-color;
color: $gray;
}
&:after {
background: $headings-color;
}
}
}
}
}
//
// Sticky sub menu
//
body {
position: relative;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 2;
@supports (position: sticky) {
position: sticky;
}
}

10
_src/getstarted.html
View File

@ -69,10 +69,10 @@ redirect_from:
<nav class="menu--sub" data-gumshoe-header>
<div class="row row--wide">
<div class="menu-overflow" data-gumshoe>
<a class="menu__link scroll" href="#server">{{ content.server.title }}</a>
<a class="menu__link scroll" href="#drivers">{{ content.drivers.title }}</a>
<a class="menu__link scroll" href="#docs">{{ content.docs.title }}</a>
<a class="menu__link scroll" href="#community">{{ content.community.title }}</a>
<a class="menu__link scroll" href="#server"><span class="number">1</span> {{ content.server.title }}</a>
<a class="menu__link scroll" href="#drivers"><span class="number">2</span> {{ content.drivers.title }}</a>
<a class="menu__link scroll" href="#docs"><span class="number">3</span> {{ content.docs.title }}</a>
<a class="menu__link scroll" href="#community"><span class="number">4</span> {{ content.community.title }}</a>
</div>
</div>
</nav>
@ -88,7 +88,7 @@ redirect_from:
<section class="section section--server background--darker" id="server">
<div class="row row--wide">
<header class="section-header text-left">
<h1 class="section-title section-title--numbered"><span>1</span> {{ content.server.title }}</h1>
<h1 class="section-title section-title--numbered"><span class="number">1</span> {{ content.server.title }}</h1>
<p class="section-description">{{ content.server.description }}</p>
</header>
</div>