diff --git a/README.md b/README.md index cfd284b5..6c015d10 100644 --- a/README.md +++ b/README.md @@ -2,13 +2,15 @@

docs

-> One site to rule all docs. +> 🐍 Ocean Protocol's official documentation. -[![Build Status](https://travis-ci.com/oceanprotocol/docs.svg?branch=master)](https://travis-ci.com/oceanprotocol/docs) +[![Build Status](https://travis-ci.com/oceanprotocol/docs.svg?token=3psqw6c8KMDqfdGQ2x6d&branch=master)](https://travis-ci.com/oceanprotocol/docs) [![js oceanprotocol](https://img.shields.io/badge/js-oceanprotocol-7b1173.svg)](https://github.com/oceanprotocol/eslint-config-oceanprotocol) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-7b1173.svg?style=flat-square)](https://github.com/prettier/prettier) [![Greenkeeper badge](https://badges.greenkeeper.io/oceanprotocol/docs.svg)](https://greenkeeper.io/) +--- + - [Content](#content) - [Editing docs](#editing-docs) - [Adding docs](#adding-docs) @@ -16,6 +18,8 @@ - [Authors](#authors) - [License](#license) +--- + ## Content ...documentation concept... diff --git a/content/concepts/introduction.md b/content/concepts/introduction.md new file mode 100644 index 00000000..cda8255c --- /dev/null +++ b/content/concepts/introduction.md @@ -0,0 +1,5 @@ +--- +title: Introduction +--- + +What is Ocean Protocol? diff --git a/content/core-concepts/terminology.md b/content/concepts/terminology.md similarity index 100% rename from content/core-concepts/terminology.md rename to content/concepts/terminology.md diff --git a/gatsby-browser.js b/gatsby-browser.js index b1e5c316..c40415d9 100755 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,7 +1,7 @@ -/** - * Implement Gatsby's Browser APIs in this file. - * - * See: https://www.gatsbyjs.org/docs/browser-apis/ - */ +// import global branding styles +import './src/styles/global.scss' -// You can delete this file if you're not using it +// IntersectionObserver polyfill for gatsby-image (Safari, IE) +if (typeof window.IntersectionObserver === 'undefined') { + import('intersection-observer') +} diff --git a/gatsby-config.js b/gatsby-config.js index 3e48cb02..c9f848da 100755 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -1,6 +1,8 @@ module.exports = { siteMetadata: { - title: 'Ocean Protocol Docs' + title: 'Ocean Protocol Docs', + descritpion: '', + siteUrl: process.env.SITE_URL || 'https://docs.oceanprotocol.com' }, plugins: [ { @@ -17,6 +19,29 @@ module.exports = { path: `${__dirname}/content` } }, + { + resolve: 'gatsby-transformer-remark', + options: { + plugins: [ + { + resolve: 'gatsby-remark-images', + options: { + maxWidth: 600 + } + }, + 'gatsby-remark-prismjs', + 'gatsby-remark-autolink-headers' + ] + } + }, + { + resolve: 'gatsby-plugin-sass', + options: { + includePaths: [`${__dirname}/src/styles`] + } + }, + 'gatsby-plugin-react-svg', + 'gatsby-plugin-catch-links', 'gatsby-plugin-react-helmet', 'gatsby-transformer-sharp', 'gatsby-plugin-sharp' diff --git a/gatsby-node.js b/gatsby-node.js index 2f426651..20adfcfc 100755 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,7 +1,73 @@ -/** - * Implement Gatsby's Node APIs in this file. - * - * See: https://www.gatsbyjs.org/docs/node-apis/ - */ +const path = require('path') +const { createFilePath } = require('gatsby-source-filesystem') -// You can delete this file if you're not using it +exports.onCreateNode = ({ node, getNode, actions }) => { + const { createNodeField } = actions + + if (node.internal.type === `MarkdownRemark`) { + const fileNode = getNode(node.parent) + const parsedFilePath = path.parse(fileNode.relativePath) + const slug = createFilePath({ node, getNode }) + const section = parsedFilePath.dir + + createNodeField({ + node, + name: 'slug', + value: slug + }) + + createNodeField({ + node, + name: 'section', + value: section + }) + } +} + +exports.createPages = ({ graphql, actions }) => { + const { createPage } = actions + + return new Promise((resolve, reject) => { + resolve( + graphql( + ` + { + allMarkdownRemark { + edges { + node { + fields { + slug + section + } + } + } + } + } + ` + ).then(result => { + if (result.errors) { + /* eslint-disable-next-line no-console */ + console.log(result.errors) + reject(result.errors) + } + + const posts = result.data.allMarkdownRemark.edges + const docTemplate = path.resolve('./src/templates/Doc.jsx') + + // Create Doc pages + posts.forEach(post => { + createPage({ + path: `${post.node.fields.slug}`, + component: docTemplate, + context: { + slug: post.node.fields.slug, + section: post.node.fields.section + } + }) + }) + + resolve() + }) + ) + }) +} diff --git a/package.json b/package.json index b136b5ca..cf9c6790 100755 --- a/package.json +++ b/package.json @@ -6,12 +6,22 @@ "dependencies": { "gatsby": "^2.0.19", "gatsby-image": "^2.0.15", + "gatsby-plugin-catch-links": "^2.0.6", "gatsby-plugin-manifest": "^2.0.5", "gatsby-plugin-offline": "^2.0.11", "gatsby-plugin-react-helmet": "^3.0.0", + "gatsby-plugin-react-svg": "^2.0.0-beta1", + "gatsby-plugin-sass": "^2.0.3", "gatsby-plugin-sharp": "^2.0.7", + "gatsby-remark-autolink-headers": "^2.0.10", + "gatsby-remark-images": "^2.0.6", + "gatsby-remark-prismjs": "^3.0.3", "gatsby-source-filesystem": "^2.0.4", + "gatsby-transformer-remark": "^2.1.11", "gatsby-transformer-sharp": "^2.1.4", + "intersection-observer": "^0.5.1", + "node-sass": "^4.10.0", + "prismjs": "^1.15.0", "react": "^16.5.1", "react-dom": "^16.5.1", "react-helmet": "^5.2.0" diff --git a/src/components/header.js b/src/components/Header.jsx similarity index 100% rename from src/components/header.js rename to src/components/Header.jsx diff --git a/src/components/image.js b/src/components/Image.jsx similarity index 100% rename from src/components/image.js rename to src/components/Image.jsx diff --git a/src/components/layout.js b/src/components/Layout.jsx similarity index 87% rename from src/components/layout.js rename to src/components/Layout.jsx index e56aa0e4..586e8beb 100755 --- a/src/components/layout.js +++ b/src/components/Layout.jsx @@ -3,8 +3,8 @@ import PropTypes from 'prop-types' import Helmet from 'react-helmet' import { StaticQuery, graphql } from 'gatsby' -import Header from './header' -import './layout.css' +import Header from './Header' +import styles from './Layout.module.scss' const Layout = ({ children }) => ( (
-
{children}
+
{children}
)} /> diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss new file mode 100755 index 00000000..e8698931 --- /dev/null +++ b/src/components/Layout.module.scss @@ -0,0 +1,7 @@ +@import 'variables'; + +.main { + padding: 0 $spacer; + max-width: 45rem; + margin: auto; +} diff --git a/src/components/layout.css b/src/components/layout.css deleted file mode 100755 index e485487b..00000000 --- a/src/components/layout.css +++ /dev/null @@ -1,624 +0,0 @@ -html { - font-family: sans-serif; - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; -} -body { - margin: 0; -} -article, -aside, -details, -figcaption, -figure, -footer, -header, -main, -menu, -nav, -section, -summary { - display: block; -} -audio, -canvas, -progress, -video { - display: inline-block; -} -audio:not([controls]) { - display: none; - height: 0; -} -progress { - vertical-align: baseline; -} -[hidden], -template { - display: none; -} -a { - background-color: transparent; - -webkit-text-decoration-skip: objects; -} -a:active, -a:hover { - outline-width: 0; -} -abbr[title] { - border-bottom: none; - text-decoration: underline; - text-decoration: underline dotted; -} -b, -strong { - font-weight: inherit; - font-weight: bolder; -} -dfn { - font-style: italic; -} -h1 { - font-size: 2em; - margin: .67em 0; -} -mark { - background-color: #ff0; - color: #000; -} -small { - font-size: 80%; -} -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} -sub { - bottom: -.25em; -} -sup { - top: -.5em; -} -img { - border-style: none; -} -svg:not(:root) { - overflow: hidden; -} -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; -} -figure { - margin: 1em 40px; -} -hr { - box-sizing: content-box; - height: 0; - overflow: visible; -} -button, -input, -optgroup, -select, -textarea { - font: inherit; - margin: 0; -} -optgroup { - font-weight: 700; -} -button, -input { - overflow: visible; -} -button, -select { - text-transform: none; -} -[type=reset], -[type=submit], -button, -html [type=button] { - -webkit-appearance: button; -} -[type=button]::-moz-focus-inner, -[type=reset]::-moz-focus-inner, -[type=submit]::-moz-focus-inner, -button::-moz-focus-inner { - border-style: none; - padding: 0; -} -[type=button]:-moz-focusring, -[type=reset]:-moz-focusring, -[type=submit]:-moz-focusring, -button:-moz-focusring { - outline: 1px dotted ButtonText; -} -fieldset { - border: 1px solid silver; - margin: 0 2px; - padding: .35em .625em .75em; -} -legend { - box-sizing: border-box; - color: inherit; - display: table; - max-width: 100%; - padding: 0; - white-space: normal; -} -textarea { - overflow: auto; -} -[type=checkbox], -[type=radio] { - box-sizing: border-box; - padding: 0; -} -[type=number]::-webkit-inner-spin-button, -[type=number]::-webkit-outer-spin-button { - height: auto; -} -[type=search] { - -webkit-appearance: textfield; - outline-offset: -2px; -} -[type=search]::-webkit-search-cancel-button, -[type=search]::-webkit-search-decoration { - -webkit-appearance: none; -} -::-webkit-input-placeholder { - color: inherit; - opacity: .54; -} -::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; -} -html { - font: 112.5%/1.45em georgia, serif; - box-sizing: border-box; - overflow-y: scroll; -} -* { - box-sizing: inherit; -} -*:before { - box-sizing: inherit; -} -*:after { - box-sizing: inherit; -} -body { - color: hsla(0, 0%, 0%, 0.8); - font-family: georgia, serif; - font-weight: normal; - word-wrap: break-word; - font-kerning: normal; - -moz-font-feature-settings: "kern", "liga", "clig", "calt"; - -ms-font-feature-settings: "kern", "liga", "clig", "calt"; - -webkit-font-feature-settings: "kern", "liga", "clig", "calt"; - font-feature-settings: "kern", "liga", "clig", "calt"; -} -img { - max-width: 100%; - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -h1 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 2.25rem; - line-height: 1.1; -} -h2 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 1.62671rem; - line-height: 1.1; -} -h3 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 1.38316rem; - line-height: 1.1; -} -h4 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 1rem; - line-height: 1.1; -} -h5 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 0.85028rem; - line-height: 1.1; -} -h6 { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - color: inherit; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; - font-weight: bold; - text-rendering: optimizeLegibility; - font-size: 0.78405rem; - line-height: 1.1; -} -hgroup { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -ul { - margin-left: 1.45rem; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - list-style-position: outside; - list-style-image: none; -} -ol { - margin-left: 1.45rem; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - list-style-position: outside; - list-style-image: none; -} -dl { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -dd { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -p { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -figure { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -pre { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - font-size: 0.85rem; - line-height: 1.42; - background: hsla(0, 0%, 0%, 0.04); - border-radius: 3px; - overflow: auto; - word-wrap: normal; - padding: 1.45rem; -} -table { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; - font-size: 1rem; - line-height: 1.45rem; - border-collapse: collapse; - width: 100%; -} -fieldset { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -blockquote { - margin-left: 1.45rem; - margin-right: 1.45rem; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -form { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -noscript { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -iframe { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -hr { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: calc(1.45rem - 1px); - background: hsla(0, 0%, 0%, 0.2); - border: none; - height: 1px; -} -address { - margin-left: 0; - margin-right: 0; - margin-top: 0; - padding-bottom: 0; - padding-left: 0; - padding-right: 0; - padding-top: 0; - margin-bottom: 1.45rem; -} -b { - font-weight: bold; -} -strong { - font-weight: bold; -} -dt { - font-weight: bold; -} -th { - font-weight: bold; -} -li { - margin-bottom: calc(1.45rem / 2); -} -ol li { - padding-left: 0; -} -ul li { - padding-left: 0; -} -li > ol { - margin-left: 1.45rem; - margin-bottom: calc(1.45rem / 2); - margin-top: calc(1.45rem / 2); -} -li > ul { - margin-left: 1.45rem; - margin-bottom: calc(1.45rem / 2); - margin-top: calc(1.45rem / 2); -} -blockquote *:last-child { - margin-bottom: 0; -} -li *:last-child { - margin-bottom: 0; -} -p *:last-child { - margin-bottom: 0; -} -li > p { - margin-bottom: calc(1.45rem / 2); -} -code { - font-size: 0.85rem; - line-height: 1.45rem; -} -kbd { - font-size: 0.85rem; - line-height: 1.45rem; -} -samp { - font-size: 0.85rem; - line-height: 1.45rem; -} -abbr { - border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); - cursor: help; -} -acronym { - border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); - cursor: help; -} -abbr[title] { - border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5); - cursor: help; - text-decoration: none; -} -thead { - text-align: left; -} -td, -th { - text-align: left; - border-bottom: 1px solid hsla(0, 0%, 0%, 0.12); - font-feature-settings: "tnum"; - -moz-font-feature-settings: "tnum"; - -ms-font-feature-settings: "tnum"; - -webkit-font-feature-settings: "tnum"; - padding-left: 0.96667rem; - padding-right: 0.96667rem; - padding-top: 0.725rem; - padding-bottom: calc(0.725rem - 1px); -} -th:first-child, -td:first-child { - padding-left: 0; -} -th:last-child, -td:last-child { - padding-right: 0; -} -tt, -code { - background-color: hsla(0, 0%, 0%, 0.04); - border-radius: 3px; - font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono", - "Liberation Mono", Menlo, Courier, monospace; - padding: 0; - padding-top: 0.2em; - padding-bottom: 0.2em; -} -pre code { - background: none; - line-height: 1.42; -} -code:before, -code:after, -tt:before, -tt:after { - letter-spacing: -0.2em; - content: " "; -} -pre code:before, -pre code:after, -pre tt:before, -pre tt:after { - content: ""; -} -@media only screen and (max-width: 480px) { - html { - font-size: 100%; - } -} diff --git a/src/data/sidebars.yml b/src/data/sidebars.yml new file mode 100644 index 00000000..e69de29b diff --git a/src/fonts/SharpSans-Bold.woff b/src/fonts/SharpSans-Bold.woff new file mode 100644 index 00000000..e0afd394 Binary files /dev/null and b/src/fonts/SharpSans-Bold.woff differ diff --git a/src/fonts/SharpSans-Bold.woff2 b/src/fonts/SharpSans-Bold.woff2 new file mode 100644 index 00000000..490b33ec Binary files /dev/null and b/src/fonts/SharpSans-Bold.woff2 differ diff --git a/src/fonts/SharpSans-Extrabold.woff b/src/fonts/SharpSans-Extrabold.woff new file mode 100644 index 00000000..799d53b8 Binary files /dev/null and b/src/fonts/SharpSans-Extrabold.woff differ diff --git a/src/fonts/SharpSans-Extrabold.woff2 b/src/fonts/SharpSans-Extrabold.woff2 new file mode 100644 index 00000000..bf0d2863 Binary files /dev/null and b/src/fonts/SharpSans-Extrabold.woff2 differ diff --git a/src/fonts/SharpSans-Medium.woff b/src/fonts/SharpSans-Medium.woff new file mode 100644 index 00000000..22a853b0 Binary files /dev/null and b/src/fonts/SharpSans-Medium.woff differ diff --git a/src/fonts/SharpSans-Medium.woff2 b/src/fonts/SharpSans-Medium.woff2 new file mode 100644 index 00000000..82c08a9c Binary files /dev/null and b/src/fonts/SharpSans-Medium.woff2 differ diff --git a/src/fonts/SharpSansDispNo1-Bold.woff b/src/fonts/SharpSansDispNo1-Bold.woff new file mode 100755 index 00000000..9a01d504 Binary files /dev/null and b/src/fonts/SharpSansDispNo1-Bold.woff differ diff --git a/src/fonts/SharpSansDispNo1-Bold.woff2 b/src/fonts/SharpSansDispNo1-Bold.woff2 new file mode 100755 index 00000000..59536f46 Binary files /dev/null and b/src/fonts/SharpSansDispNo1-Bold.woff2 differ diff --git a/src/pages/404.js b/src/pages/404.js index 666eca23..49f7e668 100755 --- a/src/pages/404.js +++ b/src/pages/404.js @@ -1,5 +1,5 @@ import React from 'react' -import Layout from '../components/layout' +import Layout from '../components/Layout' const NotFoundPage = () => ( diff --git a/src/pages/index.js b/src/pages/index.js index 333f4ef1..2f55d145 100755 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,8 +1,7 @@ import React from 'react' -import { Link } from 'gatsby' -import Layout from '../components/layout' -import Image from '../components/image' +import Layout from '../components/Layout' +import Image from '../components/Image' const IndexPage = () => ( @@ -10,7 +9,6 @@ const IndexPage = () => (

Welcome to your new Gatsby site.

Now go build something great.

- Go to page 2 ) diff --git a/src/pages/page-2.js b/src/pages/page-2.js deleted file mode 100755 index 568c2b6f..00000000 --- a/src/pages/page-2.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' -import { Link } from 'gatsby' - -import Layout from '../components/layout' - -const SecondPage = () => ( - -

