mirror of
https://github.com/bigchaindb/site.git
synced 2024-11-25 11:08:29 +01:00
menu/header/hero refactor, new row--wide
This commit is contained in:
parent
d9daf91a50
commit
f41a33f0ac
@ -27,6 +27,7 @@
|
||||
@import 'bigchain/_alerts';
|
||||
@import 'bigchain/_code';
|
||||
@import 'bigchain/_syntax';
|
||||
@import 'bigchain/_hero';
|
||||
@import 'bigchain/_header';
|
||||
@import 'bigchain/_footer';
|
||||
@import 'bigchain/_team';
|
||||
|
@ -1,8 +1,18 @@
|
||||
|
||||
.footer {
|
||||
@extend .small;
|
||||
padding-top: $spacer;
|
||||
padding-bottom: $spacer;
|
||||
text-align: center;
|
||||
border-top: 1px solid $gray-lightest;
|
||||
color: $gray-light;
|
||||
}
|
||||
|
||||
.footer__copyright {
|
||||
&,
|
||||
small {
|
||||
@extend .mini;
|
||||
}
|
||||
|
||||
@media ($screen-md) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
@ -36,12 +36,16 @@
|
||||
}
|
||||
|
||||
.row {
|
||||
max-width: 45em;
|
||||
max-width: $screen-md-min;
|
||||
margin: auto;
|
||||
padding-left: $gutter-space;
|
||||
padding-right: $gutter-space;
|
||||
}
|
||||
|
||||
.row--wide {
|
||||
max-width: 60rem;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Alignment per row
|
||||
|
@ -1,6 +1,5 @@
|
||||
.header {
|
||||
position: relative;
|
||||
padding-top: 60px; // space for absolute menu
|
||||
|
||||
// background
|
||||
background: url('../img/photo1.jpg') no-repeat center bottom;
|
||||
|
109
_src/_assets/styles/bigchain/_hero.scss
Normal file
109
_src/_assets/styles/bigchain/_hero.scss
Normal file
@ -0,0 +1,109 @@
|
||||
//
|
||||
// Hero
|
||||
// ---
|
||||
// bigchain.io
|
||||
//
|
||||
|
||||
$menu-height-md: 73px;
|
||||
|
||||
.hero {
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,.1);
|
||||
|
||||
.section {
|
||||
@media ($screen-md) {
|
||||
min-height: calc(100vh - #{$menu-height-md});
|
||||
}
|
||||
}
|
||||
|
||||
// background
|
||||
background: url('../img/photo1.jpg') no-repeat center bottom;
|
||||
background-size: cover;
|
||||
|
||||
// color overlay
|
||||
&:before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(to top left, $brand-main-blue 0%, $brand-main-brown 100%);
|
||||
opacity: .7;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.logo--full {
|
||||
fill: #fff;
|
||||
fill-opacity: .8;
|
||||
margin: auto;
|
||||
max-width: 31em;
|
||||
|
||||
@media ($screen-sm) {
|
||||
margin-top: -$menu-height-md;
|
||||
margin-bottom: ($spacer * 2);
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: #fff;
|
||||
margin-bottom: $spacer;
|
||||
|
||||
&:after { display: none }
|
||||
}
|
||||
|
||||
.btn {
|
||||
color: #fff;
|
||||
margin-top: ($spacer * 4);
|
||||
opacity: .8;
|
||||
|
||||
&:hover,
|
||||
&:focus { opacity: 1; }
|
||||
|
||||
// the caret
|
||||
.icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
stroke: #fff;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// intro animation
|
||||
.logo--full,
|
||||
.section-title,
|
||||
.btn {
|
||||
@extend .animation-slide-in-from-bottom;
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
|
||||
.logo--full {
|
||||
animation-timing-function: $timing-default;
|
||||
}
|
||||
|
||||
.section-title,
|
||||
.btn {
|
||||
@extend .animation-slide-in-from-bottom;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.btn { animation-delay: .2s; }
|
||||
|
||||
&.is-ready {
|
||||
.section-title,
|
||||
.btn {
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
@ -1,16 +1,56 @@
|
||||
|
||||
.menu {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
.grid__col {
|
||||
text-align: center;
|
||||
|
||||
@media ($screen-md) {
|
||||
text-align: left;
|
||||
|
||||
&:last-child { text-align: right; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
@extend .small;
|
||||
display: inline-block;
|
||||
padding: $spacer;
|
||||
padding: ($spacer * 1.5) $spacer;
|
||||
text-transform: uppercase;
|
||||
|
||||
// link line
|
||||
&:after {
|
||||
content: "";
|
||||
height: 2px;
|
||||
width: 30px;
|
||||
background: #fff;
|
||||
display: block;
|
||||
margin: ($spacer / 3) auto 0 auto;
|
||||
// hidden by default
|
||||
transform: scale(0);
|
||||
transform-origin: center;
|
||||
transition: transform .2s ease-out;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
// show link line
|
||||
&:after { transform: scale(1); }
|
||||
}
|
||||
}
|
||||
|
||||
.menu__logo {
|
||||
display: block;
|
||||
margin-top: $spacer;
|
||||
|
||||
@media ($screen-md) {
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
@extend .transition;
|
||||
fill: #fff;
|
||||
@ -29,47 +69,50 @@
|
||||
// in front page hero or page headers
|
||||
//
|
||||
.menu--main {
|
||||
position: absolute;;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
height: 60px;
|
||||
.menu__logo {
|
||||
@media ($screen-md) {
|
||||
padding: ($spacer/1.2) 0 ($spacer * 1.5) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
color: #fff;
|
||||
opacity: .8;
|
||||
|
||||
// link line
|
||||
&:after {
|
||||
content: "";
|
||||
height: 2px;
|
||||
width: 30px;
|
||||
background: #fff;
|
||||
display: block;
|
||||
margin: ($spacer / 3) auto 0 auto;
|
||||
// hidden by default
|
||||
transform: scale(0);
|
||||
transform-origin: center;
|
||||
transition: transform .2s ease-out;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active {
|
||||
opacity: 1;
|
||||
|
||||
// show link line
|
||||
&:after { transform: scale(1); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Footer Menu
|
||||
//
|
||||
.menu--footer {
|
||||
@extend .text-center;
|
||||
.logo {
|
||||
fill: $gray;
|
||||
opacity: 1;
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
@extend .mini;
|
||||
padding: $spacer ($spacer/1.5);
|
||||
color: $gray;
|
||||
|
||||
// link line
|
||||
&:after {
|
||||
background: $link-color;
|
||||
}
|
||||
|
||||
&:first-child { padding-left: 0; }
|
||||
&:last-child { padding-right: 0; }
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.active { color: $link-color; }
|
||||
}
|
||||
}
|
||||
|
@ -77,9 +77,9 @@ $link-hover-color: darken($link-color, 15%) !default;
|
||||
//
|
||||
// Responsive breakpoints
|
||||
//
|
||||
$screen-sm-min: 35em !default;
|
||||
$screen-md-min: 45em !default;
|
||||
$screen-lg-min: 75em !default;
|
||||
$screen-sm-min: 35rem !default;
|
||||
$screen-md-min: 45rem !default;
|
||||
$screen-lg-min: 70rem !default;
|
||||
|
||||
$screen-sm: 'min-width: #{$screen-sm-min}';
|
||||
$screen-md: 'min-width: #{$screen-md-min}';
|
||||
|
@ -4,114 +4,6 @@
|
||||
// bigchain.io
|
||||
//
|
||||
|
||||
.hero {
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-shadow: 0 1px 0 rgba(0,0,0,.1);
|
||||
min-height: 100vh;
|
||||
|
||||
// background
|
||||
background: url('../img/photo1.jpg') no-repeat center bottom;
|
||||
background-size: cover;
|
||||
|
||||
// color overlay
|
||||
&:before {
|
||||
content: "";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
//background: $brand-main-brown;
|
||||
background: linear-gradient(to top left, $brand-main-blue 0%, $brand-main-brown 100%);
|
||||
opacity: .7;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
fill-opacity: .6;
|
||||
margin: auto;
|
||||
max-width: 28em;
|
||||
|
||||
@media ($screen-sm) {
|
||||
margin-top: -($spacer * 6);
|
||||
margin-bottom: ($spacer * 2);
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: #fff;
|
||||
margin-bottom: $spacer;
|
||||
|
||||
&:after { display: none }
|
||||
}
|
||||
|
||||
.btn {
|
||||
color: #fff;
|
||||
margin-top: ($spacer * 4);
|
||||
opacity: .8;
|
||||
|
||||
&:hover,
|
||||
&:focus { opacity: 1; }
|
||||
|
||||
// the caret
|
||||
.icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
stroke: #fff;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// intro animation
|
||||
.logo,
|
||||
.section-title,
|
||||
.btn {
|
||||
@extend .animation-slide-in-from-bottom;
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: backwards;
|
||||
}
|
||||
|
||||
.logo {
|
||||
animation-timing-function: $timing-default;
|
||||
}
|
||||
|
||||
.section-title,
|
||||
.btn {
|
||||
@extend .animation-slide-in-from-bottom;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.btn { animation-delay: .2s; }
|
||||
|
||||
&.is-ready {
|
||||
.section-title,
|
||||
.btn {
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero__content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: 60px; // space for absolute menu
|
||||
}
|
||||
|
||||
.hero__comingsoon {
|
||||
text-shadow: none;
|
||||
display: block;
|
||||
color: rgba($brand-main-blue-dark, .9);
|
||||
margin-top: ($spacer * 2);
|
||||
margin-bottom: ($spacer * 2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.section-features {
|
||||
text-align: center;
|
||||
border-bottom: 1px solid lighten($brand-main-gray, 40%);
|
||||
|
@ -12,7 +12,7 @@ footer:
|
||||
url: /about/
|
||||
- title: Contact
|
||||
url: /contact/
|
||||
- title: Terms of Service
|
||||
- title: Terms
|
||||
url: /tos/
|
||||
- title: Privacy
|
||||
url: /privacy/
|
||||
|
@ -1,9 +1,10 @@
|
||||
|
||||
<footer class="footer" role="contentinfo">
|
||||
<div class="row">
|
||||
<div class="row row--wide">
|
||||
|
||||
{% include menu-footer.html %}
|
||||
|
||||
<p><small>© {{ site.time | date: "%Y" }} {{ site.name }}</small></p>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
|
@ -1,14 +1,34 @@
|
||||
<nav class="menu menu--footer">
|
||||
<div class="row">
|
||||
{% for link in site.data.menus.footer %}
|
||||
<div class="grid grid--full grid-medium--half">
|
||||
<div class="grid__col">
|
||||
<a class="menu__logo" href="/">
|
||||
<svg class="logo logo--sm" aria-labelledby="title">
|
||||
<title>Logo</title>
|
||||
<use xlink:href="/assets/img/sprite.svg#logo"></use>
|
||||
</svg>
|
||||
</a>
|
||||
{% for link in site.data.menus.main %}
|
||||
|
||||
{% assign active = nil %}
|
||||
{% if page.url contains link.url %}
|
||||
{% assign active = 'active' %}
|
||||
{% endif %}
|
||||
{% assign active = nil %}
|
||||
{% if page.url contains link.url %}
|
||||
{% assign active = 'active' %}
|
||||
{% endif %}
|
||||
|
||||
<a class="menu__link" class="{{ active }}" href="{{ link.url }}">{{ link.title }}</a>
|
||||
<a class="menu__link" class="{{ active }}" href="{{ link.url }}">{{ link.title }}</a>
|
||||
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="grid__col">
|
||||
{% for link in site.data.menus.footer %}
|
||||
|
||||
{% assign active = nil %}
|
||||
{% if page.url contains link.url %}
|
||||
{% assign active = 'active' %}
|
||||
{% endif %}
|
||||
|
||||
<a class="menu__link" class="{{ active }}" href="{{ link.url }}">{{ link.title }}</a>
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<nav class="menu menu--main">
|
||||
<div class="row">
|
||||
<div class="row row--wide">
|
||||
|
||||
<div class="grid grid--full grid-small--fit grid--center">
|
||||
<div class="grid grid--full grid-medium--half grid--center">
|
||||
<div class="grid__col">
|
||||
<a class="menu__logo" href="/">
|
||||
<svg class="logo logo--sm" aria-labelledby="title">
|
||||
|
@ -6,11 +6,12 @@ front_page: true
|
||||
tagline: 'Meet Bigchain, the world’s most scalable blockchain'
|
||||
---
|
||||
|
||||
{% include menu-main.html %}
|
||||
<header class="hero">
|
||||
|
||||
<header class="section hero">
|
||||
<div class="row">
|
||||
<div class="hero__content">
|
||||
{% include menu-main.html %}
|
||||
|
||||
<div class="section">
|
||||
<div class="hero__content row">
|
||||
<svg class="logo logo--full logo--white" aria-labelledby="title">
|
||||
<title>BigchainDB</title>
|
||||
<use xlink:href="/assets/img/sprite.svg#logo"></use>
|
||||
|
Loading…
Reference in New Issue
Block a user