make global styles work

gatsby-browser.js

@@ -0,0 +1,7 @@
+import wrapPageElementWithStyles from './src/helpers/wrapPageElement'
+export const wrapPageElement = wrapPageElementWithStyles
+
+// IntersectionObserver polyfill for gatsby-image (Safari, IE)
+if (typeof window.IntersectionObserver === 'undefined') {
+  import('intersection-observer')
+}

gatsby-ssr.js

@@ -0,0 +1,2 @@
+import wrapPageElementWithStyles from './src/helpers/wrapPageElement'
+export const wrapPageElement = wrapPageElementWithStyles

package-lock.json

@@ -27259,6 +27259,11 @@
       "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==",
       "dev": true
     },
+    "intersection-observer": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.11.0.tgz",
+      "integrity": "sha512-KZArj2QVnmdud9zTpKf279m2bbGfG+4/kn16UU0NL3pTVl52ZHiJ9IRNSsnn6jaHrL9EGLFM5eWjTx2fz/+zoQ=="
+    },
     "into-stream": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/into-stream/-/into-stream-3.1.0.tgz",

package.json

@@ -46,6 +46,7 @@
     "gatsby-transformer-json": "^2.4.7",
     "gatsby-transformer-remark": "^2.8.20",
     "gatsby-transformer-sharp": "^2.5.7",
+    "intersection-observer": "^0.11.0",
     "is-url-superb": "^4.0.0",
     "numeral": "^2.0.6",
     "react": "^16.13.1",

src/components/Layout.tsx

@@ -5,6 +5,8 @@ import Footer from './organisms/Footer'
 import PageHeader from './molecules/PageHeader'
 import styles from './Layout.module.css'
 import Seo from './atoms/Seo'
+import { Web3Provider, OceanProvider, Config } from '@oceanprotocol/react'
+import { config } from '../config/ocean'
 
 export interface LayoutProps {
   children: ReactNode
@@ -22,28 +24,32 @@ export default function Layout({
   location
 }: LayoutProps): ReactElement {
   return (
-    <div className={styles.app}>
+    <Web3Provider>
-      <Helmet>
+      <OceanProvider config={config as Config}>
-        <link rel="icon" href="/icons/icon-96x96.png" />
+        <div className={styles.app}>
-        <link rel="apple-touch-icon" href="icons/icon-256x256.png" />
+          <Helmet>
-        <meta name="theme-color" content="#ca2935" />
+            <link rel="icon" href="/icons/icon-96x96.png" />
-      </Helmet>
+            <link rel="apple-touch-icon" href="icons/icon-256x256.png" />
+            <meta name="theme-color" content="#ca2935" />
+          </Helmet>
 
-      <Seo
+          <Seo
-        title={title}
+            title={title}
-        description={description}
+            description={description}
-        uri={location.href}
+            uri={location.href}
-        location={location}
+            location={location}
-      />
+          />
 
-      <Header />
+          <Header />
-      <main className={styles.main}>
+          <main className={styles.main}>
-        {title && !noPageHeader && (
+            {title && !noPageHeader && (
-          <PageHeader title={title} description={description} />
+              <PageHeader title={title} description={description} />
-        )}
+            )}
-        {children}
+            {children}
-      </main>
+          </main>
-      <Footer />
+          <Footer />
-    </div>
+        </div>
+      </OceanProvider>
+    </Web3Provider>
   )
 }

src/global/Styles.tsx

@@ -1,5 +1,6 @@
 import React, { ReactElement, ReactNode } from 'react'
 
+import '@oceanprotocol/typographies/css/ocean-typo.css'
 import '../global/styles.css'
 
 export default function Styles({

src/global/_variables.css

@@ -1,22 +1,22 @@
 :root {
-  --brand-grey: #41474e;
-  --brand-grey-light: #8b98a9;
-  --brand-grey-dark: #303030;
-  --brand-grey-lighter: #e2e2e2;
-
   --brand-white: #ffffff;
   --brand-black: #141414;
   --brand-pink: #ff4092;
   --brand-purple: #7b1173;
   --brand-violet: #e000cf;
-  --brand-blue: #11597b;
+
+  --brand-grey-dark: #303030;
+  --brand-grey: #41474e;
+  --brand-grey-light: #8b98a9;
+  --brand-grey-lighter: #e2e2e2;
+  --brand-grey-dimmed: #f7f7f7;
 
   --brand-gradient: linear-gradient(to right bottom, #7b1173, #ff4092);
 
-  --green: #5fb359;
+  --brand-alert-green: #5fb359;
-  --red: #d80606;
+  --brand-alert-red: #d80606;
-  --orange: #b35f36;
+  --brand-alert-orange: #b35f36;
-  --yellow: #eac146;
+  --brand-alert-yellow: #eac146;
 
   /* Buttons */
   --color-primary: #ff4092;

src/global/styles.css

@@ -6,17 +6,15 @@
   box-sizing: border-box;
 }
 
-html,
-body,
-#__next {
-  width: 100%;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-
 html {
   font-size: var(--font-size-root);
+  scroll-behavior: smooth;
+}
+
+@media screen and (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
 }
 
 body {
@@ -55,20 +53,36 @@ h5 {
   color: var(--brand-black);
   line-height: 1.2;
   font-weight: var(--font-weight-bold);
+  margin-top: 0;
+  margin-bottom: var(--spacer);
 }
 
 h1 {
-  font-size: var(--font-size-h1);
-}
-
-h2 {
   font-size: var(--font-size-h2);
 }
 
-h3 {
+h2 {
   font-size: var(--font-size-h3);
 }
 
+h3 {
+  font-size: var(--font-size-h4);
+}
+
+@media (min-width: 30rem) {
+  h1 {
+    font-size: var(--font-size-h1);
+  }
+
+  h2 {
+    font-size: var(--font-size-h2);
+  }
+
+  h3 {
+    font-size: var(--font-size-h3);
+  }
+}
+
 h4 {
   font-size: var(--font-size-h4);
 }
@@ -100,6 +114,11 @@ ul li {
   display: block;
 }
 
+::selection {
+  background: var(--brand-black);
+  color: var(--brand-white);
+}
+
 form,
 fieldset {
   border: 0;
@@ -107,17 +126,4 @@ fieldset {
   margin: 0;
 }
 
-input[type='radio'],
-input[type='checkbox'] {
-  height: var(--checkbox-size);
-  margin: 0 calc(var(--spacer) / 8) 0 0;
-  vertical-align: middle;
-  width: var(--checkbox-size);
-}
-
-input[type='radio']:checked,
-input[type='checkbox']:checked {
-  background: var(--brand-white);
-}
-
 @import '_code.css';

src/helpers/wrapPageElement.tsx

@@ -1,14 +1,8 @@
 import React, { ReactElement } from 'react'
-import { Web3Provider, OceanProvider, Config } from '@oceanprotocol/react'
-import { config } from '../config/ocean'
 import Styles from '../global/Styles'
 
 const wrapPageElement = ({ element }: { element: ReactElement }) => (
-  <Web3Provider>
+  <Styles>{element}</Styles>
-    <OceanProvider config={config as Config}>
-      <Styles>{element}</Styles>
-    </OceanProvider>
-  </Web3Provider>
 )
 
 export default wrapPageElement