{title}
+ {description && ( ++ {description} +
+ )} +```javascript
+```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
+
+ 
+
```
-
-```
+
+
Or, in pure Markdown, but losing the image sizing and border:
-```
+```md
[](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)
```
diff --git a/data/sections.yml b/data/sections.yml
index e25ea5f4..a9658c33 100644
--- a/data/sections.yml
+++ b/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.
diff --git a/data/sidebars/setup.yml b/data/sidebars/setup.yml
index 39e5740d..71a0b4fa 100644
--- a/data/sidebars/setup.yml
+++ b/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/
diff --git a/gatsby-config.js b/gatsby-config.js
index 6d7e6f24..96db765c 100755
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -33,7 +33,7 @@ module.exports = {
{
resolve: 'gatsby-remark-images',
options: {
- maxWidth: 756,
+ maxWidth: 640,
quality: 80,
withWebp: true,
linkImagesToOriginal: false,
diff --git a/src/components/Header.module.scss b/src/components/Header.module.scss
index 0d01ee5b..f90f40c7 100644
--- a/src/components/Header.module.scss
+++ b/src/components/Header.module.scss
@@ -8,13 +8,10 @@
}
.headerContent {
- max-width: $break-point--large;
- margin-left: auto;
- margin-right: auto;
+ composes: content from './Content.module.scss';
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 {
diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss
index bd6d36a0..04cf953f 100644
--- a/src/components/Sidebar.module.scss
+++ b/src/components/Sidebar.module.scss
@@ -31,6 +31,8 @@
li {
display: block;
+
+ &:before { display: none; }
}
}
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index 20ade0aa..0b9fc2ab 100644
--- a/src/pages/index.module.scss
+++ b/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;
diff --git a/src/styles/global.scss b/src/styles/global.scss
index d3eaee8e..803e8b38 100644
--- a/src/styles/global.scss
+++ b/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;
+}
diff --git a/src/templates/Doc.jsx b/src/templates/Doc.jsx
index 1866de6c..0850362c 100644
--- a/src/templates/Doc.jsx
+++ b/src/templates/Doc.jsx
@@ -23,17 +23,34 @@ export default class DocTemplate extends Component {
-
- {section && (
+ {section ? (
+
- )}
+
+
+
-
+
+
+
+ ) : (
+
-
+ )}
)
diff --git a/src/templates/Doc.module.scss b/src/templates/Doc.module.scss
index 4962c89d..7ec664c3 100644
--- a/src/templates/Doc.module.scss
+++ b/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;
+ }
}