mirror of
https://github.com/bigchaindb/site.git
synced 2024-11-21 17:26:55 +01:00
header component cleanup, more syntax style tweaks
This commit is contained in:
parent
0d4fb77be5
commit
2ca7acfa67
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -21,7 +21,7 @@
|
||||
}
|
||||
|
||||
.article__title {
|
||||
@extend .h6, .transition;
|
||||
@extend .h5, .transition;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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 */
|
||||
|
@ -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;
|
||||
|
@ -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?
|
||||
|
@ -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',
|
||||
|
14
_src/_includes/header.html
Normal file
14
_src/_includes/header.html
Normal file
@ -0,0 +1,14 @@
|
||||
<header role="banner" class="header" {% if page.header %}style="background-image:url('/assets/img/{{ page.header }}')" {%
|
||||
endif %}>
|
||||
|
||||
{% include menu-main.html %}
|
||||
|
||||
<div class="row">
|
||||
<div class="header__content">
|
||||
<h1 class="header__title">{{ page.title }}</h1>
|
||||
{% if page.tagline %}
|
||||
<h2 class="header__tagline">{{ page.tagline }}</h2>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
@ -10,9 +10,9 @@
|
||||
{% for guide in site.guides limit: 4 %}
|
||||
<div class="grid__col">
|
||||
<article class="guide">
|
||||
<a href="{{ guide.url }}">
|
||||
<a href="{{ guide.url }}" {% if guide.header %}style="background-image:url('/assets/img/{{ guide.header }}')" {% endif %}>
|
||||
<h1 class="guide__title">{{ guide.title }}</h1>
|
||||
<p class="guide__description">{{ guide.description }}</p>
|
||||
<p class="guide__tagline">{{ guide.tagline }}</p>
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
|
@ -2,16 +2,7 @@
|
||||
layout: base
|
||||
---
|
||||
|
||||
<header role="banner" class="header" {% if page.image %}style="background-image:url('/assets/img/{{ page.image }}')"{% endif %}>
|
||||
|
||||
{% include menu-main.html %}
|
||||
|
||||
<div class="row">
|
||||
<div class="header__content">
|
||||
<h1 class="header__title">{{ page.title }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{% include header.html %}
|
||||
|
||||
<section role="main" class="content content--page">
|
||||
|
||||
|
@ -2,28 +2,13 @@
|
||||
layout: base
|
||||
---
|
||||
|
||||
<header role="banner" class="header" {% if page.header %}style="background-image:url('/assets/img/{{ page.header }}')" {%
|
||||
endif %}>
|
||||
|
||||
{% include menu-main.html %}
|
||||
|
||||
<div class="row">
|
||||
<div class="header__content">
|
||||
<h1 class="header__title">{{ page.title }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{% include header.html %}
|
||||
|
||||
<section role="main" class="content content--page content--guide">
|
||||
|
||||
<div class="row content--page--markdown">
|
||||
{% if page.description %}
|
||||
<header class="section-header">
|
||||
<p class="section-description">{{ page.description }}</p>
|
||||
</header>
|
||||
{% endif %}
|
||||
|
||||
{{ content | toc }}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -39,7 +24,7 @@ layout: base
|
||||
{% unless page.id == guide.id %}
|
||||
<div class="grid__col">
|
||||
<article class="guide">
|
||||
<a href="{{ guide.url }}">
|
||||
<a href="{{ guide.url }}" {% if guide.header %}style="background-image:url('/assets/img/{{ guide.header }}')" {% endif %}>
|
||||
<h1 class="guide__title">{{ guide.title }}</h1>
|
||||
</a>
|
||||
</article>
|
||||
|
@ -2,20 +2,7 @@
|
||||
layout: base
|
||||
---
|
||||
|
||||
<header role="banner" class="header" {% if page.header %}style="background-image:url('/assets/img/{{ page.header }}')"{% endif %}>
|
||||
|
||||
{% include menu-main.html %}
|
||||
|
||||
<div class="row">
|
||||
<div class="header__content">
|
||||
{% if page.tagline %}
|
||||
<h1 class="header__tagline">{{ page.tagline }}
|
||||
{% else %}
|
||||
<h1 class="header__title">{{ page.title }}</h1>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{% include header.html %}
|
||||
|
||||
<section role="main" class="content content--page">
|
||||
|
||||
|
@ -7,16 +7,7 @@ cta:
|
||||
button: Learn More
|
||||
---
|
||||
|
||||
<header role="banner" class="header header--partner" {% if page.header %}style="background-image:url('/assets/img/{{ page.header }}')"{% endif %}>
|
||||
|
||||
{% include menu-main.html %}
|
||||
|
||||
<div class="row">
|
||||
<hgroup class="header__content">
|
||||
<h1 class="header__title">{{ page.title }}</h1>
|
||||
</hgroup>
|
||||
</div>
|
||||
</header>
|
||||
{% include header.html %}
|
||||
|
||||
<section role="main" class="section content content--page content--partner">
|
||||
|
||||
|
@ -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"
|
||||
---
|
||||
|
||||
<section class="section section--guides">
|
||||
<div class="row">
|
||||
<header class="section-header">
|
||||
<p class="section-description">These guides explain you how to get started and build apps with BigchainDB/IPDB</p>
|
||||
</header>
|
||||
</div>
|
||||
<div class="row row--wide">
|
||||
<div class="grid grid--full grid-small--half grid--gutters">
|
||||
{% for guide in site.guides %}
|
||||
<div class="grid__col">
|
||||
<article class="guide">
|
||||
<a href="{{ guide.url }}">
|
||||
<a href="{{ guide.url }}" {% if guide.header %}style="background-image:url('/assets/img/{{ guide.header }}')" {% endif %}>
|
||||
<h1 class="guide__title">{{ guide.title }}</h1>
|
||||
<p class="guide__description">{{ guide.description }}</p>
|
||||
<p class="guide__tagline">{{ guide.tagline }}</p>
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user