copy & design updates

README.md

@@ -11,7 +11,7 @@
 ---
 
 - [Copy editing](#copy-editing)
-    - [Editing workflow](#editing-workflow)
+  - [Editing workflow](#editing-workflow)
 - [Development](#development)
 - [Deployment](#deployment)
 - [Authors](#authors)

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

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>

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;