From 2b531e601a9cc912d9eab68afc855c243d9a5129 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 27 Jun 2017 21:59:58 +0200
Subject: [PATCH] form tweaks

---
 _src/_assets/styles/_page-getstarted.scss | 21 +++++++++++++++++++--
 _src/_assets/styles/bigchain/_forms.scss  |  4 ++--
 _src/_data/getstarted.yml                 |  2 +-
 _src/getstarted.html                      |  5 +++--
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/_src/_assets/styles/_page-getstarted.scss b/_src/_assets/styles/_page-getstarted.scss
index 861b168..3fcbfbe 100644
--- a/_src/_assets/styles/_page-getstarted.scss
+++ b/_src/_assets/styles/_page-getstarted.scss
@@ -7,8 +7,15 @@
 .section--firsttransaction {
     overflow: visible;
 
-    h4 {
-        margin-bottom: $spacer * 2.5;
+    .section-title {
+        font-size: $font-size-h3;
+        text-align: left;
+        margin-top: $spacer * 3;
+        margin-bottom: $spacer * 3;
+
+        &:after {
+            display: none;
+        }
     }
 }
 
@@ -16,11 +23,21 @@
     // mnml frm
     background: none;
     padding: 0;
+
+    min-height: 340px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    .form-group:first-child {
+        margin-top: 0;
+    }
 }
 
 .form--transaction__content {
     border: none;
     padding: 0;
+    width: 100%;
 }
 
 .waiting {
diff --git a/_src/_assets/styles/bigchain/_forms.scss b/_src/_assets/styles/bigchain/_forms.scss
index 3f2b008..d631742 100644
--- a/_src/_assets/styles/bigchain/_forms.scss
+++ b/_src/_assets/styles/bigchain/_forms.scss
@@ -309,8 +309,8 @@ input[type='checkbox'] {
 .parsley-errors-list {
     @extend .list-unstyled;
     position: absolute;
-    left: 0;
-    bottom: 0;
+    right: 0;
+    bottom: $spacer * 1.2;
     font-size: $font-size-xs;
 
     &,
diff --git a/_src/_data/getstarted.yml b/_src/_data/getstarted.yml
index 6e0b7e4..bf18e3c 100644
--- a/_src/_data/getstarted.yml
+++ b/_src/_data/getstarted.yml
@@ -8,7 +8,7 @@ firsttransaction:
     message:
         label: "Type a message"
         button: "Off you go"
-        request: "A transaction can contain a digital asset along with a message. Type something to be sent along the asset."
+        request: "A transaction can contain a digital asset along with a message. Type something above to be sent along the asset."
         response: "Nicely done! You have just created an asset, sent it along in a signed transaction and retrieved the result of that transaction. Phew."
 
 
diff --git a/_src/getstarted.html b/_src/getstarted.html
index 25a1c9d..84faa32 100644
--- a/_src/getstarted.html
+++ b/_src/getstarted.html
@@ -24,11 +24,10 @@ redirect_from:
     </aside>
 
     <div class="row row--wide">
-        <h4>{{ content.firsttransaction.title }}</h4>
+        <h1 class="section-title">{{ content.firsttransaction.title }}</h1>
 
         <div class="grid grid--full grid-small--half grid--gutters">
             <div class="grid__col">
-                <p class="message alert alert--info">{{ content.firsttransaction.message.request }}</p>
 
                 <form id="form-transaction" class="form form--transaction js-parsley">
                     <fieldset class="form--transaction__content">
@@ -38,6 +37,8 @@ redirect_from:
                             <label class="form-label" for="message">{{ content.firsttransaction.message.label }}</label>
                         </p>
 
+                        <p class="message alert alert--info">{{ content.firsttransaction.message.request }}</p>
+
                         <button class="btn btn-primary" id="post" disabled>{{ content.firsttransaction.message.button }}</button>
                     </fieldset>