oceanprotocol/commons
1
0
Fork 0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00
Code Releases Activity

global styling setup

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-01-23 13:03:41 +01:00
parent 623a63f77e
commit ed387b217c
Signed by: m
GPG Key ID: 606EEEF3C479A91F
27 changed files with 987 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -8,8 +8,6 @@
[![js oceanprotocol](https://img.shields.io/badge/js-oceanprotocol-7b1173.svg)](https://github.com/oceanprotocol/eslint-config-oceanprotocol) [![js oceanprotocol](https://img.shields.io/badge/js-oceanprotocol-7b1173.svg)](https://github.com/oceanprotocol/eslint-config-oceanprotocol)
[![css bigchaindb](https://img.shields.io/badge/css-bigchaindb-39BA91.svg)](https://github.com/bigchaindb/stylelint-config-bigchaindb) [![css bigchaindb](https://img.shields.io/badge/css-bigchaindb-39BA91.svg)](https://github.com/bigchaindb/stylelint-config-bigchaindb)
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
- [Development](#development) - [Development](#development)
- [Testing](#testing) - [Testing](#testing)
- [Code Style](#code-style) - [Code Style](#code-style)
@ -17,6 +15,8 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
## Development ## Development
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
```bash ```bash
npm start npm start
``` ```

540
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -27,6 +27,7 @@
"@types/react": "16.7.20", "@types/react": "16.7.20",
"@types/react-dom": "16.0.11", "@types/react-dom": "16.0.11",
"@types/react-router-dom": "^4.3.1", "@types/react-router-dom": "^4.3.1",
"node-sass": "^4.11.0",
"prettier": "^1.16.1", "prettier": "^1.16.1",
"prettier-stylelint": "^0.4.2", "prettier-stylelint": "^0.4.2",
"react-scripts": "2.1.3", "react-scripts": "2.1.3",

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 31 KiB

BIN
public/fonts/SharpSans-Bold.woff Normal file
View File

Binary file not shown.

BIN
public/fonts/SharpSans-Bold.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/SharpSans-Extrabold.woff Normal file
View File

Binary file not shown.

BIN
public/fonts/SharpSans-Extrabold.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/SharpSans-Medium.woff Normal file
View File

Binary file not shown.

BIN
public/fonts/SharpSans-Medium.woff2 Normal file
View File

Binary file not shown.

BIN
public/fonts/SharpSansDispNo1-Bold.woff Executable file
View File

Binary file not shown.

BIN
public/fonts/SharpSansDispNo1-Bold.woff2 Executable file
View File

Binary file not shown.

BIN
public/icons/favicon_128.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
public/icons/favicon_256.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
public/icons/favicon_512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

132
public/index.html
View File

@ -1,33 +1,108 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta <meta
name="viewport" name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no" content="width=device-width, initial-scale=1, shrink-to-fit=no"
/> />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#141414" />
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will <title>Commons Marketplace</title>
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. <link
--> rel="preload"
<title>React App</title> href="%PUBLIC_URL%/fonts/SharpSansDispNo1-Bold.woff2"
</head> as="font"
<body> type="font/woff2"
<noscript>You need to enable JavaScript to run this app.</noscript> crossorigin
<div id="root"></div> />
<!-- <link
rel="preload"
href="%PUBLIC_URL%/fonts/SharpSans-Medium.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="%PUBLIC_URL%/fonts/SharpSans-Bold.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<style>
@font-face {
font-family: 'Sharp Sans Display';
src: url('%PUBLIC_URL%/fonts/SharpSansDispNo1-Bold.woff2')
format('woff2'),
url('%PUBLIC_URL%/fonts/SharpSansDispNo1-Bold.woff')
format('woff');
font-weight: 600;
font-style: normal;
font-stretch: normal;
font-display: swap;
}
@font-face {
font-family: 'Sharp Sans Medium';
src: url('%PUBLIC_URL%/fonts/SharpSans-Medium.woff2')
format('woff2'),
url('%PUBLIC_URL%/fonts/SharpSans-Medium.woff')
format('woff');
font-weight: 500;
font-style: normal;
font-stretch: normal;
font-display: swap;
}
@font-face {
font-family: 'Sharp Sans Bold';
src: url('%PUBLIC_URL%/fonts/SharpSans-Bold.woff2')
format('woff2'),
url('%PUBLIC_URL%/fonts/SharpSans-Bold.woff') format('woff');
font-weight: 600;
font-style: normal;
font-stretch: normal;
font-display: swap;
}
.loader {
display: block;
position: relative;
margin-top: calc(50vh - 15px);
}
.loader:before {
content: '';
box-sizing: border-box;
position: absolute;
top: -80%;
left: 50%;
width: 20px;
height: 20px;
margin-top: -10px;
margin-left: -10px;
border-radius: 50%;
border: 2px solid #7b1173;
border-top-color: #e000cf;
animation: spinner 0.6s linear infinite;
}
@keyframes spinner {
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"><span class="loader"></span></div>
<!--
This HTML file is a template. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. If you open it directly in the browser, you will see an empty page.
@ -36,6 +111,5 @@
To begin the development, run `npm start` or `yarn start`. To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> --></body>
</body>
</html> </html>

24
public/manifest.json
View File

@ -1,15 +1,25 @@
{ {
"short_name": "React App", "short_name": "Commons",
"name": "Create React App Sample", "name": "Commons Marketplace",
"icons": [ "icons": [
{ {
"src": "favicon.ico", "src": "icons/favicon_512.png",
"sizes": "64x64 32x32 24x24 16x16", "sizes": "512x512",
"type": "image/x-icon" "type": "image/png"
},
{
"src": "icons/favicon_256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "icons/favicon_128.png",
"sizes": "128x128",
"type": "image/png"
} }
], ],
"start_url": ".", "start_url": ".",
"display": "standalone", "display": "standalone",
"theme_color": "#000000", "theme_color": "#141414",
"background_color": "#ffffff" "background_color": "#141414"
} }

33
src/App.css
View File

@ -1,33 +0,0 @@
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: #fff;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

3
src/App.module.scss Normal file
View File

@ -0,0 +1,3 @@
.app {
height: 100%;
}

14
src/App.tsx
View File

@ -1,14 +1,18 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import './App.css' import styles from './App.module.scss'
import { User, userDefults } from './context/User' import { User, userDefaults } from './context/User'
import './styles/global.scss'
import Routes from './Routes' import Routes from './Routes'
class App extends Component { class App extends Component {
public render() { public render() {
return ( return (
<User.Provider value={userDefults}> <div className={styles.app}>
<Routes /> <User.Provider value={userDefaults}>
</User.Provider> <Routes />
</User.Provider>
</div>
) )
} }
} }

4
src/context/User.ts
View File

@ -1,7 +1,7 @@
import React from 'react' import React from 'react'
export const userDefults = { export const userDefaults = {
logged: false logged: false
} }
export const User = React.createContext(userDefults) export const User = React.createContext(userDefaults)

14
src/index.css
View File

@ -1,14 +0,0 @@
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

1
src/index.tsx
View File

@ -1,7 +1,6 @@
import React from 'react' import React from 'react'
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import App from './App' import App from './App'
import './index.css'
import * as serviceWorker from './serviceWorker' import * as serviceWorker from './serviceWorker'
ReactDOM.render(<App />, document.getElementById('root')) ReactDOM.render(<App />, document.getElementById('root'))

10
src/pages/Home.module.scss Normal file
View File

@ -0,0 +1,10 @@
@import '../styles/variables';
.home {
background: $brand-black;
color: $brand-white;
min-height: calc(100vh - #{$page-frame} * 2);
display: flex;
align-items: center;
justify-content: center;
}

3
src/pages/Home.tsx
View File

@ -1,8 +1,9 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import styles from './Home.module.scss'
class Home extends Component { class Home extends Component {
public render() { public render() {
return <div>Home</div> return <div className={styles.home}>Home</div>
} }
} }

62
src/styles/_variables.scss Normal file
View File

@ -0,0 +1,62 @@
// Colors
$brand-white: #fff;
$brand-black: #141414;
$brand-pink: #ff4092;
$brand-purple: #7b1173;
$brand-violet: #e000cf;
$brand-blue: #11597b;
$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-family-monospace: 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas,
'Courier New', monospace;
$font-size-root: 15px;
$font-size-base: 1rem;
$font-size-large: 1.2rem;
$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: 3rem;
$font-size-h2: 1.7rem;
$font-size-h3: 1.4rem;
$font-size-h4: $font-size-large;
$font-size-h5: 1.1rem;
$font-weight-base: 500;
$font-weight-bold: 600;
$line-height: 1.6;
// 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;

341
src/styles/global.scss Normal file
View File

@ -0,0 +1,341 @@
// stylelint-disable selector-no-qualifying-type, declaration-no-important, selector-no-vendor-prefix
@import 'variables';
*,
*:before,
*:after {
box-sizing: border-box;
}
/* stylelint-disable selector-max-id */
html,
body,
#root {
height: 100%;
}
/* stylelint-enable selector-max-id */
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: darken($brand-white, 1%);
-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 / $line-height;
}
// Lists
/////////////////////////////////////
ul {
li {
&:before {
content: ' \25AA'; // Black Small Square: ▪ &#9642;
top: -2px;
}
}
}
ol {
counter-reset: ol-counter;
li {
&:before {
content: counter(ol-counter) '.';
counter-increment: ol-counter;
font-family: $font-family-button;
top: -1px;
}
}
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);
color: $brand-grey-light;
user-select: none;
}
+ li {
margin-top: $spacer / 8;
}
ul,
ol,
p {
margin-bottom: 0;
margin-top: $spacer / 8;
}
}
}
// Inline typography
/////////////////////////////////////
b,
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,
h4,
h5 {
font-family: $font-family-title;
color: inherit;
line-height: 1.2;
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;
}
// Responsive Media
/////////////////////////////////////
figure,
img,
svg,
video,
audio,
embed,
canvas,
picture {
max-width: 100%;
height: auto;
margin: 0 auto;
display: block;
}
hr {
margin: $spacer 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;
color: lighten($brand-grey, 15%);
}
blockquote {
margin: 0 0 $spacer;
padding-left: $spacer / 2;
border-left: .2rem solid $brand-grey-lighter;
@media screen and (min-width: $break-point--small) {
padding-left: $spacer / $line-height;
}
}
// Tables
/////////////////////////////////////
table {
width: 100%;
margin-bottom: $spacer * $line-height;
border-collapse: collapse;
display: block;
// make 'em scrollable
overflow: auto;
-webkit-overflow-scrolling: touch;
th,
td {
border: 0;
margin: 0;
padding: $spacer / 2;
border-bottom: 1px solid $brand-grey-lighter;
text-align: left;
font-size: 90%;
&[align='center'] {
text-align: center;
}
&[align='right'] {
text-align: right;
}
}
th {
font-family: $font-family-button;
font-weight: 600;
}
}
// Code
/////////////////////////////////////
code,
kbd,
pre,
samp {
// lots of !important to overwrite prims.js theme
font-family: $font-family-monospace !important;
font-size: $font-size-small !important;
border-radius: $border-radius !important;
text-shadow: none !important;
h1 &,
h2 &,
h3 &,
h4 &,
h5 & {
font-size: inherit !important;
}
}
:not(pre) > code {
background: darken($brand-white, 5%) !important;
color: $brand-grey-dark !important;
display: inline-block;
padding-left: .3rem !important;
padding-right: .3rem !important;
}
pre {
display: block;
margin-bottom: $spacer !important;
padding: 0 !important;
background: $brand-black !important;
// make 'em scrollable
overflow: auto;
-webkit-overflow-scrolling: touch;
code {
padding: $spacer;
white-space: pre;
display: block;
color: $brand-grey-lighter !important;
overflow-wrap: normal;
word-wrap: normal;
word-break: normal;
overflow: auto;
}
}
// Selection
/////////////////////////////////////
::-moz-selection {
background: $brand-grey-light;
color: #fff;
}
::selection {
background: $brand-grey-light;
color: #fff;
}
// Gatsby specific
/////////////////////////////////////
.anchor {
margin-top: .6rem;
}