mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
merge
This commit is contained in:
Jernej Pregelj
commit
3de13cbae6
@ -8,8 +8,6 @@
|
||||
[](https://github.com/oceanprotocol/eslint-config-oceanprotocol)
|
||||
[](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
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-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 |
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>
|
||||
<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>
|
||||
|
||||
@ -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"
|
||||
}
|
||||
|
||||
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%;
|
||||
}
|
||||
12
src/App.tsx
12
src/App.tsx
@ -1,14 +1,18 @@
|
||||
import React, { Component } from 'react'
|
||||
import './App.css'
|
||||
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={userDefaults}>
|
||||
<Routes />
|
||||
</User.Provider>
|
||||
<div className={styles.app}>
|
||||
<User.Provider value={userDefaults}>
|
||||
<Routes />
|
||||
</User.Provider>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
|
||||
export const userDefaults = {
|
||||
logged: false
|
||||
logged: false
|
||||
}
|
||||
|
||||
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 ReactDOM from 'react-dom'
|
||||
import App from './App'
|
||||
import './index.css'
|
||||
import * as serviceWorker from './serviceWorker'
|
||||
|
||||
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,11 +1,12 @@
|
||||
import React, { Component } from 'react'
|
||||
import styles from './Home.module.scss'
|
||||
|
||||
// retrieve by tag? category?
|
||||
// search input -> redirect to list
|
||||
|
||||
class Home extends Component {
|
||||
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