oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-12-02 05:57:29 +01:00
Code Releases Activity

make global styles work

Browse Source
This commit is contained in:
Matthias Kretschmann 2020-06-30 13:39:48 +02:00
parent 3e96a8d36b
commit 10c34d74af
Signed by: m
GPG Key ID: 606EEEF3C479A91F
9 changed files with 87 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
gatsby-browser.js Normal file
View File

@ -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')
}

2
gatsby-ssr.js Normal file
View File

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

5
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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",

48
src/components/Layout.tsx
View File

@ -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}>
<Helmet>
<link rel="icon" href="/icons/icon-96x96.png" />
<link rel="apple-touch-icon" href="icons/icon-256x256.png" />
<meta name="theme-color" content="#ca2935" />
</Helmet>
<Web3Provider>
<OceanProvider config={config as Config}>
<div className={styles.app}>
<Helmet>
<link rel="icon" href="/icons/icon-96x96.png" />
<link rel="apple-touch-icon" href="icons/icon-256x256.png" />
<meta name="theme-color" content="#ca2935" />
</Helmet>
<Seo
title={title}
description={description}
uri={location.href}
location={location}
/>
<Seo
title={title}
description={description}
uri={location.href}
location={location}
/>
<Header />
<main className={styles.main}>
{title && !noPageHeader && (
<PageHeader title={title} description={description} />
)}
{children}
</main>
<Footer />
</div>
<Header />
<main className={styles.main}>
{title && !noPageHeader && (
<PageHeader title={title} description={description} />
)}
{children}
</main>
<Footer />
</div>
</OceanProvider>
</Web3Provider>
)
}

1
src/global/Styles.tsx
View File

@ -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({

20
src/global/_variables.css
View File

@ -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;

60
src/global/styles.css
View File

@ -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';

8
src/helpers/wrapPageElement.tsx
View File

@ -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>
<OceanProvider config={config as Config}>
<Styles>{element}</Styles>
</OceanProvider>
</Web3Provider>
<Styles>{element}</Styles>
)
export default wrapPageElement