From 3c784f9219d71c9e2a8977b23de949db872966a0 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Thu, 13 Dec 2018 15:30:49 +0100
Subject: [PATCH] copy & design updates

---
 README.md              |  2 +-
 content.yml            | 10 ++++------
 src/index.html         |  4 +++-
 src/styles/styles.scss | 21 +++++++++++++++++++--
 4 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index ff659a7..4e7185e 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@
 ---
 
 - [Copy editing](#copy-editing)
-    - [Editing workflow](#editing-workflow)
+  - [Editing workflow](#editing-workflow)
 - [Development](#development)
 - [Deployment](#deployment)
 - [Authors](#authors)
diff --git a/content.yml b/content.yml
index 6319727..cce2418 100644
--- a/content.yml
+++ b/content.yml
@@ -1,11 +1,9 @@
 title: Manta Ray
 tagline: Data Science powered by Ocean Protocol
-paragraph: > 
-    The **Manta Ray** notebooks provide a guided tour of Ocean Protocol in an interactive Jupyter Notebook environment.
-    Start using Ocean Protocol with your own pre-configured and loaded cloud instance after login with your GitHub account.
-    *This project is in alpha!*
-    Feel free to ask questions and post bug reports in our Gitter channel! https://gitter.im/oceanprotocol/Lobby
-    Notebooks are for tutorial and demonstration purpose only. Notebook instances may be periodically offline, and storage volumes will be purged.
+paragraph: >
+    The <strong>Manta Ray</strong> notebooks provide a guided tour of Ocean Protocol in an interactive Jupyter Notebook environment. Start using Ocean Protocol with your own pre-configured and loaded cloud instance after login with your GitHub account.<br /><br />
+
+    <strong>This project is in alpha!</strong> Feel free to ask questions and post bug reports in <a href="https://gitter.im/oceanprotocol/Lobby">our Gitter channel</a>. Notebooks are for tutorial and demonstration purpose only. Notebook instances may be periodically offline, and storage volumes will be purged.
 links:
     - name: JupyterLab Instance
       url: http://a1e6efedde7f611e8887b1225ec03c49-1029831930.us-east-1.elb.amazonaws.com
diff --git a/src/index.html b/src/index.html
index 5fe1c11..d4d8772 100644
--- a/src/index.html
+++ b/src/index.html
@@ -20,9 +20,11 @@
 
             <header>
                 <h1>{{ content.title }}</h1>
-                <p>{{ content.intro }}</p>
+                <h2>{{ content.tagline }}</h2>
             </header>
 
+            <p>{{ content.paragraph }}</p>
+
             <div class="links">
                 {% for link in links %}
                 <a class="link" href="{{ link.url }}">{{ link.name }}</a>
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 26d88e7..3e843cf 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -35,7 +35,7 @@ header {
 }
 
 h1 {
-    margin-bottom: $spacer;
+    margin-bottom:  $spacer / 2;
     font-size: $font-size-h3;
 
     @media (min-width: $break-point--small) {
@@ -43,6 +43,23 @@ h1 {
     }
 }
 
+h2 {
+    margin-top: 0;
+    margin-bottom: $spacer;
+    font-size: $font-size-h5;
+
+    @media (min-width: $break-point--small) {
+        font-size: $font-size-h4;
+    }
+}
+
+p {
+    max-width: 40rem;
+    margin: auto;
+    text-align: left;
+    margin-bottom: $spacer / 2;
+}
+
 img {
     width: 5rem;
     height: 5rem;
@@ -51,7 +68,7 @@ img {
 }
 
 .links {
-    margin-top: $spacer * 2;
+    margin-top: $spacer;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;