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

global styling setup

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

View File

@ -8,8 +8,6 @@
[![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)
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
- [Development](#development)
- [Testing](#testing)
- [Code Style](#code-style)
@ -17,6 +15,8 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
## Development
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
```bash
npm start
```

540
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 31 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

View File

@ -1,33 +1,108 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<!--
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.
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="theme-color" content="#141414" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
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`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
<title>Commons Marketplace</title>
<link
rel="preload"
href="%PUBLIC_URL%/fonts/SharpSansDispNo1-Bold.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<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.
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 create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
--></body>
</html>

View File

@ -1,15 +1,25 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"short_name": "Commons",
"name": "Commons Marketplace",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
"src": "icons/favicon_512.png",
"sizes": "512x512",
"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": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
"theme_color": "#141414",
"background_color": "#141414"
}

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%;
}

View File

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

View File

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

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

View File

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

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

View File

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

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