oceanprotocol/docs
1
0
Fork 0
mirror of https://github.com/oceanprotocol/docs.git synced 2024-11-26 19:49:26 +01:00
Code Releases Activity

add stylelint, lint & format tasks

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-11-10 15:04:16 +01:00
parent e6224e2d0d
commit 4b1ad4d95e
Signed by: m
GPG Key ID: 606EEEF3C479A91F
14 changed files with 110 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.stylelintrc Normal file
View File

@ -0,0 +1,11 @@
{
"extends": [
"stylelint-config-bigchaindb",
"stylelint-config-css-modules",
"./node_modules/prettier-stylelint/config.js"
],
"syntax": "scss",
"rules": {
"no-descending-specificity": null
}
}

1
README.md
View File

@ -6,6 +6,7 @@
[![Build Status](https://travis-ci.com/oceanprotocol/docs.svg?token=3psqw6c8KMDqfdGQ2x6d&branch=master)](https://travis-ci.com/oceanprotocol/docs) [![Build Status](https://travis-ci.com/oceanprotocol/docs.svg?token=3psqw6c8KMDqfdGQ2x6d&branch=master)](https://travis-ci.com/oceanprotocol/docs)
[![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)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-7b1173.svg?style=flat-square)](https://github.com/prettier/prettier) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-7b1173.svg?style=flat-square)](https://github.com/prettier/prettier)
[![Greenkeeper badge](https://badges.greenkeeper.io/oceanprotocol/docs.svg?token=2757ede2de02f4679c4dfc6597a331a26f2f206fed53bfeb708c64cbe3d5f55f&ts=1541590505792)](https://greenkeeper.io/) [![Greenkeeper badge](https://badges.greenkeeper.io/oceanprotocol/docs.svg?token=2757ede2de02f4679c4dfc6597a331a26f2f206fed53bfeb708c64cbe3d5f55f&ts=1541590505792)](https://greenkeeper.io/)

18
package.json
View File

@ -5,7 +5,7 @@
"author": "Ocean Protocol <devops@oceanprotocol.com>", "author": "Ocean Protocol <devops@oceanprotocol.com>",
"dependencies": { "dependencies": {
"@oceanprotocol/art": "^1.0.2", "@oceanprotocol/art": "^1.0.2",
"gatsby": "^2.0.44", "gatsby": "^2.0.45",
"gatsby-image": "^2.0.20", "gatsby-image": "^2.0.20",
"gatsby-plugin-catch-links": "^2.0.8", "gatsby-plugin-catch-links": "^2.0.8",
"gatsby-plugin-google-analytics": "^2.0.7", "gatsby-plugin-google-analytics": "^2.0.7",
@ -39,15 +39,25 @@
"build": "gatsby build", "build": "gatsby build",
"start": "gatsby develop", "start": "gatsby develop",
"ssr": "npm run build && serve -s public/", "ssr": "npm run build && serve -s public/",
"format": "prettier --write 'src/**/*.{js,jsx}'", "format:js": "prettier --write 'src/**/*.{js,jsx}'",
"test": "eslint --ext .js,.jsx ." "format:css": "prettier-stylelint --write --quiet 'src/**/*.{css,scss}'",
"format": "run-p format:js format:css",
"lint:js": "eslint ./gatsby-*.js && eslint ./src/**/*.{js,jsx}",
"lint:css": "stylelint ./src/**/*.{css,scss}",
"lint": "run-p lint:js lint:css",
"test": "npm run lint"
}, },
"devDependencies": { "devDependencies": {
"eslint": "^5.9.0", "eslint": "^5.9.0",
"eslint-config-oceanprotocol": "^1.3.0", "eslint-config-oceanprotocol": "^1.3.0",
"eslint-config-prettier": "^3.1.0", "eslint-config-prettier": "^3.1.0",
"eslint-plugin-prettier": "^3.0.0", "eslint-plugin-prettier": "^3.0.0",
"prettier": "^1.14.2" "npm-run-all": "^4.1.3",
"prettier": "^1.15.1",
"prettier-stylelint": "^0.4.2",
"stylelint-config-bigchaindb": "^1.2.1",
"stylelint-config-css-modules": "^1.3.0",
"stylelint-config-standard": "^18.2.0"
}, },
"repository": { "repository": {
"type": "git", "type": "git",

3
src/components/DocContent.module.scss
View File

@ -14,7 +14,8 @@
margin-top: $spacer / 2; margin-top: $spacer / 2;
} }
h1, h2 { h1,
h2 {
margin-top: $spacer * $line-height; margin-top: $spacer * $line-height;
margin-bottom: $spacer / $line-height; margin-bottom: $spacer / $line-height;
padding-bottom: $spacer / $line-height; padding-bottom: $spacer / $line-height;

2
src/components/DocFooter.module.scss
View File

@ -28,5 +28,5 @@
} }
.active { .active {
color: $brand-pink !important; color: $brand-pink !important; // stylelint-disable-line declaration-no-important
} }

4
src/components/Header.module.scss
View File

@ -1,7 +1,9 @@
@import 'variables'; @import 'variables';
.header { .header {
background: $brand-black url('@oceanprotocol/art/jellyfish/jellyfish-back@2x.png') no-repeat center -4rem; background: $brand-black
url('@oceanprotocol/art/jellyfish/jellyfish-back@2x.png') no-repeat
center -4rem;
background-size: cover; background-size: cover;
width: 100%; width: 100%;
padding: $spacer / 2 0; padding: $spacer / 2 0;

6
src/components/HeaderHome.module.scss
View File

@ -2,7 +2,9 @@
@import 'animations'; @import 'animations';
.header { .header {
background: $brand-black url('@oceanprotocol/art/jellyfish/jellyfish-back@2x.png') no-repeat center 7rem; background: $brand-black
url('@oceanprotocol/art/jellyfish/jellyfish-back@2x.png') no-repeat
center 7rem;
background-size: cover; background-size: cover;
width: 100%; width: 100%;
padding: $spacer * 2 0; padding: $spacer * 2 0;
@ -46,5 +48,3 @@
font-size: $font-size-large; font-size: $font-size-large;
} }
} }

4
src/components/Repositories/Repository.module.scss
View File

@ -27,7 +27,9 @@
padding: 0; padding: 0;
margin-left: $spacer / $line-height; margin-left: $spacer / $line-height;
&:before { display: none; } &:before {
display: none;
}
} }
a { a {

4
src/components/Sidebar.module.scss
View File

@ -57,7 +57,9 @@
li { li {
display: block; display: block;
&:before { display: none; } &:before {
display: none;
}
} }
} }

9
src/pages/index.module.scss
View File

@ -17,12 +17,13 @@
margin-top: $spacer; margin-top: $spacer;
animation: fadeInUp .6s ease-out backwards; animation: fadeInUp .6s ease-out backwards;
&:before { display: none; } &:before {
display: none;
}
@media (min-width: $break-point--medium) { @media (min-width: $break-point--medium) {
flex: 0 0 31%; flex: 0 0 31%;
} }
animation-delay: .4s; animation-delay: .4s;
&:nth-child(2) { &:nth-child(2) {
@ -39,7 +40,7 @@
flex-wrap: wrap; flex-wrap: wrap;
padding: $spacer $spacer * $line-height; padding: $spacer $spacer * $line-height;
border-radius: $border-radius; border-radius: $border-radius;
box-shadow: rgba($brand-black, .1) 0px 9px 18px; box-shadow: rgba($brand-black, .1) 0 9px 18px;
color: $brand-grey; color: $brand-grey;
background: $brand-white; background: $brand-white;
height: 100%; height: 100%;
@ -47,7 +48,7 @@
&:hover, &:hover,
&:focus { &:focus {
color: $brand-grey; color: $brand-grey;
box-shadow: rgba($brand-black, .1) 0px 12px 20px; box-shadow: rgba($brand-black, .1) 0 12px 20px;
svg { svg {
transform: translate3d(.2rem, 0, 0); transform: translate3d(.2rem, 0, 0);

4
src/styles/_animations.scss
View File

@ -1,6 +1,6 @@
@keyframes fadeInUp { @keyframes fadeInUp {
0% { 0% {
opacity: 0.01; opacity: .01;
transform: translate3d(0, 5rem, 0); transform: translate3d(0, 5rem, 0);
} }
@ -12,7 +12,7 @@
@keyframes fadeIn { @keyframes fadeIn {
0% { 0% {
opacity: 0.01; opacity: .01;
} }
100% { 100% {

16
src/styles/_fonts.scss
View File

@ -1,26 +1,26 @@
@font-face { @font-face {
font-family: 'Sharp Sans Display'; font-family: 'Sharp Sans Display';
src: url('../fonts/SharpSansDispNo1-Bold.woff2') format('woff2'), src: url('../fonts/SharpSansDispNo1-Bold.woff2') format('woff2'),
url('../fonts/SharpSansDispNo1-Bold.woff') format('woff'); url('../fonts/SharpSansDispNo1-Bold.woff') format('woff');
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
} }
@font-face { @font-face {
font-family: 'Sharp Sans Medium'; font-family: 'Sharp Sans Medium';
src: url('../fonts/SharpSans-Medium.woff2') format('woff2'), src: url('../fonts/SharpSans-Medium.woff2') format('woff2'),
url('../fonts/SharpSans-Medium.woff') format('woff'); url('../fonts/SharpSans-Medium.woff') format('woff');
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
} }
@font-face { @font-face {
font-family: 'Sharp Sans Bold'; font-family: 'Sharp Sans Bold';
src: url('../fonts/SharpSans-Bold.woff2') format('woff2'), src: url('../fonts/SharpSans-Bold.woff2') format('woff2'),
url('../fonts/SharpSans-Bold.woff') format('woff'); url('../fonts/SharpSans-Bold.woff') format('woff');
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
font-stretch: normal; font-stretch: normal;
} }

89
src/styles/_variables.scss
View File

@ -1,59 +1,62 @@
// Colors // Colors
$brand-white: #fff; $brand-white: #fff;
$brand-black: #141414; $brand-black: #141414;
$brand-pink: #ff4092; $brand-pink: #ff4092;
$brand-purple: #7b1173; $brand-purple: #7b1173;
$brand-violet: #e000cf; $brand-violet: #e000cf;
$brand-blue: #11597b; $brand-blue: #11597b;
$brand-grey: #41474e; $brand-grey: #41474e;
$brand-grey-light: #8b98a9; $brand-grey-light: #8b98a9;
$brand-grey-dark: #303030; $brand-grey-dark: #303030;
$brand-grey-lighter: #e2e2e2; $brand-grey-lighter: #e2e2e2;
$green: #5fb359; $green: #5fb359;
$red: #d80606; $red: #d80606;
$orange: #b35f36; $orange: #b35f36;
$yellow: #eac146; $yellow: #eac146;
$brand-gradient: linear-gradient(to right bottom, $brand-purple, $brand-pink); $brand-gradient: linear-gradient(to right bottom, $brand-purple, $brand-pink);
// Fonts // Fonts
$font-family-base: 'Sharp Sans Medium', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; $font-family-base: 'Sharp Sans Medium', -apple-system, BlinkMacSystemFont,
$font-family-title: 'Sharp Sans Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; 'Segoe UI', Helvetica, Arial, sans-serif;
$font-family-button: 'Sharp Sans Bold', -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, $font-family-monospace: 'Fira Code', 'Fira Mono', Menlo, Monaco, Consolas,
'Courier New', monospace; 'Courier New', monospace;
$font-size-root: 15px; $font-size-root: 15px;
$font-size-base: 1rem; $font-size-base: 1rem;
$font-size-large: 1.2rem; $font-size-large: 1.2rem;
$font-size-small: .85rem; $font-size-small: .85rem;
$font-size-mini: .65rem; $font-size-mini: .65rem;
$font-size-text: $font-size-base; $font-size-text: $font-size-base;
$font-size-label: $font-size-base; $font-size-label: $font-size-base;
$font-size-title: 1.4rem; $font-size-title: 1.4rem;
$font-size-h1: 3rem; $font-size-h1: 3rem;
$font-size-h2: 1.7rem; $font-size-h2: 1.7rem;
$font-size-h3: 1.4rem; $font-size-h3: 1.4rem;
$font-size-h4: $font-size-large; $font-size-h4: $font-size-large;
$font-size-h5: 1.1rem; $font-size-h5: 1.1rem;
$font-weight-base: 500; $font-weight-base: 500;
$font-weight-bold: 600; $font-weight-bold: 600;
$line-height: 1.6; $line-height: 1.6;
// Sizes // Sizes
$spacer: 2rem; $spacer: 2rem;
$page-frame: .75rem; $page-frame: .75rem;
$break-point--small: 640px; $break-point--small: 640px;
$break-point--medium: 860px; $break-point--medium: 860px;
$break-point--large: 1140px; $break-point--large: 1140px;
$break-point--huge: 1400px; $break-point--huge: 1400px;
$brand-border-width: 1px; $brand-border-width: 1px;
$border-radius: .2rem; $border-radius: .2rem;
$narrowWidth: 35rem; $narrowWidth: 35rem;

14
src/styles/global.scss
View File

@ -1,3 +1,5 @@
// stylelint-disable selector-no-qualifying-type, declaration-no-important, selector-no-vendor-prefix
@import 'variables'; @import 'variables';
@import 'fonts'; @import 'fonts';
@ -59,7 +61,7 @@ p {
ul { ul {
li { li {
&::before { &:before {
content: ' \25AA'; // Black Small Square: ▪ &#9642; content: ' \25AA'; // Black Small Square: ▪ &#9642;
top: -2px; top: -2px;
} }
@ -70,7 +72,7 @@ ol {
counter-reset: ol-counter; counter-reset: ol-counter;
li { li {
&::before { &:before {
content: counter(ol-counter) '.'; content: counter(ol-counter) '.';
counter-increment: ol-counter; counter-increment: ol-counter;
font-family: $font-family-button; font-family: $font-family-button;
@ -78,7 +80,7 @@ ol {
} }
} }
ul li::before { ul li:before {
content: ' \25AA'; content: ' \25AA';
} }
} }
@ -94,7 +96,7 @@ ol {
position: relative; position: relative;
display: block; display: block;
&::before { &:before {
position: absolute; position: absolute;
left: -($spacer / $line-height); left: -($spacer / $line-height);
color: $brand-grey-light; color: $brand-grey-light;
@ -220,11 +222,11 @@ table {
border-bottom: 1px solid $brand-grey-lighter; border-bottom: 1px solid $brand-grey-lighter;
text-align: left; text-align: left;
&[align="center"] { &[align='center'] {
text-align: center; text-align: center;
} }
&[align="right"] { &[align='right'] {
text-align: right; text-align: right;
} }
} }