mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
Merge pull request #5 from oceanprotocol/feature/style-basics
global styling setup
This commit is contained in:
Jernej Pregelj
GitHub
commit
d738648ce5
@ -8,8 +8,6 @@
|
|||||||
[](https://github.com/oceanprotocol/eslint-config-oceanprotocol)
|
[](https://github.com/oceanprotocol/eslint-config-oceanprotocol)
|
||||||
[](https://github.com/bigchaindb/stylelint-config-bigchaindb)
|
[](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
540
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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",
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 31 KiB |
BIN
public/fonts/SharpSans-Bold.woff
Normal file
BIN
public/fonts/SharpSans-Bold.woff
Normal file
Binary file not shown.
BIN
public/fonts/SharpSans-Bold.woff2
Normal file
BIN
public/fonts/SharpSans-Bold.woff2
Normal file
Binary file not shown.
BIN
public/fonts/SharpSans-Extrabold.woff
Normal file
BIN
public/fonts/SharpSans-Extrabold.woff
Normal file
Binary file not shown.
BIN
public/fonts/SharpSans-Extrabold.woff2
Normal file
BIN
public/fonts/SharpSans-Extrabold.woff2
Normal file
Binary file not shown.
BIN
public/fonts/SharpSans-Medium.woff
Normal file
BIN
public/fonts/SharpSans-Medium.woff
Normal file
Binary file not shown.
BIN
public/fonts/SharpSans-Medium.woff2
Normal file
BIN
public/fonts/SharpSans-Medium.woff2
Normal file
Binary file not shown.
BIN
public/fonts/SharpSansDispNo1-Bold.woff
Executable file
BIN
public/fonts/SharpSansDispNo1-Bold.woff
Executable file
Binary file not shown.
BIN
public/fonts/SharpSansDispNo1-Bold.woff2
Executable file
BIN
public/fonts/SharpSansDispNo1-Bold.woff2
Executable file
Binary file not shown.
BIN
public/icons/favicon_128.png
Normal file
BIN
public/icons/favicon_128.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
public/icons/favicon_256.png
Normal file
BIN
public/icons/favicon_256.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
public/icons/favicon_512.png
Normal file
BIN
public/icons/favicon_512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@ -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>
|
||||||
|
|||||||
@ -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
33
src/App.css
@ -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
3
src/App.module.scss
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.app {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
14
src/App.tsx
14
src/App.tsx
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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)
|
||||||
|
|||||||
@ -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,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
10
src/pages/Home.module.scss
Normal 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;
|
||||||
|
}
|
||||||
@ -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
62
src/styles/_variables.scss
Normal 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
341
src/styles/global.scss
Normal 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: ▪ ▪
|
||||||
|
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;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user