diff --git a/_src/_assets/styles/_page-guides.scss b/_src/_assets/styles/_page-guides.scss index 9be3132..a8d5978 100644 --- a/_src/_assets/styles/_page-guides.scss +++ b/_src/_assets/styles/_page-guides.scss @@ -39,20 +39,26 @@ height: 100%; a { + @include color-overlay; + background-size: cover; + background-position: center; display: block; box-shadow: none; - background: $brand-main-blue-dark; + background-color: $brand-main-blue-dark; padding: $spacer * 2; height: 100%; border-radius: $border-radius; + &:before { + opacity: .9; + } + &:hover, &:focus { - background: $brand-primary; - - * { - color: $brand-main-blue-dark; - } + background-size: cover; + background-position: center; + box-shadow: 0 2px 5px rgba($brand-main-blue-dark, .2); + transform: translateY(-1px); } } @@ -62,6 +68,12 @@ } } +.guide__title, +.guide__tagline { + position: relative; + z-index: 1; +} + .guide__title, h1.guide__title { font-size: $font-size-h4; @@ -111,3 +123,10 @@ li.toc-h2 { li.toc-h3 { display: none; } + +.header--guide { + .header__content { + padding-top: ($spacer * 5); + padding-bottom: ($spacer * 5); + } +} diff --git a/_src/_assets/styles/_sections/_section-blog.scss b/_src/_assets/styles/_sections/_section-blog.scss index 5d99b4b..cd9baf6 100644 --- a/_src/_assets/styles/_sections/_section-blog.scss +++ b/_src/_assets/styles/_sections/_section-blog.scss @@ -21,7 +21,7 @@ } .article__title { - @extend .h6, .transition; + @extend .h5, .transition; margin: 0; color: #fff; position: relative; diff --git a/_src/_assets/styles/bigchain/_header.scss b/_src/_assets/styles/bigchain/_header.scss index 3ee5a6e..b272d80 100644 --- a/_src/_assets/styles/bigchain/_header.scss +++ b/_src/_assets/styles/bigchain/_header.scss @@ -5,14 +5,13 @@ } .header__content { - padding: ($spacer * 3) 0; + padding: ($spacer * 4) 0; text-align: center; } // intro animation .header__title, .header__tagline, -.header__description, .header__logo, .header__label { .wf-active &, @@ -22,7 +21,7 @@ } } -.header__description, +.header__tagline, .header__logo { .wf-active &, .wf-inactive & { @@ -46,7 +45,9 @@ margin: 0; } -.header__tagline { - font-size: $font-size-h3; - color: #fff; +.header__tagline, +h2.header__tagline { + font-size: $font-size-h4; + font-weight: $font-weight-normal; + margin-top: $spacer; } diff --git a/_src/_assets/styles/bigchain/_syntax.scss b/_src/_assets/styles/bigchain/_syntax.scss index 93a27e3..a4aa8fe 100644 --- a/_src/_assets/styles/bigchain/_syntax.scss +++ b/_src/_assets/styles/bigchain/_syntax.scss @@ -1,5 +1,6 @@ // https://github.com/mgyongyosi/OneDarkJekyll/blob/master/syntax-one-dark.css +// highly modified /* stylelint-disable */ .highlight pre { @@ -7,6 +8,6 @@ background-color: $code-bg; } -.highlight .hll{background:#282c34}.highlight .c{color:#5c6370;font-style:italic}.highlight .err{color:#960050;background-color:#1e0010}.highlight .k{color:#c678dd}.highlight .l{color:#98c379}.highlight .n{color:#abb2bf}.highlight .o{color:#abb2bf}.highlight .p{color:#abb2bf}.highlight .cm{color:#5c6370;font-style:italic}.highlight .cp{color:#5c6370;font-style:italic}.highlight .c1{color:#5c6370;font-style:italic}.highlight .cs{color:#5c6370;font-style:italic}.highlight .ge{font-style:italic}.highlight .gs{font-weight:700}.highlight .kc{color:#c678dd}.highlight .kd{color:#c678dd}.highlight .kn{color:#c678dd}.highlight .kp{color:#c678dd}.highlight .kr{color:#c678dd}.highlight .kt{color:#c678dd}.highlight .ld{color:#98c379}.highlight .m{color:#d19a66}.highlight .s{color:#98c379}.highlight .na{color:#d19a66}.highlight .nb{color:#e5c07b}.highlight .nc{color:#e5c07b}.highlight .no{color:#e5c07b}.highlight .nd{color:#e5c07b}.highlight .ni{color:#e5c07b}.highlight .ne{color:#e5c07b}.highlight .nf{color:#abb2bf}.highlight .nl{color:#e5c07b}.highlight .nn{color:#abb2bf}.highlight .nx{color:#abb2bf}.highlight .py{color:#e5c07b}.highlight .nt{color:#e06c75}.highlight .nv{color:#e5c07b}.highlight .ow{font-weight:700}.highlight .w{color:#f8f8f2}.highlight .mf{color:#d19a66}.highlight .mh{color:#d19a66}.highlight .mi{color:#d19a66}.highlight .mo{color:#d19a66}.highlight .sb{color:#98c379}.highlight .sc{color:#98c379}.highlight .sd{color:#98c379}.highlight .s2{color:#98c379}.highlight .se{color:#98c379}.highlight .sh{color:#98c379}.highlight .si{color:#98c379}.highlight .sx{color:#98c379}.highlight .sr{color:#56b6c2}.highlight .s1{color:#98c379}.highlight .ss{color:#56b6c2}.highlight .bp{color:#e5c07b}.highlight .vc{color:#e5c07b}.highlight .vg{color:#e5c07b}.highlight .vi{color:#e06c75}.highlight .il{color:#d19a66}.highlight .gu{color:#75715e}.highlight .gd{color:#f92672}.highlight .gi{color:#a6e22e} +.highlight .hll{background:#282c34}.highlight .c{color:darken($brand-main-blue-light, 15%);font-style:italic}.highlight .err{color:#960050;background-color:#1e0010}.highlight .k{color:$brand-main-violet}.highlight .l{color:#98c379}.highlight .n{color:$code-color}.highlight .o{color:$code-color}.highlight .p{color:$code-color}.highlight .cm{color:darken($brand-main-blue-light, 15%);font-style:italic}.highlight .cp{color:darken($brand-main-blue-light, 15%);font-style:italic}.highlight .c1{color:darken($brand-main-blue-light, 15%);font-style:italic}.highlight .cs{color:darken($brand-main-blue-light, 15%);font-style:italic}.highlight .ge{font-style:italic}.highlight .gs{font-weight:700}.highlight .kc{color:$brand-main-violet}.highlight .kd{color:$brand-main-violet}.highlight .kn{color:$brand-main-violet}.highlight .kp{color:$brand-main-violet}.highlight .kr{color:$brand-main-violet}.highlight .kt{color:$brand-main-violet}.highlight .ld{color:#98c379}.highlight .m{color:#d19a66}.highlight .s{color:#98c379}.highlight .na{color:#d19a66}.highlight .nb{color:#e5c07b}.highlight .nc{color:#e5c07b}.highlight .no{color:#e5c07b}.highlight .nd{color:#e5c07b}.highlight .ni{color:#e5c07b}.highlight .ne{color:#e5c07b}.highlight .nf{color:$code-color}.highlight .nl{color:#e5c07b}.highlight .nn{color:$code-color}.highlight .nx{color:$code-color}.highlight .py{color:#e5c07b}.highlight .nt{color:#e06c75}.highlight .nv{color:#e5c07b}.highlight .ow{font-weight:700}.highlight .w{color:#f8f8f2}.highlight .mf{color:#d19a66}.highlight .mh{color:#d19a66}.highlight .mi{color:#d19a66}.highlight .mo{color:#d19a66}.highlight .sb{color:#98c379}.highlight .sc{color:#98c379}.highlight .sd{color:#98c379}.highlight .s2{color:#98c379}.highlight .se{color:#98c379}.highlight .sh{color:#98c379}.highlight .si{color:#98c379}.highlight .sx{color:#98c379}.highlight .sr{color:#56b6c2}.highlight .s1{color:#98c379}.highlight .ss{color:#56b6c2}.highlight .bp{color:#e5c07b}.highlight .vc{color:#e5c07b}.highlight .vg{color:#e5c07b}.highlight .vi{color:#e06c75}.highlight .il{color:#d19a66}.highlight .gu{color:#75715e}.highlight .gd{color:#f92672}.highlight .gi{color:#a6e22e} /* stylelint-enable */ diff --git a/_src/_assets/styles/bigchain/_variables.scss b/_src/_assets/styles/bigchain/_variables.scss index 5206a05..b4e1e35 100644 --- a/_src/_assets/styles/bigchain/_variables.scss +++ b/_src/_assets/styles/bigchain/_variables.scss @@ -113,7 +113,7 @@ $gutter-space: ($spacer * 2) !default; // // Code // -$code-color: $brand-main-gray-lighter !default; +$code-color: $brand-main-gray-light !default; $code-bg: darken($gray-dark, 5%) !default; $kbd-color: $code-color !default; diff --git a/_src/_guides/key-concepts-of-bigchaindb.md b/_src/_guides/key-concepts-of-bigchaindb.md index 86b739a..7d24954 100644 --- a/_src/_guides/key-concepts-of-bigchaindb.md +++ b/_src/_guides/key-concepts-of-bigchaindb.md @@ -2,8 +2,8 @@ layout: guide title: Key concepts of BigchainDB -description: Understand the transaction model of BigchainDB (identity, inputs, outputs, assets, transactions). -image: image.jpg +tagline: Understand the transaction model of BigchainDB (identity, inputs, outputs, assets, transactions). +header: image.jpg --- - Introduction: How do we structure data? diff --git a/_src/_guides/tutorial-car-telemetry-app.md b/_src/_guides/tutorial-car-telemetry-app.md index 6f0273d..5c7b676 100644 --- a/_src/_guides/tutorial-car-telemetry-app.md +++ b/_src/_guides/tutorial-car-telemetry-app.md @@ -2,15 +2,15 @@ layout: guide title: "Tutorial: Car Telemetry App" -description: Learn how to build telemetry apps to track specific dynamic parameters of an asset. -image: image.jpg +tagline: Learn how to build telemetry apps to track specific dynamic parameters of an asset. +header: photo4.jpg --- You will learn: - How BDB can be used to build telemetry apps to track specific dynamic parameters of an asset - How to make a `CREATE` transaction to create a car. Assets as representation of real objects. -- How asset metadata is updated. In BDB is possible to use `TRANSFER` transactions to change the state of an asset, in this case the mileage of a car. +- How asset metadata is updated. In BigchainDB it is possible to use `TRANSFER` transactions to change the state of an asset, in this case the mileage of a car. # Connect to IPDB @@ -42,7 +42,7 @@ The asset will live in BigchainDB forever and there is not possibility to delete First we need to define the asset field that represents the car. It has a JSON format ```js -const vehicle ={ +const vehicle = { value: '6sd8f68sd67', power: { engine: '2.5', diff --git a/_src/_includes/header.html b/_src/_includes/header.html new file mode 100644 index 0000000..f4c78a5 --- /dev/null +++ b/_src/_includes/header.html @@ -0,0 +1,14 @@ + diff --git a/_src/_includes/sections/section-guides.html b/_src/_includes/sections/section-guides.html index ba234dd..83a1021 100644 --- a/_src/_includes/sections/section-guides.html +++ b/_src/_includes/sections/section-guides.html @@ -10,9 +10,9 @@ {% for guide in site.guides limit: 4 %}
- +

{{ guide.title }}

-

{{ guide.description }}

+

{{ guide.tagline }}
diff --git a/_src/_layouts/about.html b/_src/_layouts/about.html index 5bdd6ad..0b027c6 100644 --- a/_src/_layouts/about.html +++ b/_src/_layouts/about.html @@ -2,16 +2,7 @@ layout: base --- - +{% include header.html %}
diff --git a/_src/_layouts/guide.html b/_src/_layouts/guide.html index e165333..db44afe 100644 --- a/_src/_layouts/guide.html +++ b/_src/_layouts/guide.html @@ -2,28 +2,13 @@ layout: base --- - +{% include header.html %}
-
- {% if page.description %} -
-

{{ page.description }}

-
- {% endif %} {{ content | toc }} +
@@ -39,7 +24,7 @@ layout: base {% unless page.id == guide.id %}
diff --git a/_src/_layouts/page.html b/_src/_layouts/page.html index d2f18f0..a4c987e 100644 --- a/_src/_layouts/page.html +++ b/_src/_layouts/page.html @@ -2,20 +2,7 @@ layout: base --- - +{% include header.html %}
diff --git a/_src/_layouts/partner.html b/_src/_layouts/partner.html index c04a082..7f83553 100644 --- a/_src/_layouts/partner.html +++ b/_src/_layouts/partner.html @@ -7,16 +7,7 @@ cta: button: Learn More --- - +{% include header.html %}
diff --git a/_src/guides.html b/_src/guides.html index bf96d1b..fec7eaa 100644 --- a/_src/guides.html +++ b/_src/guides.html @@ -2,24 +2,18 @@ layout: page title: Guides - -js: page-guides.min.js +tagline: "These guides explain you how to get started and build apps with BigchainDB/IPDB" ---
-
-
-

These guides explain you how to get started and build apps with BigchainDB/IPDB

-
-
{% for guide in site.guides %}