diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..b64e0cd --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ + +# EditorConfig is awesome: http://EditorConfig.org + +[*] +indent_style = space +indent_size = 4 +end_of_line = lf +insert_final_newline = true +charset = utf-8 +trim_trailing_whitespace = true + +[*.json] +indent_size = 2 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..30c6869 --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +node_modules +Gemfile.lock +.jekyll-metadata +_dist diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000..2dac945 --- /dev/null +++ b/Gemfile @@ -0,0 +1,9 @@ +source "https://rubygems.org" + +group :jekyll do + gem 'jekyll' +end + +group :development do + gem 'redcarpet' +end diff --git a/README.md b/README.md index f8fc626..9d1fbe6 100644 --- a/README.md +++ b/README.md @@ -4,4 +4,34 @@ ## Development +You need to have the following tools installed on your development machine before moving on: + +- [node.js](http://nodejs.org/) & [npm](https://npmjs.org/) +- [Ruby](https://www.ruby-lang.org) (for sanity, install with [rvm](https://rvm.io/)) +- [Bundler](http://bundler.io/) + +### Install dependencies + +Run the following command from the repository's root folder to install all dependencies. + +```bash +npm i && bundle install +``` + +### Development build + +Spin up local dev server and livereloading watch task, reachable under [https://localhost:1337](https://localhost:1337): + +```bash +gulp +``` + ## Deployment + +### Production build + +The following builds the site and runs a bunch of optimizations over everything, like assets optimizations, revisioning, CDN url injection etc. + +```bash +gulp build --production +``` diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..10da97c --- /dev/null +++ b/_config.yml @@ -0,0 +1,37 @@ + + +# The Basics +# -------------------- +name: Bigchain +description: +url: http://www.bigchain.io + +email: + contact: contact@bigchain.io + +twitter: bigchain +facebook: bigchain + + +# Track all the things +# -------------------- +analyticsID: + + +# Urls +# -------------------- +permalink: /:title/ + + +# Content Parsing +# -------------------- +markdown: redcarpet + +redcarpet: + extensions: ['autolink', 'smart', 'hard_wrap', 'with_toc_data'] + + +# Generator +# -------------------- +source: ./_src +destination: ./_dist diff --git a/_src/404.md b/_src/404.md new file mode 100644 index 0000000..67fb7bf --- /dev/null +++ b/_src/404.md @@ -0,0 +1,3 @@ +--- +layout: base +--- diff --git a/_src/_assets/javascripts/bigchain.js b/_src/_assets/javascripts/bigchain.js index e69de29..055e9c4 100644 --- a/_src/_assets/javascripts/bigchain.js +++ b/_src/_assets/javascripts/bigchain.js @@ -0,0 +1,12 @@ + +//=include ../../../node_modules/svg4everybody/dist/svg4everybody.js +//=include ../../../node_modules/jquery/dist/jquery.js + +jQuery(function($) { + + // + // init modules + // + + +}); diff --git a/_src/_assets/styles/bigchain.scss b/_src/_assets/styles/bigchain.scss index f241dfb..31c8304 100644 --- a/_src/_assets/styles/bigchain.scss +++ b/_src/_assets/styles/bigchain.scss @@ -5,7 +5,7 @@ // // Normalize all the things -@import '../../../node_modules/normalize-css/normalize.css'; +@import '../../../node_modules/normalize-css/normalize'; @import '../../../node_modules/normalize-opentype.css/normalize-opentype.scss'; // Variables & Mixins @@ -13,9 +13,13 @@ @import 'bigchain/_mixins'; // Components +@import 'bigchain/_fonts'; +@import 'bigchain/_typography'; +@import 'bigchain/_grid'; +@import 'bigchain/_sections'; // Content types -@import 'bigchain/content-page'; +//@import 'bigchain/content-page'; // specific page styles @import 'page-front'; diff --git a/_src/_assets/styles/bigchain/_fonts.scss b/_src/_assets/styles/bigchain/_fonts.scss new file mode 100644 index 0000000..40a8cee --- /dev/null +++ b/_src/_assets/styles/bigchain/_fonts.scss @@ -0,0 +1,9 @@ +@font-face{ + font-family: 'Fira Sans'; + src: local('Fira Sans Light'), + url('/assets/fonts/FiraSans-Light.woff2') format('woff2'), + url('/assets/fonts/FiraSans-Light.woff') format('woff'), + url('/assets/fonts/FiraSans-Light.ttf') format('truetype'); + font-weight: 300; + font-style: normal; +} diff --git a/_src/_assets/styles/bigchain/_grid.scss b/_src/_assets/styles/bigchain/_grid.scss new file mode 100644 index 0000000..9fc1e5d --- /dev/null +++ b/_src/_assets/styles/bigchain/_grid.scss @@ -0,0 +1,245 @@ +// +// Grid +// -------------- +// bigchain.io +// +// adapted from github.com/kremalicious/kremalicious3/blob/master/_src/_assets/styl/grid.styl +// + + +// +// More sane box model +// +*, +*:before, +*:after { + box-sizing: border-box; +} + + +// +// Base +// +.grid { + display: flex; + flex-wrap: wrap; + list-style: none; + margin: 0; + padding: 0; +} + +.grid__col { + flex: 1; + // Firefox grid fix for whatever reason + min-height: 0; + min-width: 0; +} + +.row { + max-width: 50em; + margin: auto; + padding-left: $gutter-space; + padding-right: $gutter-space; +} + + +// +// Alignment per row +// +.grid--top { + align-items: flex-start +} + +.grid--bottom { + align-items: flex-end +} + +.grid--center { + align-items: center +} + +.grid--justifycenter { + justify-content: center +} + + +// +// Alignment per cell +// +.grid__col--top { + align-self: flex-start +} + +.grid__col--bottom { + align-self: flex-end +} + +.grid__col--center { + align-self: center +} + + +// +// Gutters +// +.grid--gutters{ + margin: -($gutter-space) 0 $gutter-space (-($gutter-space)); + + > .grid__col { + padding: $gutter-space 0 0 $gutter-space;; + } +} + +@media ($screen-sm) { + .grid-small--gutters { + margin: -($gutter-space) 0 $gutter-space (-($gutter-space)); + + > .grid__col { + padding: $gutter-space 0 0 $gutter-space; + } + } +} + +@media ($screen-md) { + .grid-medium--gutters { + margin: -($gutter-space) 0 $gutter-space (-($gutter-space)); + + > .grid__col { + padding: $gutter-space 0 0 $gutter-space; + } + } +} + +@media ($screen-lg) { + .grid-large--gutters { + margin: -($gutter-space) 0 $gutter-space (-($gutter-space)); + + > .grid__col { + padding: $gutter-space 0 0 $gutter-space; + } + } +} + + +// +// Columns +// +.grid--fit { + > .grid__col { flex: 1; } +} + +.grid--full { + > .grid__col { flex: 0 0 100%; } +} + +.grid--1of6 { + > .grid__col { flex: 0 0 16.5%; } +} + +.grid--2of6, +.grid--third { + > .grid__col { flex: 0 0 33%; } +} + +.grid--3of6, +.grid--half { + > .grid__col { flex: 0 0 50%; } +} + +.grid--4of6 { + > .grid__col { flex: 0 0 66%; } +} + +.grid--5of6 { + > .grid__col { flex: 0 0 82.5%; } +} + +@media ($screen-sm) { + .grid-small--fit { + > .grid__col { flex: 1; } + } + .grid-small--full{ + > .grid__col { flex: 0 0 100%; } + } + .grid-small--1of6 { + > .grid__col { flex: 0 0 16.5%; } + } + .grid-small--2of6, + .grid-small--third { + > .grid__col { flex: 0 0 33%; } + } + .grid-small--3of6, + .grid-small--half { + > .grid__col { flex: 0 0 50%; } + } + .grid-small--4of6 { + > .grid__col { flex: 0 0 66%; } + } + .grid-small--5of6 { + > .grid__col { flex: 0 0 82.5%; } + } +} + +@media ($screen-md) { + .grid-medium--fit { + > .grid__col { flex: 1 } + } + + .grid-medium--full { + > .grid__col { flex: 0 0 100%; } + } + + .grid-medium--1of6 { + > .grid__col { flex: 0 0 16.5%; } + } + + .grid-medium--2of6, + .grid-medium--third { + > .grid__col { flex: 0 0 33%; } + } + + .grid-medium--3of6, + .grid-medium--half { + > .grid__col { flex: 0 0 50%; } + } + + .grid-medium--4of6 { + > .grid__col { flex: 0 0 66%; } + } + + .grid-medium--5of6 { + > .grid__col { flex: 0 0 82.5%; } + } +} + +@media ($screen-lg) { + .grid-large--fit { + > .grid__col { flex: 1; } + } + + .grid-large--full { + > .grid__col { flex: 0 0 100%; } + } + + .grid-large--1of6 { + > .grid__col { flex: 0 0 16.5%; } + } + + .grid-large--2of6, + .grid-large--third { + > .grid__col { flex: 0 0 33%; } + } + + .grid-large--3of6, + .grid-large--half { + > .grid__col { flex: 0 0 50%; } + } + + .grid-large--4of6 { + > .grid__col { flex: 0 0 66%; } + } + + .grid-large--5of6 { + > .grid__col { flex: 0 0 82.5%; } + } +} diff --git a/_src/_assets/styles/bigchain/_sections.scss b/_src/_assets/styles/bigchain/_sections.scss new file mode 100644 index 0000000..9965ac3 --- /dev/null +++ b/_src/_assets/styles/bigchain/_sections.scss @@ -0,0 +1,74 @@ + +.section { + padding-top: ($line-height-computed * 2); + padding-bottom: ($line-height-computed * 2); + + // use this so animated elements coming in from outside of screen + // don't affect layout + overflow: hidden; + + @media ($screen-sm) { + padding-top: ($line-height-computed * 3); + padding-bottom: ($line-height-computed * 3); + } +} + +.section-title, +.section-description { + @media ($screen-sm) { + max-width: 100%; + margin-left: auto; + margin-right: auto; + } +} + +.section-title { + font-size: $font-size-h3; + margin-top: 0; + margin-bottom: $line-height-computed; + + @media ($screen-sm) { + font-size: $font-size-h2; + } +} + +.section-description { + color: $text-color; + margin-bottom: 0; + + + .section-description { + margin-top: $line-height-computed; + } +} + +.section-actions { + margin-top: $line-height-computed; + + .btn { + margin-left: 5px; + margin-right: 5px; + min-width: 200px; + } +} + + +// +// Section backgrounds +// +.background--blue { + background: $brand-main-blue; + + * { color: #fff } +} + +.background--black { + background: $brand-main-black; + + * { color: #fff } +} + +.background--gray-dark { + background: $gray-dark; + + * { color: #fff } +} diff --git a/_src/_assets/styles/bigchain/_typography.scss b/_src/_assets/styles/bigchain/_typography.scss new file mode 100644 index 0000000..a3342a2 --- /dev/null +++ b/_src/_assets/styles/bigchain/_typography.scss @@ -0,0 +1,246 @@ +// +// Typography +// --- +// bigchain.io +// + +// Body reset +html { + font-size: $font-size-root; + -webkit-tap-highlight-color: rgba(0,0,0,0); +} + +body { + font-family: $font-family-base; + font-size: $font-size-base; + font-weight: $font-weight-base; + line-height: $line-height-base; + color: $text-color; + background-color: $body-bg; + + text-rendering: optimizeLegibility; + // Controversial! But prevents text flickering in + // Safari/Firefox when animations are running + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -moz-font-feature-settings: 'liga', 'kern'; + + // remove old style numerals + font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 1; +} + +// Reset fonts for relevant elements +input, +button, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; +} + +// +// Links +// +a { + color: $link-color; + text-decoration: none; + + &:hover, + &:focus { + color: $link-hover-color; + text-decoration: underline; + } + + &:active {} +} + + +// +// Headings +// +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { + font-family: $headings-font-family; + font-weight: $headings-font-weight; + line-height: $headings-line-height; + color: $headings-color; + + // remove old style numerals + font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 0, "lnum" 0, "dlig" 1; +} + + +h1, .h1, +h2, .h2, +h3, .h3 { + margin-top: ($line-height-computed * 2); + margin-bottom: $line-height-computed; +} + +h4, .h4, +h5, .h5, +h6, .h6 { + color: $gray; + margin-top: $line-height-computed; + margin-bottom: ($line-height-computed / 2); +} + +h1, .h1 { font-size: $font-size-h1; } +h2, .h2 { font-size: $font-size-h2; } +h3, .h3 { font-size: $font-size-h3; } +h4, .h4 { font-size: $font-size-h4; } +h5, .h5 { font-size: $font-size-h5; } +h6, .h6 { font-size: $font-size-h6; } + + +// +// Body text +// +p { + margin: 0 0 ($line-height-computed / 2); +} + + +// +// Emphasis & misc +// +small, +.small { + font-size: floor((100% * $font-size-small / $font-size-base)); + font-weight: $font-weight-normal; +} + +.mini { + font-size: floor((100% * $font-size-mini / $font-size-base)); + font-weight: $font-weight-normal; +} + +.large { + font-size: floor((100% * $font-size-large / $font-size-base)); +} + +strong, +.strong, +.bold { + font-weight: $font-weight-normal; +} + +// Alignment +.text-left { text-align: left; } +.text-right { text-align: right; } +.text-center { text-align: center; } +.text-justify { text-align: justify; } +.text-nowrap { white-space: nowrap; } + +// Transformation +.text-lowercase { text-transform: lowercase; } +.text-uppercase { text-transform: uppercase; } +.text-capitalize { text-transform: capitalize; } + +// +// Lists +// +// Unordered and Ordered lists +ul, +ol { + margin-top: $line-height-computed; + margin-bottom: $line-height-computed; + padding-left: ($line-height-computed * 2); + + li { + margin-bottom: ($line-height-computed / 2); + padding-left: ($line-height-computed / 2); + } + ul, + ol { + margin-bottom: 0; + } +} + +ul { + li { list-style-type: circle; } +} + +// List options +@mixin list-unstyled { + padding-left: 0; + margin: 0; + + li { + list-style: none; + margin-bottom: 0; + padding-left: 0; + } +} + +.list-unstyled { + @include list-unstyled; +} + +// Inline turns list items into inline-block +.list-inline { + @include list-unstyled; + margin-left: -5px; + + > li { + display: inline-block; + padding-left: 5px; + padding-right: 5px; + } + +} + + +// +// Blockquotes +// +blockquote { + border-left: 3px solid $gray-lighter; + margin-left: 0; + margin-top: $line-height-computed; + margin-bottom: $line-height-computed; + padding: ($line-height-computed/2) $line-height-computed; + color: $gray; + font-style: italic; + + p, + ul, + ol { + &:last-child { + margin-bottom: 0; + } + } +} + +cite { + @extend .bold, .small; + font-style: italic; +} + +// Addresses +address { + margin-bottom: $line-height-computed; + font-style: normal; + line-height: $line-height-base; +} + + +// +// Trademark symbol +// +.trademark { + top: -.45em; + left: -.15em; + margin-right: -.2em; // reduce kerning + opacity: .6; + font-family: inherit; + font-size: 60%; +} + + +// +// Text selection +// +::-moz-selection { color: #fff; background: $brand-main-blue; } +::selection { color: #fff; background: $brand-main-blue; } diff --git a/_src/_assets/styles/bigchain/_variables.scss b/_src/_assets/styles/bigchain/_variables.scss index cc4c44f..02e2797 100644 --- a/_src/_assets/styles/bigchain/_variables.scss +++ b/_src/_assets/styles/bigchain/_variables.scss @@ -11,23 +11,38 @@ $brand-main-blue: #003C69; $brand-main-black: #000000; $brand-main-white: #FFFFFF; +$gray-dark: #373a3c !default; +$gray: #55595c !default; +$gray-light: #818a91 !default; +$gray-lighter: #eceeef !default; +$gray-lightest: #f7f7f9 !default; + +$brand-primary: $brand-main-blue !default; +$brand-success: #5cb85c !default; +$brand-info: #5bc0de !default; +$brand-warning: #f0ad4e !default; +$brand-danger: #d9534f !default; + // // Typography // -$font-family-fira: 'fira-sans-light', sans-serif !default; +$font-family-fira: 'Fira Sans', sans-serif !default; $font-family-avenir: 'Avenir', 'Helvetica Neue', 'Arial', sans-serif !default; +$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default; +$font-family-base: $font-family-avenir !default; $font-weight-light: 300 !default; $font-weight-normal: 400 !default; $font-weight-bold: 600 !default; $font-weight-base: $font-weight-light !default; -$font-family-base: $font-family-avenir !default; -$font-size-base: 16px !default; -$font-size-large: ceil(($font-size-base * 1.15)) !default; -$font-size-small: ceil(($font-size-base * 0.85)) !default; -$font-size-mini: ceil(($font-size-base * 0.65)) !default; +$font-size-root: 16px !default; + +$font-size-base: 1rem !default; +$font-size-large: ceil(($font-size-base * 1.25)) !default; +$font-size-small: ceil(($font-size-base * 0.875)) !default; +$font-size-mini: ceil(($font-size-base * 0.75)) !default; $font-size-h1: floor(($font-size-base * 2.6)) !default; $font-size-h2: floor(($font-size-base * 2.25)) !default; @@ -40,7 +55,7 @@ $line-height-base: 1.4 !default; $line-height-computed: floor(($font-size-base * $line-height-base)) !default; $headings-font-family: $font-family-fira !default; -$headings-font-weight: $font-weight-normal !default; +$headings-font-weight: $font-weight-light !default; $headings-line-height: 1.2 !default; $headings-color: $brand-main-blue !default; @@ -53,3 +68,21 @@ $text-color: $brand-main-black !default; $link-color: $brand-main-blue !default; $link-hover-color: darken($link-color, 15%) !default; + + +// +// Grid +// +$gutter-space: 4% !default; + + +// +// Responsive breakpoints +// +$screen-sm-min: 30em !default; +$screen-md-min: 40.625em !default; +$screen-lg-min: 87.500em !default; + +$screen-sm: 'min-width: #{$screen-sm-min}'; +$screen-md: 'min-width: #{$screen-md-min}'; +$screen-lg: 'min-width: #{$screen-lg-min}'; diff --git a/_src/_includes/footer.html b/_src/_includes/footer.html new file mode 100644 index 0000000..e69de29 diff --git a/_src/_includes/head.html b/_src/_includes/head.html new file mode 100644 index 0000000..8a88aeb --- /dev/null +++ b/_src/_includes/head.html @@ -0,0 +1,67 @@ +
+ + + +100,000 transactions per second and climbing
+Petabyte Capacity
+Open Source
+Coming soon
+For early access and inquiries, enter your contact information below
+