diff --git a/_config.yml b/_config.yml index b53922f..c2b2a2b 100644 --- a/_config.yml +++ b/_config.yml @@ -25,6 +25,10 @@ social: title: Twitter handle: bigchaindb url: https://twitter.com/bigchaindb + facebook: + title: Facebook + handle: bigchaindb + url: https://www.facebook.com/BigchainDB/ medium: title: Blog url: https://blog.bigchaindb.com @@ -36,7 +40,7 @@ social: url: https://www.linkedin.com/company/bigchaindb youtube: title: YouTube - url: https://www.youtube.com/channel/UCh0Y3p3kJ9oyz9CRgZaO05w + url: https://www.youtube.com/bigchaindb address: company: BigchainDB GmbH diff --git a/_src/_assets/images/header-berlin.jpg b/_src/_assets/images/header-berlin.jpg new file mode 100644 index 0000000..bc7991b Binary files /dev/null and b/_src/_assets/images/header-berlin.jpg differ diff --git a/_src/_assets/images/icon-book.svg b/_src/_assets/images/icon-book.svg new file mode 100644 index 0000000..664e706 --- /dev/null +++ b/_src/_assets/images/icon-book.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/_src/_assets/images/logo-cli.svg b/_src/_assets/images/logo-cli.svg new file mode 100644 index 0000000..5331c41 --- /dev/null +++ b/_src/_assets/images/logo-cli.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/_src/_assets/images/logo-go.svg b/_src/_assets/images/logo-go.svg new file mode 100644 index 0000000..c34b739 --- /dev/null +++ b/_src/_assets/images/logo-go.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/_src/_assets/images/logo-haskell.svg b/_src/_assets/images/logo-haskell.svg new file mode 100644 index 0000000..3c18a8d --- /dev/null +++ b/_src/_assets/images/logo-haskell.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/_src/_assets/images/logo-java.svg b/_src/_assets/images/logo-java.svg new file mode 100644 index 0000000..8488218 --- /dev/null +++ b/_src/_assets/images/logo-java.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/_src/_assets/images/logo-js.svg b/_src/_assets/images/logo-js.svg new file mode 100644 index 0000000..d89dbbe --- /dev/null +++ b/_src/_assets/images/logo-js.svg @@ -0,0 +1,3 @@ + + + diff --git a/_src/_assets/images/logo-python.svg b/_src/_assets/images/logo-python.svg new file mode 100644 index 0000000..28f7c5c --- /dev/null +++ b/_src/_assets/images/logo-python.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/_src/_assets/images/logo-ruby.svg b/_src/_assets/images/logo-ruby.svg new file mode 100644 index 0000000..3901685 --- /dev/null +++ b/_src/_assets/images/logo-ruby.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/_src/_assets/images/logo-swift.svg b/_src/_assets/images/logo-swift.svg new file mode 100644 index 0000000..c2cb1cd --- /dev/null +++ b/_src/_assets/images/logo-swift.svg @@ -0,0 +1,3 @@ + + + diff --git a/_src/_assets/images/nosprite/architecture.svg b/_src/_assets/images/nosprite/architecture.svg new file mode 100644 index 0000000..ef37d90 --- /dev/null +++ b/_src/_assets/images/nosprite/architecture.svg @@ -0,0 +1,69 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_src/_assets/images/stack-blockchain.svg b/_src/_assets/images/nosprite/stack-blockchain.svg similarity index 100% rename from _src/_assets/images/stack-blockchain.svg rename to _src/_assets/images/nosprite/stack-blockchain.svg diff --git a/_src/_assets/images/stack-traditional.svg b/_src/_assets/images/nosprite/stack-traditional.svg similarity index 100% rename from _src/_assets/images/stack-traditional.svg rename to _src/_assets/images/nosprite/stack-traditional.svg diff --git a/_src/_assets/images/nosprite/starbase-drivers.svg b/_src/_assets/images/nosprite/starbase-drivers.svg new file mode 100644 index 0000000..11eb813 --- /dev/null +++ b/_src/_assets/images/nosprite/starbase-drivers.svg @@ -0,0 +1,814 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_src/_assets/images/nosprite/starbase-server.svg b/_src/_assets/images/nosprite/starbase-server.svg new file mode 100644 index 0000000..fb1be98 --- /dev/null +++ b/_src/_assets/images/nosprite/starbase-server.svg @@ -0,0 +1,482 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/_src/_assets/images/nyan.gif b/_src/_assets/images/nyan.gif new file mode 100644 index 0000000..2df66f9 Binary files /dev/null and b/_src/_assets/images/nyan.gif differ diff --git a/_src/_assets/javascripts/page-community.js b/_src/_assets/javascripts/bigchain/wrigley.js similarity index 54% rename from _src/_assets/javascripts/page-community.js rename to _src/_assets/javascripts/bigchain/wrigley.js index 1411d04..c5e01f3 100644 --- a/_src/_assets/javascripts/page-community.js +++ b/_src/_assets/javascripts/bigchain/wrigley.js @@ -1,52 +1,48 @@ - //=include is-in-viewport/lib/isInViewport.js -//=include bigchain/newsletter.js -//=include bigchain/testimonials.js jQuery(function($) { - Newsletter.init() - Testimonials.init() - + // + // Wrigley + // var wrigley = $('#wrigley'), wrigleyArm = wrigley.find('#arm'), wrigleyHead = wrigley.find('#head'), - wrigleyEye = wrigley.find('#eye'); + wrigleyEye = wrigley.find('#eye') var wrigleyAnimationStart = function() { // set utility classes if (wrigley.is( ':in-viewport( -180 )' ) ) { - wrigley.addClass('is-ready'); + wrigley.addClass('is-ready') // toggle paused class so the :hover interaction can fire animation again wrigleyArm.on('animationend webkitAnimationEnd oAnimationEnd', function(e) { - wrigleyArm.addClass('paused'); - wrigleyHead.addClass('paused'); + wrigleyArm.addClass('paused') + wrigleyHead.addClass('paused') wrigley.on('mouseover', function() { - wrigleyArm.removeClass('paused'); - wrigleyHead.removeClass('paused'); - }); + wrigleyArm.removeClass('paused') + wrigleyHead.removeClass('paused') + }) // fire eye blinking once other animations have finished - wrigleyEye.addClass('is-ready'); + wrigleyEye.addClass('is-ready') wrigleyEye.on('animationend webkitAnimationEnd oAnimationEnd', function(e) { - wrigleyEye.removeClass('is-ready'); - }); + wrigleyEye.removeClass('is-ready') + }) } - ); + ) } else { - wrigley.removeClass('is-ready').removeClass('paused'); - wrigleyArm.removeClass('paused'); - wrigleyHead.removeClass('paused'); - wrigleyEye.removeClass('is-ready').removeClass('paused'); + wrigley.removeClass('is-ready').removeClass('paused') + wrigleyArm.removeClass('paused') + wrigleyHead.removeClass('paused') + wrigleyEye.removeClass('is-ready').removeClass('paused') } } // fire all the viewport things - wrigleyAnimationStart(); - $(window).on('load resize scroll', wrigleyAnimationStart); - -}); + wrigleyAnimationStart() + $(window).on('load resize scroll', wrigleyAnimationStart) +}) diff --git a/_src/_assets/javascripts/page-getstarted.js b/_src/_assets/javascripts/page-getstarted.js new file mode 100644 index 0000000..11f48cf --- /dev/null +++ b/_src/_assets/javascripts/page-getstarted.js @@ -0,0 +1,146 @@ +//=require gumshoe/dist/js/gumshoe.js + +//=include bigchain/tab.js +//=include bigchain/smoothscroll.js +//=include bigchain/newsletter.js + +jQuery(function($) { + + // + // init modules + // + Newsletter.init() + +}) + + +// +// Scrollspy +// +gumshoe.init() + + +// +// Sticky nav +// +function stickyNav() { + const menu = document.getElementsByClassName('menu--sub')[0] + + if ( window.innerWidth >= 768 ) { + const offset = menu.offsetTop + + window.addEventListener('scroll', function() { + if (offset < window.pageYOffset) { + menu.classList.add('sticky') + } else { + menu.classList.remove('sticky') + } + }, false) + } +} + +stickyNav() + + +// +// BigchainDB transaction tool +// + +// makes this file huuuuge, consider loading this as additional request +//=include bigchaindb-driver/dist/browser/bigchaindb-driver.window.min.js + +window.addEventListener('DOMContentLoaded', function domload(event) { + window.removeEventListener('DOMContentLoaded', domload, false) + + const driver = window.BigchainDB + // const API_PATH = 'https://ipdb-proxy-obyvvvijdi.now.sh/api/v1/' + const API_PATH = 'https://ipdb-proxy-cmpyydtxja.now.sh/api/v1/' + + const form = document.getElementById('form-transaction') + const postButton = document.getElementById('post') + const messageInput = document.getElementById('message') + + // nasty jquery inside of here, YOLO + $(".highlight code:contains('Blockchain all the things!')").html(function(_, html) { + return html.replace(/(Blockchain all the things!)/g, '$1'); + }) + + const codeMessages = document.querySelectorAll('.code-example__message') + + function updateMessage(content) { + const escapedContent = content.replace(/'/g, "\\'") + for (var codeMessage of codeMessages) { + codeMessage.textContent = escapedContent + } + } + // empty default message + updateMessage('') + + // quick form validation, live update code example with user input + messageInput.addEventListener('input', function() { + if (messageInput.value === '') { + postButton.setAttribute('disabled', '') + // empty message again + updateMessage('') + } else { + postButton.removeAttribute('disabled') + + // update code message + updateMessage(messageInput.value) + } + }) + + postButton.addEventListener('click', function(e) { + e.preventDefault() + + const message = messageInput.value + + const alice = new driver.Ed25519Keypair() + const tx = driver.Transaction.makeCreateTransaction( + { message: message }, + null, + [driver.Transaction.makeOutput(driver.Transaction.makeEd25519Condition(alice.publicKey))], + alice.publicKey) + const txSigned = driver.Transaction.signTransaction(tx, alice.privateKey) + + const conn = new driver.Connection(API_PATH) + + const waiting = document.getElementsByClassName('waiting')[0] + const responseArea = document.getElementsByClassName('response')[0] + const output = document.getElementsByClassName('output')[0] + const messageInitial = document.getElementsByClassName('message')[0] + const messageSuccess = document.getElementsByClassName('message--success')[0] + const messageFail = document.getElementsByClassName('message--fail')[0] + const transactionLink = document.getElementsByClassName('transaction-link')[0] + + conn.postTransaction(txSigned).then((response) => { + waiting.classList.add('hide') + messageInitial.classList.add('hide') + responseArea.classList.remove('hide') + messageSuccess.classList.remove('hide') + + console.log(response) + + const outputContent = JSON.stringify(response, null, 2) // indented with 2 spaces + output.textContent = outputContent + + transactionLink.href = 'https://main.ipdb.io/api/v1/transactions/' + response.id + + postButton.classList.add('disabled') + postButton.style.opacity = 0 + + responseArea.children[0].classList.add('nyan') + + }, reason => { // Error! + console.log(reason) + + waiting.classList.add('hide') + responseArea.classList.remove('hide') + messageFail.classList.remove('hide') + + const outputContent = reason.status + ' ' + reason.statusText + output.textContent = outputContent + }).then((res) => console.log('Transaction status:', res.status)) + + }, false) +}, false) diff --git a/_src/_assets/styles/_page-community.scss b/_src/_assets/styles/_page-community.scss deleted file mode 100644 index 0f1956e..0000000 --- a/_src/_assets/styles/_page-community.scss +++ /dev/null @@ -1,169 +0,0 @@ -// -// Page: Community -// --- -// bigchaindb.com -// -.page-community { - .header { - background-position: center top; - } -} - -.section-community { - text-align: center; - position: relative; - // make room for wrigely - padding-bottom: 200px; - - @media ($screen-lg) { - padding-bottom: 0; - } - - .section-header { - .section-description { margin-bottom: ($spacer * 2); } - } - - .grid h1 { - @extend .h3; - margin-top: 0; - } - - .social-link { - &, - .icon { - @include transition; - } - - display: inline-block; - box-shadow: none; - padding: $btn-padding-y-sm $btn-padding-x-sm; - - &:hover, - &:focus { - background: none; - - .icon { - fill: lighten($brand-primary, 10%); - filter: drop-shadow(0 1px 4px rgba($brand-main-blue-dark, .4)); - transform: translateY(-1px); - - &.icon--gitter { - stroke: lighten($brand-primary, 10%); - } - } - } - - &:active { - outline: 0; - - .icon { - fill: $brand-primary; - filter: drop-shadow(0 1px 2px rgba($brand-main-blue-dark, .3)); - transform: translateY(0); - } - } - - .icon { - fill: $brand-primary; - width: 1.5rem; - height: 1.5rem; - - &.icon--gitter { - stroke: $brand-primary; - } - } - } - - .social-link__title { - @include text-small; - color: $brand-primary; - display: block; - text-align: center; - } -} - -.text-milestones { - margin-top: ($spacer * 2); -} - - -// -// wrigley: positioned and animated -// -#wrigley { - @extend .img--responsive; - vertical-align: bottom; - width: 400px; - height: 220px; - position: absolute; - bottom: 0; - right: 0; - - #arm { - transform-origin: right; - } - - #head { - transform-origin: center; - } - - #eye { - transform-origin: center; - } - - #arm, - #head, - #eye { - animation: none; - } - - &:hover, - &.is-ready { - #arm, - #head, - #eye { - &.paused { animation: none; } - } - - #arm { - animation: wrigley-wink 1s ease-in-out; - } - - #head { - animation: wrigley-head-nod 1s ease-in-out; - } - - #eye { - &.is-ready { - animation: wrigley-blink .3s ease-in-out forwards; - animation-iteration-count: 2; - } - } - } -} - -@keyframes wrigley-wink { - 0% { transform: rotate(0); } - - 25%, - 50% { transform: rotate(-20deg); } - - 30%, - 100% { transform: rotate(0); } -} - -@keyframes wrigley-head-nod { - 0% { transform: rotate(0); } - - 25%, - 50% { transform: rotate(-2deg); } - - 30%, - 100% { transform: rotate(0); } -} - -@keyframes wrigley-blink { - 0% { transform: scaleY(1); } - 50% { transform: scaleY(0); } - 100% { transform: scaleY(1); } -} diff --git a/_src/_assets/styles/_page-front.scss b/_src/_assets/styles/_page-front.scss index d8c236a..d367c34 100644 --- a/_src/_assets/styles/_page-front.scss +++ b/_src/_assets/styles/_page-front.scss @@ -5,7 +5,8 @@ // .page-front { - .section--partners { + .section--partners, + .section-testimonials { @extend .background--darker; } } @@ -14,6 +15,11 @@ .section-header { margin-bottom: $spacer * 2; } + + p:last-child { + margin-top: $spacer * 4; + margin-bottom: 0; + } } .section-intro__main { @@ -22,10 +28,11 @@ margin-top: $spacer; h3 { - @extend .h4; + @extend .h5; display: block; margin-bottom: 0; margin-top: 0; + hyphens: auto; } sub { @@ -38,8 +45,3 @@ margin-bottom: $spacer; } } - -.section-quickstart__title { - @extend .h3; - margin-top: 0; -} diff --git a/_src/_assets/styles/_page-getstarted.scss b/_src/_assets/styles/_page-getstarted.scss new file mode 100644 index 0000000..6371cee --- /dev/null +++ b/_src/_assets/styles/_page-getstarted.scss @@ -0,0 +1,500 @@ +// +// Page: Get started +// --- +// bigchaindb.com +// + +.section--firsttransaction { + .section-title { + font-size: $font-size-h4; + margin-bottom: $spacer * 2; + text-align: left; + + @media ($screen-sm) { + margin-top: -($spacer * 2); + } + + &:after { + display: none; + } + + + .grid { + margin-bottom: 0; + } + } +} + +.form--transaction { + // mnml frm + background: none; + padding: 0; + + @media ($screen-sm) { + min-height: 340px; + } + + .form-group:first-child { + margin-top: 0; + } +} + +.form--transaction__content { + border: none; + padding: 0; + width: 100%; +} + +.waiting { + width: 100%; + + pre { + min-height: 200px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + font-style: italic; + border: 1px solid $gray-dark; + background: none; + overflow: hidden; + + @media ($screen-sm) { + min-height: 340px; + } + } +} + +.response { + pre { + border: 1px solid $gray-dark; + line-height: 1.3; + + @media ($screen-sm) { + min-height: 340px; + } + } + + code { + font-size: $font-size-xs; + } +} + +.message { + font-size: $font-size-base; +} + +.code-example { + @include transition; + margin-top: $spacer * 2; + + @media ($screen-sm) { + max-width: 50%; + margin-top: 0; + } + + .nav-link, + pre { + font-size: $font-size-xs; + } + + .nav-tabs { + border-bottom-color: $gray-light; + opacity: .6; + } + + .nav-link { + padding-top: $spacer / 4; + padding-bottom: $spacer / 4; + margin-bottom: -2px; + + &:hover, + &:focus { + background: none; + } + + &.active { + border-bottom: 2px solid $gray-light; + } + } + + pre { + background: none; + padding: $spacer * 1.5 0 0; + margin-bottom: 0; + overflow-y: auto; + overflow-x: auto; + } + + .highlight .p { + color: lighten(#41706f, 25%); + } +} + +.section-title--numbered { + span { + text-align: center; + display: block; + margin: auto auto $spacer / 2; + width: 3rem; + height: 3rem; + border-radius: 50%; + font-size: $font-size-lg; + vertical-align: .4rem; + background: $headings-color; + color: $gray; + font-weight: 400; + line-height: 3rem; + } + + .text-left & { + span { + display: inline-block; + margin: 0; + } + } + + .background--light & { + span { + background: $gray-light; + color: #fff; + } + } + + &:after { + display: none; + } +} + +// +// Section: server +// +.section--server { + padding-bottom: 0; + + .btn { + margin-top: $spacer / 2; + } +} + +// +// All your star bases belong to us +// +// .starbase--server is the baseline +// +.starbase { + position: relative; + margin-top: -($spacer * 2); + display: flex; + align-items: flex-end; + opacity: .7; + + // horizon layer + &:before { + content: ''; + position: absolute; + display: block; + left: 0; + right: 0; + bottom: 0; + top: 0; + background: #445261; + clip-path: polygon(0 25%, 100% 0, 100% 100%, 0% 100%); + } +} + +.starbase__image { + display: flex; + align-items: flex-end; + + img { + position: relative; + z-index: 1; + margin-bottom: -1.45%; + width: 100%; + } + + // surface layer + &:before { + content: ''; + position: absolute; + display: block; + left: -5%; + right: -5%; + bottom: auto; + background: lighten($gray, 8%); + height: 24%; + width: calc(100vw + 5%); + } +} + +// Drivers starbase +// All magic numbers, gonna wing it visually +.starbase--drivers { + min-height: 7rem; + + @media ($screen-md) { + min-height: 12rem; + } + + .starbase__image { + // surface layer + &:before { + height: 40%; + } + + img { + margin-bottom: -.5%; + } + } +} + +.choice { + background: lighten($gray, 3%); + padding-top: $spacer * 4; + padding-bottom: $spacer * 4; +} + +.choice__title { + font-size: $font-size-h3; + margin-top: 0; + margin-bottom: $spacer * $line-height; + + // the bottom line + &:after { + content: ''; + height: 2px; + width: 3rem; + display: block; + margin: ($spacer * $line-height) 0 0; + background: $gray-light; + } +} + +.architecture { + text-align: center; + + img { + max-width: 45rem; + } +} + +.section--drivers { + padding-bottom: 0; + + .choice__title { + margin-bottom: $spacer * 2; + } +} + +.driver { + padding: $spacer; + background: rgba($brand-main-blue-dark, .15); + border-radius: $border-radius; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + box-shadow: none; + + &:focus, + &:hover { + background: $brand-primary; + box-shadow: 0 1px 4px rgba($brand-main-blue-dark, .4); + transform: translateY(-1px); + + .driver__title { + color: #fff; + } + + .driver__logo { + fill: #fff; + } + } + + &:active { + outline: 0; + transform: translateY(0); + box-shadow: 0 1px 2px rgba($brand-main-blue-dark, .3); + } +} + +.driver, +.driver__logo, +.driver__title { + @include transition; +} + +.driver__logo { + width: 2rem; + height: 2rem; + fill: $brand-primary; +} + +.driver__title { + @extend .h5; + color: $brand-primary; + margin-top: 0; + margin-bottom: $spacer; +} + +.driver__meta { + @include text-small; + width: 100%; + align-self: flex-end; + margin: 0; + + span { + display: block; + } +} + +.driver__version { + opacity: .75; +} + +.driver--community { + text-align: center; + justify-content: center; + + .driver__title { + width: 100%; + margin-bottom: 0; + font-size: $font-size-base; + } + + .driver__repo { + font-size: $font-size-xs; + } + + .driver__logo { + width: 1.5rem; + height: 1.5rem; + margin-bottom: $spacer / 2; + } +} + +// +// Section: Docs +// +.docs__actions { + border-top: 1px solid darken($brand-main-gray-light, 5%); + padding-top: $spacer * 2; +} + +.docs__title { + @extend .h5; + margin-top: 0; + + // the bottom line + &:after { + content: ''; + height: 2px; + width: 2rem; + display: block; + margin-top: $spacer; + background: $gray-light; + } +} + +.docs__list { + padding-left: 0; + text-align: left; + + li { + display: block; + padding-left: 0; + } +} + +// +// Section: Community +// +.section--community { + text-align: center; + + .section-header { + .section-description { + margin-bottom: ($spacer * 2); + } + } + + .social-link { + &, + .icon { + @include transition; + } + display: inline-block; + box-shadow: none; + padding: $btn-padding-y-sm $btn-padding-x-sm; + margin-top: $spacer; + + &:focus, + &:hover { + background: none; + + .icon { + fill: lighten($brand-primary, 10%); + filter: drop-shadow(0 1px 4px rgba($brand-main-blue-dark, .4)); + transform: translateY(-1px); + } + + .icon--gitter { + stroke: lighten($brand-primary, 10%); + } + } + + &:active { + outline: 0; + + .icon { + fill: $brand-primary; + filter: drop-shadow(0 1px 2px rgba($brand-main-blue-dark, .3)); + transform: translateY(0); + } + } + + .icon { + fill: $brand-primary; + width: 1.5rem; + height: 1.5rem; + + &.icon--gitter { + stroke: $brand-primary; + } + } + } + + .social-link__title { + @include text-small; + color: $brand-primary; + display: block; + text-align: center; + } + + h5 { + margin-top: 0; + } +} + +.community__actions { + border-bottom: 1px solid $gray-dark; + margin-bottom: $spacer * 3; + padding-bottom: $spacer * 2; + + .icon { + width: 2rem; + height: 2rem; + fill: $brand-main-blue-light; + opacity: .4; + margin-bottom: $spacer / 2; + } + + .icon--gitter { + stroke: $brand-main-blue-light; + stroke-width: 2; + } + + p { + color: $brand-main-blue-light; + opacity: .8; + } +} diff --git a/_src/_assets/styles/_page-usecases.scss b/_src/_assets/styles/_page-usecases.scss index bac3ceb..fc7ffef 100644 --- a/_src/_assets/styles/_page-usecases.scss +++ b/_src/_assets/styles/_page-usecases.scss @@ -137,7 +137,6 @@ } } - // // Single use case page // diff --git a/_src/_assets/styles/bigchain.scss b/_src/_assets/styles/bigchain.scss index d47c537..f025bd6 100644 --- a/_src/_assets/styles/bigchain.scss +++ b/_src/_assets/styles/bigchain.scss @@ -35,6 +35,7 @@ @import 'bigchain/team'; @import 'bigchain/timeline'; @import 'bigchain/terminal'; +@import 'bigchain/nyan'; @import 'bigchain/utilities'; // Content types @@ -49,13 +50,13 @@ // specific page styles @import 'page-front'; +@import 'page-getstarted'; @import 'page-whitepaper'; @import 'page-404'; @import 'page-styleguide'; @import 'page-about'; @import 'page-features'; @import 'page-usecases'; -@import 'page-community'; @import 'page-contact'; @import 'page-cla'; @import 'page-partners'; diff --git a/_src/_assets/styles/bigchain/_alerts.scss b/_src/_assets/styles/bigchain/_alerts.scss index d3bd0ab..7031bc6 100644 --- a/_src/_assets/styles/bigchain/_alerts.scss +++ b/_src/_assets/styles/bigchain/_alerts.scss @@ -9,7 +9,6 @@ @extend .small; padding: $alert-padding; margin-bottom: $spacer; - border: 1px solid transparent; border-radius: $border-radius; text-align: left; @@ -31,22 +30,21 @@ padding-bottom: $spacer; } - // // Alternate styles // -.alert-success { - @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text); +.alert--success { + @include alert-variant($alert-success-bg, $alert-success-text); } -.alert-info { - @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text); +.alert--info { + @include alert-variant($alert-info-bg, $alert-info-text); } -.alert-warning { - @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text); +.alert--warning { + @include alert-variant($alert-warning-bg, $alert-warning-text); } -.alert-danger { - @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text); +.alert--danger { + @include alert-variant($alert-danger-bg, $alert-danger-text); } diff --git a/_src/_assets/styles/bigchain/_forms.scss b/_src/_assets/styles/bigchain/_forms.scss index 3f2b008..d631742 100644 --- a/_src/_assets/styles/bigchain/_forms.scss +++ b/_src/_assets/styles/bigchain/_forms.scss @@ -309,8 +309,8 @@ input[type='checkbox'] { .parsley-errors-list { @extend .list-unstyled; position: absolute; - left: 0; - bottom: 0; + right: 0; + bottom: $spacer * 1.2; font-size: $font-size-xs; &, diff --git a/_src/_assets/styles/bigchain/_header.scss b/_src/_assets/styles/bigchain/_header.scss index 58b0dcd..3ee5a6e 100644 --- a/_src/_assets/styles/bigchain/_header.scss +++ b/_src/_assets/styles/bigchain/_header.scss @@ -1,9 +1,17 @@ .header { @extend .background--photo; + background-image: url('../img/header-berlin.jpg'); + background-position: center bottom; +} + +.header__content { + padding: ($spacer * 3) 0; + text-align: center; } // intro animation .header__title, +.header__tagline, .header__description, .header__logo, .header__label { @@ -30,10 +38,15 @@ } } -.header__title { +.header__title, +.header__tagline { position: relative; z-index: 1; text-align: center; margin: 0; - padding: ($spacer * 5) 0; +} + +.header__tagline { + font-size: $font-size-h3; + color: #fff; } diff --git a/_src/_assets/styles/bigchain/_icons.scss b/_src/_assets/styles/bigchain/_icons.scss index fb7e8be..61971fb 100644 --- a/_src/_assets/styles/bigchain/_icons.scss +++ b/_src/_assets/styles/bigchain/_icons.scss @@ -28,3 +28,9 @@ width: .5rem; height: .5rem; } + +.icon--gitter { + stroke-width: 1.5; + fill: none; + stroke: $text-color; +} diff --git a/_src/_assets/styles/bigchain/_menus.scss b/_src/_assets/styles/bigchain/_menus.scss index 3da5c76..71147da 100644 --- a/_src/_assets/styles/bigchain/_menus.scss +++ b/_src/_assets/styles/bigchain/_menus.scss @@ -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,9 +286,27 @@ display: inline-block; } - +// +// On-page sub menu +// .menu--sub { - background: $gray-dark; + @include transition; + transform: translate3d(0, 0, 0); + background: lighten($gray, 30%); + + .menu__link { + color: $gray-dark; + margin-left: $spacer; + margin-right: $spacer; + + &:after { + background: darken($gray-dark, 10%); + } + + &.active { + color: darken($gray-dark, 10%); + } + } .menu-overflow { text-align: center; @@ -303,6 +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; + } +} + +.menu--sub.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; } } diff --git a/_src/_assets/styles/bigchain/_mixins/_alerts.scss b/_src/_assets/styles/bigchain/_mixins/_alerts.scss index 838c851..409fac9 100644 --- a/_src/_assets/styles/bigchain/_mixins/_alerts.scss +++ b/_src/_assets/styles/bigchain/_mixins/_alerts.scss @@ -1,11 +1,8 @@ // Alerts -@mixin alert-variant($background, $border, $text-color) { +@mixin alert-variant($background, $text-color) { background-color: $background; - border-color: $border; color: $text-color; - hr { border-top-color: darken($border, 5%); } - .alert__icon { stroke: $text-color; border-bottom-color: rgba($text-color, .3); diff --git a/_src/_assets/styles/bigchain/_mixins/_backgrounds.scss b/_src/_assets/styles/bigchain/_mixins/_backgrounds.scss index b98f3cd..56527be 100644 --- a/_src/_assets/styles/bigchain/_mixins/_backgrounds.scss +++ b/_src/_assets/styles/bigchain/_mixins/_backgrounds.scss @@ -10,12 +10,19 @@ } .background--light { - background: $brand-main-gray-lighter; + background: $brand-main-gray-light; .section-title, - p { + p, + h1, + h2, + h3 { color: $brand-main-gray; } + + a { + color: darken($brand-main-gray, 10%); + } } .background--gray { diff --git a/_src/_assets/styles/bigchain/_nyan.scss b/_src/_assets/styles/bigchain/_nyan.scss new file mode 100644 index 0000000..763f513 --- /dev/null +++ b/_src/_assets/styles/bigchain/_nyan.scss @@ -0,0 +1,34 @@ +.nyan { + position: relative; + + &:before { + content: ''; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background: url('../img/nyan.gif') no-repeat left center; + background-size: 50%; + z-index: 0; + opacity: 0; + animation: nyan-appear .6s ease-out forwards; + } + + code { + position: relative; + z-index: 2; + } +} + +@keyframes nyan-appear { + 0% { + opacity: 0; + transform: translate3d(-5rem, 0, 0); + } + + 100% { + opacity: .4; + transform: translate3d(0, 0, 0); + } +} diff --git a/_src/_assets/styles/bigchain/_typography.scss b/_src/_assets/styles/bigchain/_typography.scss index c44cfb7..0355e5a 100644 --- a/_src/_assets/styles/bigchain/_typography.scss +++ b/_src/_assets/styles/bigchain/_typography.scss @@ -199,6 +199,15 @@ em, @include text-lead; } +.pretitle { + @extend .h6; + display: block; + margin: 0; + margin-bottom: $spacer; + color: $text-color; + opacity: .6; +} + // // Lists // diff --git a/_src/_assets/styles/bigchain/_variables.scss b/_src/_assets/styles/bigchain/_variables.scss index f1596e8..7d1f745 100644 --- a/_src/_assets/styles/bigchain/_variables.scss +++ b/_src/_assets/styles/bigchain/_variables.scss @@ -47,7 +47,7 @@ $font-size-root-lg: 20px !default; $font-size-base: 1rem !default; $font-size-lg: 1.3rem !default; $font-size-sm: .85rem !default; -$font-size-xs: .7rem !default; +$font-size-xs: .65rem !default; $font-size-h1: 2.7rem !default; $font-size-h2: 2.3rem !default; @@ -212,21 +212,17 @@ $input-color-placeholder: $gray-light !default; // // Form states and alerts // -$state-success-text: $brand-success !default; -$state-success-bg: lighten($brand-success, 40%) !default; -$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default; +$state-success-text: #fff !default; +$state-success-bg: rgba($brand-primary, .4) !default; -$state-info-text: $brand-info !default; -$state-info-bg: lighten($brand-info, 30%) !default; -$state-info-border: darken(adjust-hue($state-info-bg, -10), 5%) !default; +$state-info-text: #fff !default; +$state-info-bg: rgba($brand-main-blue-light, .2) !default; -$state-warning-text: $brand-warning !default; -$state-warning-bg: lighten($brand-warning, 40%) !default; -$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default; +$state-warning-text: #fff !default; +$state-warning-bg: rgba($brand-warning, .4) !default; -$state-danger-text: $brand-danger !default; -$state-danger-bg: lighten($brand-danger, 40%) !default; -$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default; +$state-danger-text: #fff !default; +$state-danger-bg: rgba($brand-danger, .4) !default; // @@ -237,16 +233,12 @@ $alert-border-radius: $border-radius !default; $alert-success-bg: $state-success-bg !default; $alert-success-text: $state-success-text !default; -$alert-success-border: $state-success-border !default; $alert-info-bg: $state-info-bg !default; $alert-info-text: $state-info-text !default; -$alert-info-border: $state-info-border !default; $alert-warning-bg: $state-warning-bg !default; $alert-warning-text: $state-warning-text !default; -$alert-warning-border: $state-warning-border !default; $alert-danger-bg: $state-danger-bg !default; $alert-danger-text: $state-danger-text !default; -$alert-danger-border: $state-danger-border !default; diff --git a/_src/_data/drivers.yml b/_src/_data/drivers.yml new file mode 100644 index 0000000..4ff02bb --- /dev/null +++ b/_src/_data/drivers.yml @@ -0,0 +1,49 @@ +official: + - title: Python + repo: bigchaindb-driver + version: v0.4 + icon: logo-python + + - title: JavaScript + repo: js-bigchaindb-driver + version: v0.3 + icon: logo-js + + - title: CLI + repo: bdb-transaction-cli + version: v0.9 + icon: logo-cli + +community: + - title: Ruby + repo: bigchaindb_ruby + icon: logo-ruby + link: https://github.com/LicenseRocks/bigchaindb_ruby + + - title: Haskell + repo: bigchaindb-hs + icon: logo-haskell + link: https://github.com/bigchaindb/bigchaindb-hs + + - title: Go + repo: envoke + icon: logo-go + link: https://github.com/zbo14/envoke/blob/master/bigchain/bigchain.go + + - title: Java + repo: bigchaindb-java-driver + link: https://github.com/mgrand/bigchaindb-java-driver + icon: logo-java + +tools: + - title: Crypto-Conditions + repo: cryptoconditions + version: v0.6 + + - title: ILP ledger plugin + repo: ilp-plugin-bigchaindb + version: v0.1 + + - title: COALA IP ledger plugin + repo: pycoalaip-bigchaindb + version: v0.0.4 diff --git a/_src/_data/getstarted.yml b/_src/_data/getstarted.yml new file mode 100644 index 0000000..89e508a --- /dev/null +++ b/_src/_data/getstarted.yml @@ -0,0 +1,107 @@ + +# ---------------------------- +# Section: First Transaction +# ---------------------------- + +firsttransaction: + title: "Send your first transaction" + message: + label: "Type a message" + button: "Off you go" + request: "Your message will be wrapped in an asset and sent with the transaction." + response: "Nicely done! You have just created an asset and sent it in a signed transaction." + + + +# ---------------------------- +# Section: Server +# ---------------------------- + +server: + title: "Network" + description: "Roll out your own BigchainDB network, or let IPDB take care of this for you." + ipdb: + pretitle: "Managed" + title: "IPDB: The Public BigchainDB Network" + description: "No installation needed. Sign up and connect instantly, the IPDB caretakers will handle running a BigchainDB network for you." + button: "Get IPDB" + link: "https://developers.ipdb.io" + bdb: + pretitle: "Self-Hosted" + title: "BigchainDB Server" + description: "If you want to run your own BigchainDB instance, you can either get set up on Linux or with Docker on any system." + button: "Install BigchainDB Server" + link: "https://docs.bigchaindb.com/projects/server/en/latest/dev-and-test/setup-run-node.html" + + +# ---------------------------- +# Section: Drivers +# ---------------------------- + +drivers: + title: "Drivers & Tools" + description: "Clone or download one of the drivers below to connect to IPDB or your BigchainDB node." + title_official: "Official drivers" + title_tools: "Official tools" + title_community: "Community drivers" + + +# ---------------------------- +# Section: Docs +# ---------------------------- + +docs: + title: "Documentation" + description: "Dive into our documentation with tutorials, examples, terminology, references and more." + button: "See All Documentation" + categories: + + - title: "Tutorials" + items: + - title: "Set Up & Run a Dev/Test Node" + link: "https://docs.bigchaindb.com/projects/server/en/latest/dev-and-test/setup-run-node.html" + - title: "Production Deployment Template" + link: "https://docs.bigchaindb.com/projects/server/en/latest/production-deployment-template/index.html" + + - title: "Code Examples" + items: + - title: "Basic Usage Examples" + link: "https://docs.bigchaindb.com/projects/py-driver/en/latest/usage.html" + - title: "Handcrafting Transactions" + link: "https://docs.bigchaindb.com/projects/py-driver/en/latest/handcraft.html" + - title: "Kyber" + link: "https://github.com/bigchaindb/kyber" + + - title: "Quick References" + items: + - title: "HTTP API" + link: "https://docs.bigchaindb.com/projects/server/en/latest/http-client-server-api.html" + - title: "Data Models" + link: "https://docs.bigchaindb.com/projects/server/en/latest/data-models/index.html" + - title: "Server Command Line Interface (CLI)" + link: "https://docs.bigchaindb.com/projects/server/en/latest/server-reference/bigchaindb-cli.html" + - title: "Server Configuration Settings" + link: "https://docs.bigchaindb.com/projects/server/en/latest/server-reference/configuration.html" + - title: "WebSocket Event Stream API" + link: "https://docs.bigchaindb.com/projects/server/en/latest/websocket-event-stream-api.html" + + +# ---------------------------- +# Section: Community +# ---------------------------- + +community: + title: "Community" + description: "There are many ways you can contribute to the BigchainDB project, some very easy and others more involved. We welcome all potential contributors, so we ask that everyone participating abide by some simple guidelines." + gitter: + text: "Join the conversation or chat directly with us." + button: "Chat on Gitter" + github: + text: "Looking to contribute? Found a bug? Open an issue." + button: "Head to GitHub" + guidelines: + text: "Read up on our community guidelines." + button: "Read Guidelines" + follow: + title: "Follow" + description: "Follow us for the latest news, updates and announcements." diff --git a/_src/_data/menus.yml b/_src/_data/menus.yml index 57d2e31..ec0bccd 100644 --- a/_src/_data/menus.yml +++ b/_src/_data/menus.yml @@ -1,11 +1,11 @@ --- main: + - title: Get started + url: "/getstarted/" - title: Features url: "/features/" - title: Use Cases url: "/usecases/" - - title: Community - url: "/community/" - title: Enterprise url: "/enterprise/" - title: Docs @@ -14,20 +14,24 @@ main: secondary: - title: Whitepaper url: "/whitepaper/" + - title: Blog + url: https://blog.bigchaindb.com - title: About url: "/about/" - title: Contact url: "/contact/" - - title: Blog - url: https://blog.bigchaindb.com community: + - title: Gitter + url: https://gitter.im/bigchaindb/bigchaindb - title: GitHub url: https://github.com/bigchaindb - title: Twitter url: https://twitter.com/BigchainDB - - title: Gitter - url: https://gitter.im/bigchaindb/bigchaindb + - title: Facebook + url: https://www.facebook.com/BigchainDB/ + - title: Meetup + url: https://www.meetup.com/BigchainDB-IPDB-Meetup legal: - title: Terms diff --git a/_src/_includes/footer.html b/_src/_includes/footer.html index 765021d..4370341 100644 --- a/_src/_includes/footer.html +++ b/_src/_includes/footer.html @@ -1,3 +1,7 @@ +{% if page.ipdb %} + {% include ipdb.html %} +{% endif %} +