From 60f97f85a4844307e504c3e311486c5b77e35f22 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 20 Nov 2017 11:04:08 +0100
Subject: [PATCH] learnings intro

---
 _src/_assets/styles/_page-guides.scss      | 21 +++++++++++++++++++++
 _src/_assets/styles/bigchain/_toc.scss     |  2 +-
 _src/_guides/key-concepts-of-bigchaindb.md |  1 -
 _src/_guides/tutorial-car-telemetry-app.md | 12 ++++++------
 _src/_guides/tutorial-token-launch.md      | 10 +++++-----
 _src/_layouts/guide.html                   |  9 +++++++++
 6 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/_src/_assets/styles/_page-guides.scss b/_src/_assets/styles/_page-guides.scss
index 3fe97f4..3ce164d 100644
--- a/_src/_assets/styles/_page-guides.scss
+++ b/_src/_assets/styles/_page-guides.scss
@@ -1,5 +1,7 @@
 .content--guide {
     .content--page--markdown {
+        padding-top: $spacer * 4;
+
         h1,
         h2,
         h3,
@@ -35,6 +37,24 @@
     }
 }
 
+.section-header--guide {
+    margin-bottom: $spacer * 3;
+
+    .section-description {
+        text-align: left;
+
+        h2 {
+            @extend .h5;
+            margin-top: 0;
+            font-size: $font-size-lg;
+        }
+
+        ul {
+            margin: 0;
+        }
+    }
+}
+
 .guide {
     height: 100%;
 
@@ -88,6 +108,7 @@ h1.guide__title {
 //
 .section-nav {
     background: darken($brand-main-gray, 2%);
+    margin-top: 0;
     margin-bottom: $spacer * 2;
     padding: $spacer;
     border-radius: $border-radius;
diff --git a/_src/_assets/styles/bigchain/_toc.scss b/_src/_assets/styles/bigchain/_toc.scss
index ee8652b..f968708 100644
--- a/_src/_assets/styles/bigchain/_toc.scss
+++ b/_src/_assets/styles/bigchain/_toc.scss
@@ -9,7 +9,7 @@
     &:before {
         @extend .h5;
         content: 'Contents';
-        font-size: $font-size-base;
+        font-size: $font-size-lg;
         display: block;
         margin-top: 0;
     }
diff --git a/_src/_guides/key-concepts-of-bigchaindb.md b/_src/_guides/key-concepts-of-bigchaindb.md
index 0f81ec1..c0c49ec 100644
--- a/_src/_guides/key-concepts-of-bigchaindb.md
+++ b/_src/_guides/key-concepts-of-bigchaindb.md
@@ -3,7 +3,6 @@ layout: guide
 
 title: Key concepts of BigchainDB
 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 6d627cf..9d8aa3b 100644
--- a/_src/_guides/tutorial-car-telemetry-app.md
+++ b/_src/_guides/tutorial-car-telemetry-app.md
@@ -4,14 +4,14 @@ layout: guide
 title: "Tutorial: Car Telemetry App"
 tagline: Learn how to build telemetry apps to track specific dynamic parameters of an asset.
 header: header-car.jpg
+learn: >
+    - How BigchainDB 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 BigchainDB it is possible to use `TRANSFER` transactions to change the state of an asset, in this case the mileage of a car.
 ---
 
-You will learn:
-
-- How BigchainDB 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 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
 
 ```js
diff --git a/_src/_guides/tutorial-token-launch.md b/_src/_guides/tutorial-token-launch.md
index 445984b..2861399 100644
--- a/_src/_guides/tutorial-token-launch.md
+++ b/_src/_guides/tutorial-token-launch.md
@@ -4,13 +4,13 @@ layout: guide
 title: "Tutorial: Token distribution launch"
 tagline: Build a token launch with BigchainDB
 header: header-token.jpg
+
+learn: >
+    - How BigchainDB can be used to record the transactions made by a token distribution launch
+
+    - How to use divisible assets on BigchainDB
 ---
 
-You will learn:
-
-- How BigchainDB can be used to record the transactions made by a token distribution launch
-- How to use divisible assets on BigchainDB
-
 We show how divisible assets work in BigchainDB by showing how you could create your own token launch on BigchainDB. The token distribution is represented by divisible assets (tokens) linked to one specific application (company/network).
 
 When creating a divisible asset in BigchainDB, the number of the sub-assets that you want to create should be specified.
diff --git a/_src/_layouts/guide.html b/_src/_layouts/guide.html
index e13435e..bce88eb 100644
--- a/_src/_layouts/guide.html
+++ b/_src/_layouts/guide.html
@@ -7,6 +7,15 @@ layout: base
 <section role="main" class="content content--page content--guide">
     <div class="row content--page--markdown">
 
+        {% if page.learn %}
+        <header class="section-header section-header--guide">
+            <div class="section-description">
+                <h2>You will learn</h2>
+                {{ page.learn | markdownify }}
+            </div>
+        </header>
+        {% endif %}
+
         {{ content | toc }}
 
     </div>