From 10c34d74aff4ba6efd7e048368fd8da7f209f1a1 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 30 Jun 2020 13:39:48 +0200 Subject: [PATCH] make global styles work --- gatsby-browser.js | 7 ++++ gatsby-ssr.js | 2 ++ package-lock.json | 5 +++ package.json | 1 + src/components/Layout.tsx | 48 ++++++++++++++------------ src/global/Styles.tsx | 1 + src/global/_variables.css | 20 +++++------ src/global/styles.css | 60 ++++++++++++++++++--------------- src/helpers/wrapPageElement.tsx | 8 +---- 9 files changed, 87 insertions(+), 65 deletions(-) create mode 100644 gatsby-browser.js create mode 100644 gatsby-ssr.js diff --git a/gatsby-browser.js b/gatsby-browser.js new file mode 100644 index 000000000..7042cc6e4 --- /dev/null +++ b/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') +} diff --git a/gatsby-ssr.js b/gatsby-ssr.js new file mode 100644 index 000000000..084fcdd7e --- /dev/null +++ b/gatsby-ssr.js @@ -0,0 +1,2 @@ +import wrapPageElementWithStyles from './src/helpers/wrapPageElement' +export const wrapPageElement = wrapPageElementWithStyles diff --git a/package-lock.json b/package-lock.json index 4cc52add0..7be76e031 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 91a1359ef..051bd6f3f 100644 --- a/package.json +++ b/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", diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 5a8edb340..0c7cb7b15 100644 --- a/src/components/Layout.tsx +++ b/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 ( -
- - - - - + + +
+ + + + + - + -
-
- {title && !noPageHeader && ( - - )} - {children} -
-
-
+
+
+ {title && !noPageHeader && ( + + )} + {children} +
+
+
+ + ) } diff --git a/src/global/Styles.tsx b/src/global/Styles.tsx index 83eb2a63e..9440f6929 100644 --- a/src/global/Styles.tsx +++ b/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({ diff --git a/src/global/_variables.css b/src/global/_variables.css index 6237a27df..950aa9307 100644 --- a/src/global/_variables.css +++ b/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; - --red: #d80606; - --orange: #b35f36; - --yellow: #eac146; + --brand-alert-green: #5fb359; + --brand-alert-red: #d80606; + --brand-alert-orange: #b35f36; + --brand-alert-yellow: #eac146; /* Buttons */ --color-primary: #ff4092; diff --git a/src/global/styles.css b/src/global/styles.css index a732a021c..1fc5be14c 100644 --- a/src/global/styles.css +++ b/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'; diff --git a/src/helpers/wrapPageElement.tsx b/src/helpers/wrapPageElement.tsx index 4301c5f4d..843a47f88 100644 --- a/src/helpers/wrapPageElement.tsx +++ b/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 }) => ( - - - {element} - - + {element} ) export default wrapPageElement