mirror of https://github.com/bigchaindb/site.git
finalized starting point
- use Jekyll for now - build process through gulp - dependencies through npm & bundle - scss: variables, grid, fonts, first components - js setup
This commit is contained in:
parent
93d3bf97bd
commit
7cad1ec40a
|
@ -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
|
|
@ -0,0 +1,4 @@
|
||||||
|
node_modules
|
||||||
|
Gemfile.lock
|
||||||
|
.jekyll-metadata
|
||||||
|
_dist
|
|
@ -0,0 +1,9 @@
|
||||||
|
source "https://rubygems.org"
|
||||||
|
|
||||||
|
group :jekyll do
|
||||||
|
gem 'jekyll'
|
||||||
|
end
|
||||||
|
|
||||||
|
group :development do
|
||||||
|
gem 'redcarpet'
|
||||||
|
end
|
30
README.md
30
README.md
|
@ -4,4 +4,34 @@
|
||||||
|
|
||||||
## Development
|
## 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
|
## 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
|
||||||
|
```
|
||||||
|
|
|
@ -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
|
|
@ -0,0 +1,3 @@
|
||||||
|
---
|
||||||
|
layout: base
|
||||||
|
---
|
|
@ -0,0 +1,12 @@
|
||||||
|
|
||||||
|
//=include ../../../node_modules/svg4everybody/dist/svg4everybody.js
|
||||||
|
//=include ../../../node_modules/jquery/dist/jquery.js
|
||||||
|
|
||||||
|
jQuery(function($) {
|
||||||
|
|
||||||
|
//
|
||||||
|
// init modules
|
||||||
|
//
|
||||||
|
|
||||||
|
|
||||||
|
});
|
|
@ -5,7 +5,7 @@
|
||||||
//
|
//
|
||||||
|
|
||||||
// Normalize all the things
|
// 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';
|
@import '../../../node_modules/normalize-opentype.css/normalize-opentype.scss';
|
||||||
|
|
||||||
// Variables & Mixins
|
// Variables & Mixins
|
||||||
|
@ -13,9 +13,13 @@
|
||||||
@import 'bigchain/_mixins';
|
@import 'bigchain/_mixins';
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
|
@import 'bigchain/_fonts';
|
||||||
|
@import 'bigchain/_typography';
|
||||||
|
@import 'bigchain/_grid';
|
||||||
|
@import 'bigchain/_sections';
|
||||||
|
|
||||||
// Content types
|
// Content types
|
||||||
@import 'bigchain/content-page';
|
//@import 'bigchain/content-page';
|
||||||
|
|
||||||
// specific page styles
|
// specific page styles
|
||||||
@import 'page-front';
|
@import 'page-front';
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
|
@ -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%; }
|
||||||
|
}
|
||||||
|
}
|
|
@ -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 }
|
||||||
|
}
|
|
@ -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; }
|
|
@ -11,23 +11,38 @@ $brand-main-blue: #003C69;
|
||||||
$brand-main-black: #000000;
|
$brand-main-black: #000000;
|
||||||
$brand-main-white: #FFFFFF;
|
$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
|
// 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-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-light: 300 !default;
|
||||||
$font-weight-normal: 400 !default;
|
$font-weight-normal: 400 !default;
|
||||||
$font-weight-bold: 600 !default;
|
$font-weight-bold: 600 !default;
|
||||||
$font-weight-base: $font-weight-light !default;
|
$font-weight-base: $font-weight-light !default;
|
||||||
$font-family-base: $font-family-avenir !default;
|
|
||||||
|
|
||||||
$font-size-base: 16px !default;
|
$font-size-root: 16px !default;
|
||||||
$font-size-large: ceil(($font-size-base * 1.15)) !default;
|
|
||||||
$font-size-small: ceil(($font-size-base * 0.85)) !default;
|
$font-size-base: 1rem !default;
|
||||||
$font-size-mini: ceil(($font-size-base * 0.65)) !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-h1: floor(($font-size-base * 2.6)) !default;
|
||||||
$font-size-h2: floor(($font-size-base * 2.25)) !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;
|
$line-height-computed: floor(($font-size-base * $line-height-base)) !default;
|
||||||
|
|
||||||
$headings-font-family: $font-family-fira !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-line-height: 1.2 !default;
|
||||||
$headings-color: $brand-main-blue !default;
|
$headings-color: $brand-main-blue !default;
|
||||||
|
|
||||||
|
@ -53,3 +68,21 @@ $text-color: $brand-main-black !default;
|
||||||
|
|
||||||
$link-color: $brand-main-blue !default;
|
$link-color: $brand-main-blue !default;
|
||||||
$link-hover-color: darken($link-color, 15%) !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}';
|
||||||
|
|
|
@ -0,0 +1,67 @@
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
<!-- Dynamic meta title -->
|
||||||
|
<title>
|
||||||
|
{% if paginator.previous_page %}
|
||||||
|
Page {{ paginator.page }} | {{ site.name }}
|
||||||
|
{% elsif page.title %}
|
||||||
|
{{ page.title }} | {{ site.name }}
|
||||||
|
{% else %}
|
||||||
|
{{ site.name }} | {{ site.description }}
|
||||||
|
{% endif %}
|
||||||
|
</title>
|
||||||
|
|
||||||
|
<!-- Dynamic meta description -->
|
||||||
|
{% if page.description %}
|
||||||
|
<meta name="description" content="{{ page.description }}">
|
||||||
|
{% elsif page.front_page %}
|
||||||
|
<meta name="description" content="{{ site.description }}">
|
||||||
|
{% else %}
|
||||||
|
<meta name="description" content="{{ page.excerpt | strip_html | strip_newlines }}" />
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<!-- Mobile meta stuff -->
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
|
<meta name="HandheldFriendly" content="True">
|
||||||
|
<meta name="MobileOptimized" content="320">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<meta http-equiv="cleartype" content="on">
|
||||||
|
|
||||||
|
<!-- CSS -->
|
||||||
|
<link rel="stylesheet" href="/assets/css/bigchain.min.css">
|
||||||
|
|
||||||
|
<!-- Canonical URL -->
|
||||||
|
<link rel="canonical" href="{{ site.url }}{{ page.url | replace:'index.html','' }}">
|
||||||
|
|
||||||
|
<!-- Apple -->
|
||||||
|
<meta name="apple-mobile-web-app-title" content="{{ site.name }}">
|
||||||
|
|
||||||
|
<!-- Touch Icons -->
|
||||||
|
<link rel="apple-touch-icon-precomposed" href="/assets/img/apple-touch-icon-precomposed-120x120.png" sizes="120x120">
|
||||||
|
<link rel="apple-touch-icon-precomposed" href="/assets/img/apple-touch-icon-precomposed-152x152.png" sizes="152x152">
|
||||||
|
<link rel="apple-touch-icon-precomposed" href="/assets/img/apple-touch-icon-precomposed-180x180.png" sizes="180x180">
|
||||||
|
<link rel="icon" type="image/png" href="/assets/img/favicon-32x32.png" sizes="32x32">
|
||||||
|
<link rel="icon" type="image/png" href="/assets/img/touch-icon-192x192.png" sizes="192x192">
|
||||||
|
<link rel="icon" type="image/png" href="/assets/img/favicon-96x96.png" sizes="96x96">
|
||||||
|
<link rel="mask-icon" href="/assets/img/favicon-mask.svg" color="#003C69">
|
||||||
|
|
||||||
|
<!-- Win 8/8.1 -->
|
||||||
|
<meta name="msapplication-TileImage" content="{{ site.url }}/assets/img/TileImage-144x144.png"/>
|
||||||
|
<meta name="msapplication-TileColor" content="#003C69"/>
|
||||||
|
|
||||||
|
<!-- Android Lollipop theme color -->
|
||||||
|
<meta name="theme-color" content="#003C69">
|
||||||
|
|
||||||
|
<!-- OpenGraph -->
|
||||||
|
{% include opengraph.html %}
|
||||||
|
|
||||||
|
<!-- Twitter Cards -->
|
||||||
|
{% include twittercards.html %}
|
||||||
|
|
||||||
|
<!-- Prevent search indexing for some pages -->
|
||||||
|
{% if page.sitemap == false %}
|
||||||
|
<meta name="robots" content="noindex">
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
</head>
|
|
@ -0,0 +1,36 @@
|
||||||
|
<meta content="website" property="og:type">
|
||||||
|
<meta content="{{ site.name }}" property="og:site_name">
|
||||||
|
|
||||||
|
{% if page.title %}
|
||||||
|
<meta content="{{ page.title }} | {{ site.name }}" property="og:title">
|
||||||
|
{% else %}
|
||||||
|
<meta content="{{ site.name }} | {{ site.description }}" property="og:title">
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if page.description %}
|
||||||
|
<meta content="{{ page.description }}" property="og:description">
|
||||||
|
{% elsif page.front_page %}
|
||||||
|
<meta content="{{ site.description }}" property="og:description">
|
||||||
|
{% else %}
|
||||||
|
<meta content="{{ page.excerpt | strip_html | strip_newlines }}" property="og:description">
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if page.url %}
|
||||||
|
<meta content="{{ site.url}}{{ page.url | replace:'index.html','' }}" property="og:url">
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if page.date %}
|
||||||
|
<meta content="{{ page.date | date_to_xmlschema }}" property="article:published_time">
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if page.image %}
|
||||||
|
<meta content="{{ site.url }}/assets/img/{{ page.image }}" property="og:image">
|
||||||
|
{% else %}
|
||||||
|
<meta content="{{ site.url }}/assets/img/share-image.png" property="og:image">
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if page.categories %}
|
||||||
|
{% for category in page.categories limit:1 %}
|
||||||
|
<meta content="{{ category }}" property="article:section">
|
||||||
|
{% endfor %}
|
||||||
|
{% endif %}
|
|
@ -0,0 +1,68 @@
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
|
//
|
||||||
|
// Site scripts
|
||||||
|
//
|
||||||
|
-->
|
||||||
|
<script src="/assets/js/bigchain.min.js"></script>
|
||||||
|
|
||||||
|
{% if page.js %}
|
||||||
|
<script src="/assets/js/{{ page.js }}"></script>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<!--
|
||||||
|
svg4everybody.js
|
||||||
|
-->
|
||||||
|
<script>svg4everybody();</script>
|
||||||
|
|
||||||
|
|
||||||
|
<!--
|
||||||
|
//
|
||||||
|
// Google Analytics
|
||||||
|
//
|
||||||
|
-->
|
||||||
|
<script>
|
||||||
|
(function(window) {
|
||||||
|
|
||||||
|
// Google Analytics async snippet
|
||||||
|
// http://goo.gl/3FPNDx
|
||||||
|
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};
|
||||||
|
ga.l=+new Date;
|
||||||
|
|
||||||
|
// Create the GA tracker
|
||||||
|
ga('create', '{{ site.analyticsID }}', 'auto', {siteSpeedSampleRate: 10});
|
||||||
|
|
||||||
|
{% if jekyll.environment != 'production' %}
|
||||||
|
// In non-production mode, simply log GA hits to the console.
|
||||||
|
// Note, tasks must be set before sending the first hit
|
||||||
|
ga(function(tracker) {
|
||||||
|
tracker.set('sendHitTask', function() {
|
||||||
|
// Throw to stop subsequent tasks.
|
||||||
|
throw 'Abort tracking in non-production environments.'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
// Send initial pageview
|
||||||
|
ga('send', 'pageview');
|
||||||
|
|
||||||
|
// Track uncaught errors
|
||||||
|
window.onerror = function(message, url, line, col) {
|
||||||
|
var desc = message + ' (line: ' + line + ', url: ' + url + ', col: '
|
||||||
|
+ col + ')';
|
||||||
|
|
||||||
|
ga('send', 'exception', {
|
||||||
|
exDescription: 'window.onerror: ' + desc,
|
||||||
|
exFatal: false
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
}(window));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{% if jekyll.environment == "production" %}
|
||||||
|
<script async src="//www.google-analytics.com/analytics.js"></script>
|
||||||
|
{% else %}
|
||||||
|
<script async src="//www.google-analytics.com/analytics_debug.js"></script>
|
||||||
|
{% endif%}
|
|
@ -0,0 +1,25 @@
|
||||||
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
|
<meta name="twitter:site" content="@{{ site.twitter }}">
|
||||||
|
<meta name="twitter:creator" content="@{{ site.twitter }}">
|
||||||
|
|
||||||
|
{% if page.title %}
|
||||||
|
<meta name="twitter:title" content="{{ page.title }} | {{ site.name }}">
|
||||||
|
{% else %}
|
||||||
|
<meta name="twitter:title" content="{{ site.name }} | {{ site.description }}">
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if page.url %}
|
||||||
|
<meta name="twitter:url" content="{{ site.url}}{{ page.url | replace:'index.html','' }}">
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if page.description %}
|
||||||
|
<meta name="twitter:description" content="{{ page.description }}">
|
||||||
|
{% else %}
|
||||||
|
<meta name="twitter:description" content="{{ page.excerpt | strip_html }}">
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
{% if page.image %}
|
||||||
|
<meta name="twitter:image:src" content="{{ site.url }}/assets/img/{{ page.image }}">
|
||||||
|
{% else %}
|
||||||
|
<meta name="twitter:image:src" content="{{ site.url }}/assets/img/share-image.png">
|
||||||
|
{% endif %}
|
|
@ -0,0 +1,28 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
{% include head.html %}
|
||||||
|
|
||||||
|
{% capture id %}{{ page.url | replace:'/','-' | replace_first:'-','' | replace:'.html','' | replace:'-index','' }}{% endcapture %}
|
||||||
|
|
||||||
|
<body class="page-{{ id | remove:'-' }}" role="document">
|
||||||
|
|
||||||
|
<!--[if lt IE 9]>
|
||||||
|
<div class="browsehappy alert alert-warning">
|
||||||
|
<p>You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/" target="_blank">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true" target="_blank">activate Google Chrome Frame</a> to improve your experience.</p>
|
||||||
|
</div>
|
||||||
|
<![endif]-->
|
||||||
|
|
||||||
|
<section role="main" class="main">
|
||||||
|
|
||||||
|
{{ content }}
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{% include footer.html %}
|
||||||
|
|
||||||
|
{% include scripts.html %}
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
|
@ -0,0 +1,32 @@
|
||||||
|
---
|
||||||
|
layout: base
|
||||||
|
|
||||||
|
front_page: true
|
||||||
|
---
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<div class="row">
|
||||||
|
<h1 class="section-title">Bigchain is coming</h1>
|
||||||
|
<div class="section-description">
|
||||||
|
<div class="grid grid--gutters">
|
||||||
|
<p class="grid__col">100,000 transactions per second and climbing</p>
|
||||||
|
<p class="grid__col">Petabyte Capacity</p>
|
||||||
|
<p class="grid__col">Open Source</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section background--black">
|
||||||
|
<div class="row">
|
||||||
|
<h1 class="section-title">Whitepaper</h1>
|
||||||
|
<p class="section-description">Coming soon</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section background--blue">
|
||||||
|
<div class="row">
|
||||||
|
<h1 class="section-title">Early Access</h1>
|
||||||
|
<p class="section-description">For early access and inquiries, enter your contact information below</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
|
@ -0,0 +1,2 @@
|
||||||
|
|
||||||
|
- [CSS](css.md)
|
|
@ -0,0 +1,21 @@
|
||||||
|
CSS
|
||||||
|
------------------
|
||||||
|
|
||||||
|
### Vendor Prefixes
|
||||||
|
|
||||||
|
Just write the official, unprefixed syntax for all CSS 3 features, no need to write the vendor prefixed versions.
|
||||||
|
|
||||||
|
[Autoprefixer](https://github.com/postcss/autoprefixer) handles that for you automatically based on the browser versions defined in the task and data from [Can I Use](http://caniuse.com/).
|
||||||
|
|
||||||
|
|
||||||
|
SVG sprite
|
||||||
|
------------------
|
||||||
|
|
||||||
|
All icons and most assets are SVGs. A gulp task grabs all svg files from the `img/` folder and puts them as `<symbol>` into one SVG sprite file. Reference those icons with the SVG `<use>` element and their ID in the HTML where you want them to be:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<svg class="logo" aria-labelledby="title">
|
||||||
|
<title>Logo</title>
|
||||||
|
<use xlink:href="/assets/img/sprite.svg#logo"></use>
|
||||||
|
</svg>
|
||||||
|
```
|
|
@ -0,0 +1,316 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// load plugins
|
||||||
|
var $ = require('gulp-load-plugins')();
|
||||||
|
|
||||||
|
// manually require modules that won"t get picked up by gulp-load-plugins
|
||||||
|
var gulp = require('gulp'),
|
||||||
|
del = require('del'),
|
||||||
|
pkg = require('./package.json'),
|
||||||
|
browser = require('browser-sync');
|
||||||
|
|
||||||
|
// Temporary solution until gulp 4
|
||||||
|
// https://github.com/gulpjs/gulp/issues/355
|
||||||
|
var runSequence = require('run-sequence');
|
||||||
|
|
||||||
|
// handle errors
|
||||||
|
var onError = function(error) {
|
||||||
|
$.util.log('');
|
||||||
|
$.util.log($.util.colors.red('You fucked up:', error.message, 'on line' , error.lineNumber));
|
||||||
|
$.util.log('');
|
||||||
|
this.emit('end');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 'development' is just default, production overrides are triggered
|
||||||
|
// by adding the production flag to the gulp command e.g. `gulp build --production`
|
||||||
|
var isProduction = ($.util.env.production === true ? true : false);
|
||||||
|
|
||||||
|
|
||||||
|
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||||
|
// Terminal Banner
|
||||||
|
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||||
|
|
||||||
|
console.log("");
|
||||||
|
console.log($.util.colors.gray(" <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>"));
|
||||||
|
console.log($.util.colors.cyan(" ┌─┐┌─┐┌─┐┬─┐┬┌┐ ┌─┐"));
|
||||||
|
console.log($.util.colors.cyan(" ├─┤└─┐│ ├┬┘│├┴┐├┤ "));
|
||||||
|
console.log($.util.colors.cyan(" ┴ ┴└─┘└─┘┴└─┴└─┘└─┘"));
|
||||||
|
console.log($.util.colors.gray(" <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>"));
|
||||||
|
console.log("");
|
||||||
|
|
||||||
|
|
||||||
|
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||||
|
// Config
|
||||||
|
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||||
|
|
||||||
|
// Port to use for the development server
|
||||||
|
var PORT = 1337;
|
||||||
|
|
||||||
|
// Browsers to target when prefixing CSS
|
||||||
|
var COMPATIBILITY = ['Chrome >= 30', 'Safari >= 6.1', 'Firefox >= 35', 'Opera >= 32', 'iOS >= 8', 'Android >= 4', 'ie >= 10'];
|
||||||
|
|
||||||
|
// paths
|
||||||
|
var SRC = '_src/',
|
||||||
|
DIST = '_dist/';
|
||||||
|
|
||||||
|
// SVG sprite
|
||||||
|
var SPRITECONFIG = {
|
||||||
|
dest: DIST + 'assets/img/',
|
||||||
|
mode: {
|
||||||
|
symbol: {
|
||||||
|
dest: './',
|
||||||
|
sprite: 'sprite.svg'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// code banner
|
||||||
|
var BANNER = [
|
||||||
|
'/**',
|
||||||
|
' ** <%= pkg.name %> v<%= pkg.version %>',
|
||||||
|
' ** <%= pkg.description %>',
|
||||||
|
' ** <%= pkg.homepage %>',
|
||||||
|
' **',
|
||||||
|
' ** <%= pkg.author.name %> <<%= pkg.author.email %>>',
|
||||||
|
' **',
|
||||||
|
' ** ',
|
||||||
|
' ** <%= pkg.repository.url %> ',
|
||||||
|
' **/',
|
||||||
|
''
|
||||||
|
].join('\n');
|
||||||
|
|
||||||
|
|
||||||
|
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||||
|
// Tasks
|
||||||
|
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||||
|
|
||||||
|
//
|
||||||
|
// Delete build artifacts
|
||||||
|
//
|
||||||
|
gulp.task('clean', function(done) {
|
||||||
|
return del([
|
||||||
|
DIST + '**/*',
|
||||||
|
DIST + '.*' // delete all hidden files
|
||||||
|
], done);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Jekyll
|
||||||
|
//
|
||||||
|
gulp.task('jekyll', function(cb) {
|
||||||
|
|
||||||
|
browser.notify('Compiling Jekyll');
|
||||||
|
|
||||||
|
var spawn = require('child_process').spawn;
|
||||||
|
|
||||||
|
if (isProduction) {
|
||||||
|
var jekyll = spawn('bundle', ['exec', 'jekyll', 'build'], { stdio: 'inherit' });
|
||||||
|
} else {
|
||||||
|
var jekyll = spawn('bundle', ['exec', 'jekyll', 'build', '--incremental', '--drafts', '--future'], { stdio: 'inherit' });
|
||||||
|
}
|
||||||
|
|
||||||
|
jekyll.on('exit', function(code) {
|
||||||
|
cb(code === 0 ? null : 'ERROR: Jekyll process exited with code: ' + code);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// HTML
|
||||||
|
//
|
||||||
|
gulp.task('html', function() {
|
||||||
|
return gulp.src(DIST + '/**/*.html')
|
||||||
|
.pipe($.if(isProduction, $.htmlmin({
|
||||||
|
collapseWhitespace: true,
|
||||||
|
conservativeCollapse: true,
|
||||||
|
removeComments: true,
|
||||||
|
useShortDoctype: true,
|
||||||
|
collapseBooleanAttributes: true,
|
||||||
|
removeRedundantAttributes: true,
|
||||||
|
removeEmptyAttributes: true,
|
||||||
|
minifyJS: true,
|
||||||
|
minifyCSS: true
|
||||||
|
})))
|
||||||
|
.pipe(gulp.dest(DIST));
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Styles
|
||||||
|
//
|
||||||
|
gulp.task('css', function() {
|
||||||
|
return gulp.src(SRC + '_assets/styles/bigchain.scss')
|
||||||
|
.pipe($.sourcemaps.init())
|
||||||
|
.pipe($.sass().on('error', $.sass.logError))
|
||||||
|
.pipe($.autoprefixer({ browsers: COMPATIBILITY }))
|
||||||
|
.pipe($.if(isProduction, $.cssmin()))
|
||||||
|
.pipe($.if(!isProduction, $.sourcemaps.write()))
|
||||||
|
.pipe($.if(isProduction, $.header(BANNER, { pkg: pkg })))
|
||||||
|
.pipe($.rename({ suffix: '.min' }))
|
||||||
|
.pipe(gulp.dest(DIST + 'assets/css/'))
|
||||||
|
.pipe(browser.stream());
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// JavaScript
|
||||||
|
//
|
||||||
|
gulp.task('js', function() {
|
||||||
|
return gulp.src([
|
||||||
|
SRC + '_assets/javascripts/bigchain.js',
|
||||||
|
SRC + '_assets/javascripts/page-*.js'
|
||||||
|
])
|
||||||
|
.pipe($.sourcemaps.init())
|
||||||
|
.pipe($.include())
|
||||||
|
.pipe($.if(isProduction, $.uglify())).on('error', onError)
|
||||||
|
.pipe($.if(!isProduction, $.sourcemaps.write()))
|
||||||
|
.pipe($.if(isProduction, $.header(BANNER, { pkg: pkg })))
|
||||||
|
.pipe($.rename({suffix: '.min'}))
|
||||||
|
.pipe(gulp.dest(DIST + 'assets/js/'));
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// SVG sprite
|
||||||
|
//
|
||||||
|
gulp.task('svg', function() {
|
||||||
|
return gulp.src(SRC + '_assets/images/**/*.svg')
|
||||||
|
.pipe($.if(isProduction, $.imagemin({
|
||||||
|
svgoPlugins: [{
|
||||||
|
removeRasterImages: true
|
||||||
|
}]
|
||||||
|
})))
|
||||||
|
.pipe($.svgSprite(SPRITECONFIG))
|
||||||
|
.pipe(gulp.dest(DIST + 'assets/img/'));
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Copy Images
|
||||||
|
//
|
||||||
|
gulp.task('images', function() {
|
||||||
|
return gulp.src(SRC + '_assets/images/**/*')
|
||||||
|
.pipe($.if(isProduction, $.imagemin({
|
||||||
|
optimizationLevel: 5, // png
|
||||||
|
progressive: true, // jpg
|
||||||
|
interlaced: true, // gif
|
||||||
|
multipass: true, // svg
|
||||||
|
svgoPlugins: [{ removeViewBox: false }]
|
||||||
|
})))
|
||||||
|
.pipe(gulp.dest(DIST + 'assets/img/'));
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Copy Fonts
|
||||||
|
//
|
||||||
|
gulp.task('fonts', function() {
|
||||||
|
return gulp.src([
|
||||||
|
'./node_modules/fira/**/FiraSans-Light.*'
|
||||||
|
])
|
||||||
|
.pipe($.rename({dirname: ''}))
|
||||||
|
.pipe(gulp.dest(DIST + 'assets/fonts/'));
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Revision static assets
|
||||||
|
//
|
||||||
|
gulp.task('rev', function() {
|
||||||
|
// globbing is slow so do everything conditionally for faster dev build
|
||||||
|
if (isProduction) {
|
||||||
|
return gulp.src(DIST + '/assets/**/*.{css,js,png,jpg,jpeg,svg,eot,ttf,woff}')
|
||||||
|
.pipe($.rev())
|
||||||
|
.pipe(gulp.dest(DIST + '/assets/'))
|
||||||
|
// output rev manifest for next replace task
|
||||||
|
.pipe($.rev.manifest())
|
||||||
|
.pipe(gulp.dest(DIST + '/assets/'));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Replace all links to assets in files
|
||||||
|
// from a manifest file
|
||||||
|
//
|
||||||
|
gulp.task('rev:replace', function() {
|
||||||
|
// globbing is slow so do everything conditionally for faster dev build
|
||||||
|
if (isProduction) {
|
||||||
|
var manifest = gulp.src(DIST + '/assets/rev-manifest.json');
|
||||||
|
|
||||||
|
return gulp.src(DIST + '/**/*.{html,xml,txt,json,css,js,png,jpg,jpeg,svg,eot,ttf,woff}')
|
||||||
|
.pipe($.revReplace({ manifest: manifest }))
|
||||||
|
.pipe(gulp.dest(DIST));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// CDN url injection
|
||||||
|
//
|
||||||
|
gulp.task('cdn', function() {
|
||||||
|
return gulp.src([DIST + '/**/*.html', DIST + '/assets/css/*.css'], { base: DIST })
|
||||||
|
.pipe($.replace('/assets/css/', CDN + '/assets/css/'))
|
||||||
|
.pipe($.replace('/assets/js/', CDN + '/assets/js/'))
|
||||||
|
.pipe($.replace('/assets/img/', CDN + '/assets/img/'))
|
||||||
|
.pipe($.replace('../', CDN + '/assets/'))
|
||||||
|
.pipe(gulp.dest(DIST));
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Dev Server
|
||||||
|
//
|
||||||
|
gulp.task('server', ['build'], function() {
|
||||||
|
browser.init({
|
||||||
|
server: DIST,
|
||||||
|
port: PORT,
|
||||||
|
reloadDebounce: 2000
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||||
|
// Task sequences
|
||||||
|
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Build site, run server, and watch for file changes
|
||||||
|
//
|
||||||
|
gulp.task('default', ['build', 'server'], function() {
|
||||||
|
gulp.watch([SRC + '_assets/styles/**/*.scss'], ['css']);
|
||||||
|
gulp.watch([SRC + '_assets/javascripts/**/*.js'], ['js', browser.reload]);
|
||||||
|
gulp.watch([SRC + '_assets/images/**/*.{png,jpg,jpeg,gif,webp}'], ['images', browser.reload]);
|
||||||
|
gulp.watch([SRC + '_assets/images/**/*.{svg}'], ['svg', browser.reload]);
|
||||||
|
gulp.watch([SRC + '**/*.{html,xml,json,txt,md,yml}', './_config.yml', SRC + '_includes/svg/*'], ['build', browser.reload]);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Full build
|
||||||
|
//
|
||||||
|
// `gulp build` is the development build
|
||||||
|
// `gulp build --production` is the production build
|
||||||
|
//
|
||||||
|
gulp.task('build', function(done) {
|
||||||
|
|
||||||
|
$.util.log($.util.colors.gray(" ------------------------------------------"));
|
||||||
|
$.util.log($.util.colors.green(' Building ' + ($.util.env.production ? 'production' : 'dev') + ' version...'));
|
||||||
|
$.util.log($.util.colors.gray(" ------------------------------------------"));
|
||||||
|
|
||||||
|
runSequence(
|
||||||
|
'clean',
|
||||||
|
'jekyll',
|
||||||
|
['html', 'css', 'js', 'images', 'fonts', 'svg'],
|
||||||
|
'rev',
|
||||||
|
'rev:replace',
|
||||||
|
done
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||||
|
// Deployment
|
||||||
|
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
34
package.json
34
package.json
|
@ -9,11 +9,41 @@
|
||||||
"homepage": "http://www.bigchain.io",
|
"homepage": "http://www.bigchain.io",
|
||||||
"license": "(c) 2015 ascribe - All Rights Reserved",
|
"license": "(c) 2015 ascribe - All Rights Reserved",
|
||||||
"main": "gulpfile.js",
|
"main": "gulpfile.js",
|
||||||
|
"scripts": {
|
||||||
|
"start": "gulp",
|
||||||
|
"build": "gulp build --production"
|
||||||
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"normalize-opentype.css": "^0.2.4",
|
"normalize-css": ">=2.3.1",
|
||||||
|
"normalize-opentype.css": ">=0.2.4",
|
||||||
|
"jquery": "^2.1.4",
|
||||||
|
"parsleyjs": "^2.0.7",
|
||||||
|
"svg4everybody": "^2.0.0",
|
||||||
|
"fira": "mozilla/Fira"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"browser-sync": ">=2.10.0",
|
||||||
|
"del": "^2.0.2",
|
||||||
|
"gulp": "^3.9.0",
|
||||||
|
"gulp-autoprefixer": "^3.0.1",
|
||||||
|
"gulp-concat": "^2.6.0",
|
||||||
|
"gulp-cssmin": "^0.1.7",
|
||||||
|
"gulp-header": "^1.7.1",
|
||||||
|
"gulp-htmlmin": "^1.1.4",
|
||||||
|
"gulp-if": "^1.2.5",
|
||||||
|
"gulp-imagemin": "^2.3.0",
|
||||||
|
"gulp-include": "^2.0.2",
|
||||||
|
"gulp-load-plugins": "^0.10.0",
|
||||||
|
"gulp-rename": "^1.2.2",
|
||||||
|
"gulp-replace": "^0.5.4",
|
||||||
|
"gulp-rev": "^6.0.1",
|
||||||
|
"gulp-rev-replace": "^0.4.2",
|
||||||
|
"gulp-sass": "^2.0.4",
|
||||||
|
"gulp-sourcemaps": "^1.6.0",
|
||||||
|
"gulp-svg-sprite": "^1.2.9",
|
||||||
|
"gulp-uglify": "^1.4.1",
|
||||||
|
"gulp-util": "^3.0.6",
|
||||||
|
"run-sequence": "^1.1.2"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=0.10.29"
|
"node": ">=0.10.29"
|
||||||
|
|
Loading…
Reference in New Issue