1
0
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:
Matthias Kretschmann 2016-01-17 17:57:55 +01:00
parent d9daf91a50
commit f41a33f0ac
13 changed files with 237 additions and 157 deletions

View File

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

View File

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

View File

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

View File

@ -1,6 +1,5 @@
.header {
position: relative;
padding-top: 60px; // space for absolute menu
// background
background: url('../img/photo1.jpg') no-repeat center bottom;

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

View File

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

View File

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

View File

@ -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%);

View File

@ -12,7 +12,7 @@ footer:
url: /about/
- title: Contact
url: /contact/
- title: Terms of Service
- title: Terms
url: /tos/
- title: Privacy
url: /privacy/

View File

@ -1,9 +1,10 @@
<footer class="footer" role="contentinfo">
<div class="row">
<div class="row row--wide">
{% include menu-footer.html %}
<p><small>&copy; {{ site.time | date: "%Y" }} {{ site.name }}</small></p>
</div>
</footer>

View File

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

View File

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

View File

@ -6,11 +6,12 @@ front_page: true
tagline: 'Meet Bigchain, the worlds 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>