header component cleanup, more syntax style tweaks

This commit is contained in:
Matthias Kretschmann 2017-11-17 16:18:44 +01:00
parent 0d4fb77be5
commit 2ca7acfa67
Signed by: m
GPG Key ID: 606EEEF3C479A91F
14 changed files with 67 additions and 84 deletions

View File

@ -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);
}
}

View File

@ -21,7 +21,7 @@
}
.article__title {
@extend .h6, .transition;
@extend .h5, .transition;
margin: 0;
color: #fff;
position: relative;

View File

@ -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;
}

View File

@ -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 */

View File

@ -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;

View File

@ -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?

View File

@ -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',

View 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>

View File

@ -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>

View File

@ -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">

View File

@ -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>

View File

@ -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">

View File

@ -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">

View File

@ -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>