more content styling

content/concepts/ecosystem.md

@@ -3,8 +3,6 @@ title: Ecosystem
 description: The Ocean Protocol network consists of various components.
 ---
 
-[Architecture](./architecture/)
-
 Learn about all of them here.
 
 -   💧 keeper. See also [Set Up a Keeper](/setup/keeper/)

content/setup/marketplace.md

@@ -1,5 +1,6 @@
 ---
 title: Set Up a Marketplace
+description: Fill me
 ---
 
 If you want to set up a marketplace for the Ocean network, then you could start by running the following tech stack:
@@ -36,8 +37,8 @@ TODO: Link to instructions.
 
 At the time of writing, Aquarius worked with three databases:
 
-* MongoDB
+-   MongoDB
-* Elasticsearch
+-   Elasticsearch
-* BigchainDB
+-   BigchainDB
 
 TODO: Outline the pros and cons of each database.

content/test.md

@@ -1,23 +1,24 @@
 ---
 title: Content test
+description: This is intended as a quick reference and showcase.
 ---
 
-This is intended as a quick reference and showcase. For more complete info, see [John Gruber's original spec](http://daringfireball.net/projects/markdown/) and the [Github-flavored Markdown info page](http://github.github.com/github-flavored-markdown/).
+For more complete info, see [John Gruber's original spec](http://daringfireball.net/projects/markdown/) and the [Github-flavored Markdown info page](http://github.github.com/github-flavored-markdown/).
 
-##### Table of Contents
+## Table of Contents
 
 * [Headers](#headers)
 * [Emphasis](#emphasis)
 * [Lists](#lists)
 * [Links](#links)
 * [Images](#images)
-* [Code and Syntax Highlighting](#code)
+* [Code and Syntax Highlighting](#code-and-syntax-highlighting)
 * [Tables](#tables)
 * [Blockquotes](#blockquotes)
-* [Inline HTML](#html)
+* [Inline HTML](#inline-html)
-* [Horizontal Rule](#hr)
+* [Horizontal Rule](#horizontal-rule)
-* [Line Breaks](#lines)
+* [Line Breaks](#line-breaks)
-* [YouTube Videos](#videos)
+* [YouTube Videos](#youtube-videos)
 
 ## Headers
 
@@ -82,9 +83,7 @@ Strikethrough uses two tildes. ~~Scratch this.~~
 1. Actual numbers don't matter, just that it's a number
   1. Ordered sub-list
 4. And another item.
-
    Some text that should be aligned with the above item.
-
 * Unordered list can use asterisks
 - Or minuses
 + Or pluses
@@ -92,17 +91,11 @@ Strikethrough uses two tildes. ~~Scratch this.~~
 
 1. First ordered list item
 2. Another item
-
    * Unordered sub-list.
-
 1. Actual numbers don't matter, just that it's a number
-
    1. Ordered sub-list
-
 4. And another item.
-
    Some text that should be aligned with the above item.
-
 * Unordered list can use asterisks
 - Or minuses
 + Or pluses
@@ -152,30 +145,30 @@ Some text to show that the reference links can follow later.
 ## Images
 
 ```
-Here's our logo (hover to see the title text):
+Here's our jellyfish (hover to see the title text):
 
 Inline-style:
-![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")
+![alt text](https://github.com/oceanprotocol/art/raw/master/jellyfish/jellyfish-grid%402x.png "Ocean Protocol Jellyfish")
 
 Reference-style:
-![alt text][logo]
+![alt text][jellyfish]
 
-[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"
+[jellyfish]: https://github.com/oceanprotocol/art/raw/master/jellyfish/jellyfish-grid%402x.png "Ocean Protocol Jellyfish"
 ```
 
-Here's our logo (hover to see the title text):
+Here's our jellyfish (hover to see the title text):
 
 Inline-style:
-![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")
+![alt text](https://github.com/oceanprotocol/art/raw/master/jellyfish/jellyfish-grid%402x.png "Ocean Protocol Jellyfish")
 
 Reference-style:
-![alt text][logo]
+![alt text][jellyfish]
 
-[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"
+[jellyfish]: https://github.com/oceanprotocol/art/raw/master/jellyfish/jellyfish-grid%402x.png "Ocean Protocol Jellyfish"
 
 ## Code and Syntax Highlighting
 
-Code blocks are part of the Markdown spec, but syntax highlighting isn't. However, many renderers -- like Github's and *Markdown Here* -- support syntax highlighting. *Markdown Here* supports highlighting for dozens of languages (and not-really-languages, like diffs and HTTP headers); to see the complete list, and how to write the language names, see the [highlight.js demo page](http://softwaremaniacs.org/media/soft/highlight/test.html).
+Code blocks are part of the Markdown spec, but syntax highlighting isn't. However, many renderers -- like Github's and *Markdown Here* -- support syntax highlighting.
 
 ```
 Inline `code` has `back-ticks around` it.
@@ -183,9 +176,9 @@ Inline `code` has `back-ticks around` it.
 
 Inline `code` has `back-ticks around` it.
 
-Blocks of code are either fenced by lines with three back-ticks <code>```</code>, or are indented with four spaces. I recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting.
+Blocks of code are either fenced by lines with three back-ticks, or are indented with four spaces. I recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting.
 
-<pre lang="no-highlight"><code>```javascript
+<pre><code>```js
 var s = "JavaScript syntax highlighting";
 alert(s);
 ```
@@ -223,7 +216,7 @@ Again, to see what languages are available for highlighting, and how to write th
 
 Tables aren't part of the core Markdown spec, but they are part of GFM and *Markdown Here* supports them. They are an easy way of adding tables to your email -- a task that would otherwise require copy-pasting from another application.
 
-```no-highlight
+```markdown
 Colons can be used to align columns.
 
 | Tables        | Are           | Cool  |
@@ -258,7 +251,7 @@ The outer pipes (|) are optional, and you don't need to make the raw Markdown li
 
 ## Blockquotes
 
-```
+```markdown
 > Blockquotes are very handy in email to emulate reply text.
 > This line is part of the same quote.
 
@@ -356,14 +349,16 @@ This line is only separated by a single newline, so it's a separate line in the
 
 They can't be added directly but you can add an image with a link to the video like this:
 
+```html
+<a href="http://www.youtube.com/watch?feature=player_embedded&v=8AkLfYOgIrE" target="_blank">
+    <img src="http://img.youtube.com/vi/8AkLfYOgIrE/0.jpg" alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" />
+</a>
 ```
-<a href="http://www.youtube.com/watch?feature=player_embedded&v=8AkLfYOgIrE
+
-" target="_blank"><img src="http://img.youtube.com/vi/8AkLfYOgIrE/0.jpg"
+<a href="http://www.youtube.com/watch?feature=player_embedded&v=8AkLfYOgIrE" target="_blank"><img src="http://img.youtube.com/vi/8AkLfYOgIrE/0.jpg" alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>
-alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>
-```
 
 Or, in pure Markdown, but losing the image sizing and border:
 
-```
+```md
 [![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)
 ```

data/sections.yml

@@ -4,7 +4,7 @@
 
 - title: Setup Guides
   description: Setting up the Ocean Protocol components.
-  link: /setup/keeper/
+  link: /setup/marketplace/
 
 - title: Tutorials
   description: Browse tutorials for most common setup and development use-cases.

data/sidebars/setup.yml

@@ -1,8 +1,8 @@
 - group: Setup Guides
   items:
-    - title: Set Up a Keeper
-      link: /setup/keeper/
     - title: Set Up a Marketplace
       link: /setup/marketplace/
+    - title: Set Up a Keeper
+      link: /setup/keeper/
     - title: Publish Data or Services
       link: /setup/publisher/

gatsby-config.js

@@ -33,7 +33,7 @@ module.exports = {
                     {
                         resolve: 'gatsby-remark-images',
                         options: {
-                            maxWidth: 756,
+                            maxWidth: 640,
                             quality: 80,
                             withWebp: true,
                             linkImagesToOriginal: false,

src/components/Header.module.scss

@@ -8,13 +8,10 @@
 }
 
 .headerContent {
-    max-width: $break-point--large;
+    composes: content from './Content.module.scss';
-    margin-left: auto;
-    margin-right: auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0 $spacer;
 }
 
 .headerLogo {
@@ -34,6 +31,7 @@
     width: 60px;
     height: 60px;
     fill: #fff;
+    margin: 0;
 }
 
 .headerTitle {

src/components/Sidebar.module.scss

@@ -31,6 +31,8 @@
 
     li {
         display: block;
+
+        &:before { display: none; }
     }
 }
 

src/pages/index.module.scss

@@ -15,6 +15,8 @@
 .section {
     margin-bottom: $spacer;
 
+    &:before { display: none; }
+
     @media (min-width: $break-point--medium) {
         flex: 0 0 30%;
         margin-bottom: 0;

src/styles/global.scss

@@ -24,11 +24,6 @@ body {
     position: relative;
     margin: 0;
 
-    // handling long text, like URLs
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    word-break: break-word;
-
     @media screen and (min-width: $break-point--small) {
         padding: $page-frame;
     }
@@ -56,15 +51,82 @@ a {
 
 p {
     margin: 0;
-    margin-bottom: $spacer / 2;
+    margin-bottom: $spacer / $line-height;
 }
 
+// Lists
+/////////////////////////////////////
+
+ul {
+    li {
+        &::before {
+            content: ' \25AA'; // Black Small Square: ▪ ▪
+        }
+    }
+}
+
+ol {
+    counter-reset: ol-counter;
+
+    li {
+        &::before {
+            content: counter(ol-counter) '.';
+            counter-increment: ol-counter;
+            font-family: $font-family-button;
+        }
+    }
+
+    ul li::before {
+        content: ' \25AA';
+    }
+}
+
+ul,
+ol {
+    margin-top: 0;
+    margin-bottom: $spacer;
+    padding-left: $spacer / $line-height;
+    list-style: none;
+
+    li {
+        position: relative;
+        display: block;
+
+        &::before {
+            position: absolute;
+            left: -($spacer / $line-height);
+            top: -1px;
+            color: $brand-grey-light;
+            user-select: none;
+        }
+    }
+}
+
+// Inline typography
+/////////////////////////////////////
+
+b,
 strong,
-.strong {
+.bold {
     font-family: $font-family-button;
     font-weight: 600;
 }
 
+em,
+.italic {
+    font-style: italic;
+}
+
+abbr[title],
+dfn {
+    text-transform: none;
+    font-style: normal;
+    font-size: inherit;
+    border-bottom: 1px dashed $brand-grey-light;
+    cursor: help;
+    font-feature-settings: inherit;
+}
+
 h1,
 h2,
 h3,
@@ -113,26 +175,94 @@ picture {
     display: block;
 }
 
+hr {
+    margin: $spacer * $line-height 0;
+    border: 0;
+    border-bottom: .1rem solid $brand-grey-lighter;
+}
+
+// Quotes
+/////////////////////////////////////
+
+q {
+    font-style: italic;
+}
+
+cite {
+    font-style: normal;
+    text-transform: uppercase;
+}
+
+blockquote,
+blockquote > p {
+    font-style: italic;
+}
+
+blockquote {
+    margin: 0 0 $spacer;
+    padding-left: $spacer;
+}
+
+// Tables
+/////////////////////////////////////
+
+table {
+    width: 100%;
+    margin-bottom: $spacer * $line-height;
+    border-collapse: collapse;
+
+    th,
+    td {
+        border: 0;
+        margin: 0;
+        padding: $spacer / 2;
+        border-bottom: 1px solid $brand-grey-lighter;
+    }
+
+    th {
+        font-family: $font-family-button;
+        font-weight: 600;
+        text-align: left;
+
+        &[align="center"] {
+            text-align: center;
+        }
+
+        &[align="right"] {
+            text-align: right;
+        }
+    }
+
+    td {
+
+    }
+}
+
+// Code
+/////////////////////////////////////
+
 code,
 kbd,
 pre,
 samp {
     font-family: $font-family-monospace;
     font-size: $font-size-small;
+    background: $brand-black !important;
+    color: $brand-grey-lighter !important;
+    border-radius: $border-radius !important;
 }
 
 pre {
     display: block;
     margin-bottom: $spacer !important;
+    padding: 0 !important;
 
     // make 'em scrollable
     overflow: auto;
     -webkit-overflow-scrolling: touch;
-    max-height: 500px;
-    max-width: 100%;
 
     code {
-        padding: 0;
+        padding: $spacer;
         white-space: pre;
         display: block;
         color: inherit;
@@ -143,3 +273,15 @@ pre {
     }
 }
 
+// Selection
+/////////////////////////////////////
+
+::-moz-selection {
+    background: $brand-black;
+    color: #fff;
+}
+
+::selection {
+    background: $brand-black;
+    color: #fff;
+}

src/templates/Doc.jsx

@@ -23,17 +23,34 @@ export default class DocTemplate extends Component {
             <Layout location={location}>
                 <HeaderSection title={section} />
                 <Content>
-                    <main className={styles.wrapper}>
+                    {section ? (
-                        {section && (
+                        <main className={styles.wrapper}>
                             <aside className={styles.sidebar}>
                                 <Sidebar
                                     location={location}
                                     sidebar={section}
                                 />
                             </aside>
-                        )}
+                            <article className={styles.main}>
+                                <header className={styles.header}>
+                                    <h1 className={styles.title}>{title}</h1>
+                                    {description && (
+                                        <p className={styles.lead}>
+                                            {description}
+                                        </p>
+                                    )}
+                                </header>
 
-                        <article className={styles.main}>
+                                <div
+                                    className={styles.docContent}
+                                    dangerouslySetInnerHTML={{
+                                        __html: post.html
+                                    }}
+                                />
+                            </article>
+                        </main>
+                    ) : (
+                        <article className={styles.mainSingle}>
                             <header className={styles.header}>
                                 <h1 className={styles.title}>{title}</h1>
                                 {description && (
@@ -43,10 +60,12 @@ export default class DocTemplate extends Component {
 
                             <div
                                 className={styles.docContent}
-                                dangerouslySetInnerHTML={{ __html: post.html }}
+                                dangerouslySetInnerHTML={{
+                                    __html: post.html
+                                }}
                             />
                         </article>
-                    </main>
+                    )}
                 </Content>
             </Layout>
         )

src/templates/Doc.module.scss

@@ -3,18 +3,24 @@
 .wrapper {
     @media (min-width: $break-point--medium) {
         display: flex;
-        justify-content: space-between;
     }
 }
 
 .sidebar {
-    flex: 0 0 25%;
+    flex: 0 0 30%;
+    padding-right: $spacer * 2;
 
     + .main {
         flex: 0 0 70%;
+        max-width: $break-point--small;
     }
 }
 
+.mainSingle {
+    max-width: $break-point--small;
+    margin: auto;
+}
+
 .header {
     margin-top: $spacer;
     margin-bottom: $spacer * $line-height;
@@ -31,10 +37,20 @@
 }
 
 .docContent {
+    // handling long text, like URLs
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+
     figcaption {
         font-size: $font-size-small;
         text-align: center;
         color: $brand-grey-light;
         margin-top: $spacer / 2;
     }
+
+    h1, h2 {
+        margin-top: $spacer;
+        margin-bottom: $spacer;
+    }
 }