Hi from the second page

-

Welcome to page 2

- Go back to the homepage - -) - -export default SecondPage diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss new file mode 100644 index 00000000..f52b96d4 --- /dev/null +++ b/src/styles/_fonts.scss @@ -0,0 +1,26 @@ +@font-face { + font-family: 'Sharp Sans Display'; + src: url('../fonts/SharpSansDispNo1-Bold.woff2') format('woff2'), + url('../fonts/SharpSansDispNo1-Bold.woff') format('woff'); + font-weight: 600; + font-style: normal; + font-stretch: normal; + } + + @font-face { + font-family: 'Sharp Sans Medium'; + src: url('../fonts/SharpSans-Medium.woff2') format('woff2'), + url('../fonts/SharpSans-Medium.woff') format('woff'); + font-weight: 500; + font-style: normal; + font-stretch: normal; + } + + @font-face { + font-family: 'Sharp Sans Bold'; + src: url('../fonts/SharpSans-Bold.woff2') format('woff2'), + url('../fonts/SharpSans-Bold.woff') format('woff'); + font-weight: 600; + font-style: normal; + font-stretch: normal; + } diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss new file mode 100644 index 00000000..352d4c03 --- /dev/null +++ b/src/styles/_variables.scss @@ -0,0 +1,56 @@ +// Colors +$brand-white: #fff; +$brand-black: #141414; +$brand-pink: #ff4092; +$brand-purple: #7b1173; +$brand-violet: #e000cf; + +$brand-grey: #41474e; +$brand-grey-light: #8b98a9; +$brand-grey-dark: #303030; +$brand-grey-lighter: #e2e2e2; + +$green: #5fb359; +$red: #d80606; +$orange: #b35f36; +$yellow: #eac146; + +$brand-gradient: linear-gradient(to right bottom, $brand-purple, $brand-pink); + +// Fonts +$font-family-base: 'Sharp Sans Medium', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; +$font-family-title: 'Sharp Sans Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; +$font-family-button: 'Sharp Sans Bold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; + +$font-size-root: 15px; +$font-size-base: 1rem; +$font-size-large: 1.25rem; +$font-size-small: .85rem; +$font-size-mini: .65rem; +$font-size-text: $font-size-base; +$font-size-label: $font-size-base; +$font-size-title: 1.4rem; +$font-size-h1: 3.4rem; +$font-size-h2: 2.7rem; +$font-size-h3: 2rem; +$font-size-h4: 1.5rem; +$font-size-h5: 1.125rem; + +$font-weight-base: 500; +$font-weight-bold: 600; + +$line-height: 1.5; + +// Sizes +$spacer: 2rem; +$page-frame: .75rem; + +$break-point--small: 640px; +$break-point--medium: 860px; +$break-point--large: 1140px; +$break-point--huge: 1400px; +$brand-border-width: 1px; + +$border-radius: .2rem; + +$narrowWidth: 35rem; diff --git a/src/styles/global.scss b/src/styles/global.scss new file mode 100644 index 00000000..5a1a9989 --- /dev/null +++ b/src/styles/global.scss @@ -0,0 +1,136 @@ +@import 'variables'; +@import 'fonts'; + +*, +*:before, +*:after { + box-sizing: border-box; +} + +html { + font-size: $font-size-root; +} + +body { + color: $brand-black; + font-size: $font-size-base; + font-family: $font-family-base; + font-weight: $font-weight-base; + line-height: $line-height; + background: $brand-white; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + position: relative; + margin: 0; + + @media screen and (min-width: $break-point--small) { + padding: $page-frame; + } +} + +a { + text-decoration: none; + color: $brand-pink; + transition: .2s ease-out; + + &:hover, + &:focus { + color: darken($brand-pink, 15%); + text-decoration: none; + transform: translate3d(0, -.1rem, 0); + } + + &:active { + color: darken($brand-pink, 15%); + text-decoration: none; + transform: none; + transition: none; + } +} + +p { + margin: 0; + margin-bottom: $spacer / 2; +} + +strong, +.strong { + font-family: $font-family-button; + font-weight: 600; +} + +h1, +h2, +h3, +h4, +h5 { + font-family: $font-family-title; + color: inherit; + line-height: 1.25; + font-weight: 600; +} + +h1 { + font-size: $font-size-h1; +} + +h2 { + font-size: $font-size-h2; +} + +h3 { + font-size: $font-size-h3; +} + +h4 { + font-size: $font-size-h4; +} + +h5 { + font-size: $font-size-h5; +} + +.fade { + &-enter { + opacity: .01; + } + + &-enter-active { + opacity: 1; + transition: opacity 400ms ease-out; + } + + &-exit { + opacity: 1; + } + + &-exit-active { + opacity: .01; + transition: opacity 400ms ease-in; + } +} + +.grow { + &-enter { + opacity: .01; + max-height: 0; + } + + &-enter-active { + opacity: 1; + max-height: 500px; + transition: 200ms ease-out; + } + + &-exit { + opacity: 1; + max-height: 500px; + } + + &-exit-active { + opacity: .01; + max-height: 0; + transition: 200ms ease-in; + } +} diff --git a/src/templates/Doc.jsx b/src/templates/Doc.jsx new file mode 100644 index 00000000..b6770b8d --- /dev/null +++ b/src/templates/Doc.jsx @@ -0,0 +1,40 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { graphql } from 'gatsby' +import Layout from '../components/Layout' + +export default class DocTemplate extends Component { + static propTypes = { + data: PropTypes.object.isRequired, + location: PropTypes.object.isRequired + } + + render() { + const post = this.props.data.markdownRemark + + return ( + +

{post.frontmatter.title}

+
+ + ) + } +} + +export const pageQuery = graphql` + query DocBySlug($slug: String!) { + site { + siteMetadata { + title + } + } + markdownRemark(fields: { slug: { eq: $slug } }) { + id + excerpt + html + frontmatter { + title + } + } + } +`