chore: add stylesheet linting (#4116)
This commit is contained in:
Erick Zhao
GitHub
Родитель
efcbaff8b3
Коммит
6772309b3e
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"extends": "stylelint-config-standard",
|
||||
"plugins": [
|
||||
"stylelint-scss"
|
||||
],
|
||||
"rules": {
|
||||
"at-rule-no-unknown": null,
|
||||
"declaration-block-single-line-max-declarations": null,
|
||||
"scss/at-rule-no-unknown": true
|
||||
}
|
||||
}
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
27
package.json
27
package.json
|
|
@ -18,12 +18,15 @@
|
|||
"precompile-assets": "cross-env NODE_ENV=production node script/precompile-assets.js",
|
||||
"linkschecker": "NODE_PATH=. NODE_ENV=test node scripts/links-checker.js",
|
||||
"cypress": "cypress run",
|
||||
"lint": "eslint . --fix",
|
||||
"lint": "npm run lint:js && npm run lint:style",
|
||||
"lint:js": "eslint . --fix",
|
||||
"lint:style": "stylelint 'public/styles/*.scss' --fix",
|
||||
"heroku-postbuild": "npm run precompile-assets"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-push": "check-for-leaks"
|
||||
"pre-push": "check-for-leaks",
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
@ -93,16 +96,20 @@
|
|||
"check-for-leaks": "^1.2.1",
|
||||
"cheerio": "^1.0.0-rc.3",
|
||||
"cypress": "^4.8.0",
|
||||
"husky": "^4.2.5",
|
||||
"mocha": "^8.0.1",
|
||||
"nock": "^12.0.3",
|
||||
"nodemon": "^2.0.4",
|
||||
"node-sass": "^4.14.1",
|
||||
"simplecrawler": "^1.1.9",
|
||||
"eslint": "^7.2.0",
|
||||
"eslint-config-prettier": "^6.11.0",
|
||||
"eslint-plugin-prettier": "^3.1.4",
|
||||
"husky": "^4.2.5",
|
||||
"lint-staged": "^10.2.11",
|
||||
"mocha": "^8.0.1",
|
||||
"nock": "^12.0.3",
|
||||
"node-sass": "^4.14.1",
|
||||
"nodemon": "^2.0.4",
|
||||
"prettier": "^2.0.5",
|
||||
"simplecrawler": "^1.1.9",
|
||||
"stylelint": "^13.6.1",
|
||||
"stylelint-config-standard": "^20.0.0",
|
||||
"stylelint-scss": "^3.17.2",
|
||||
"supertest": "^4.0.2",
|
||||
"supertest-session": "^4.0.0",
|
||||
"uglify-js": "^3.8.1",
|
||||
|
|
@ -111,5 +118,9 @@
|
|||
},
|
||||
"engines": {
|
||||
"node": ">=12 <14"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.js": "npm run lint:js",
|
||||
"*.scss": "npm run lint:style"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
}
|
||||
|
||||
.app-description {
|
||||
margin: .3em 0 0 0;
|
||||
margin: 0.3em 0 0 0;
|
||||
font-size: 1.2em;
|
||||
font-weight: 300;
|
||||
line-height: 1.4;
|
||||
|
|
@ -81,16 +81,10 @@
|
|||
padding: 16px 0;
|
||||
border-top: 1px darken($main-bg-color-shade, 8%) solid;
|
||||
width: 100%;
|
||||
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.app-keyword {
|
||||
white-space: normal;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&-downloads {
|
||||
overflow: auto;
|
||||
white-space: normal;
|
||||
|
|
@ -107,6 +101,7 @@
|
|||
&:nth-child(1) {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
border-top: 1px darken($main-bg-color-shade, 8%) solid;
|
||||
|
||||
|
|
@ -128,6 +123,7 @@
|
|||
|
||||
.app-boxes {
|
||||
flex: 1;
|
||||
|
||||
@include breakpoint(md) {
|
||||
max-width: calc(100% - 300px);
|
||||
}
|
||||
|
|
@ -149,6 +145,9 @@
|
|||
font-size: 0.85em;
|
||||
border-radius: 3px;
|
||||
background-color: $main-bg-color-shade;
|
||||
white-space: normal;
|
||||
overflow: auto;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: darken($main-bg-color-shade, 4%);
|
||||
|
|
@ -156,15 +155,15 @@
|
|||
}
|
||||
|
||||
.app-tagname {
|
||||
margin-left: .5em;
|
||||
margin-left: 0.5em;
|
||||
color: $main-color-subtle;
|
||||
}
|
||||
|
||||
.app-download {
|
||||
display: block;
|
||||
padding: 0.4em .8em;
|
||||
padding: 0.4em 0.8em;
|
||||
border-radius: 3px;
|
||||
margin: 0 .5em .5em 0;
|
||||
margin: 0 0.5em 0.5em 0;
|
||||
line-height: 1.7;
|
||||
border: none;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -214,6 +213,7 @@
|
|||
width: 196px;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
|
||||
/* Scroll bug in Chrome */
|
||||
height: 126px;
|
||||
|
||||
|
|
@ -252,6 +252,7 @@
|
|||
|
||||
.invisible {
|
||||
opacity: 0;
|
||||
|
||||
@media (max-width: 543px) {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -293,17 +294,21 @@
|
|||
.container-narrow {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
|
||||
@include breakpoint(md) { // return normal value
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.row { // default is -15px
|
||||
margin-right: -12px; // work with .page-section { padding: 12px }
|
||||
margin-left: -12px;
|
||||
}
|
||||
|
||||
.mobile-hidden {
|
||||
display: none !important;
|
||||
|
||||
@include breakpoint(md) {
|
||||
display: block !important;
|
||||
}
|
||||
|
|
@ -313,8 +318,8 @@
|
|||
background-color: #f1f8ff;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
margin: 0 .5em .5em 0;
|
||||
padding: .3em .9em;
|
||||
margin: 0 0.5em 0.5em 0;
|
||||
padding: 0.3em 0.9em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
@ -357,7 +362,6 @@ $app-list-icon-size: 48px;
|
|||
|
||||
.listed-app > a:hover,
|
||||
.listed-app > a:focus {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
border-color: $main-border-color;
|
||||
background-color: $main-bg-color-shade;
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ body {
|
|||
min-height: 100vh;
|
||||
background-color: $main-bg-color;
|
||||
font-size: 14px;
|
||||
|
||||
@include breakpoint(sm) {
|
||||
font-size: $body-font-size;
|
||||
}
|
||||
|
|
@ -28,7 +29,12 @@ a {
|
|||
color: $main-link-color; // override Primer
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
a {
|
||||
color: $main-color; // override Primer
|
||||
}
|
||||
|
|
@ -38,6 +44,7 @@ hr {
|
|||
border-color: $border-color; // override Primer
|
||||
margin-left: $spacer6 !important;
|
||||
margin-right: $spacer6 !important;
|
||||
|
||||
@include breakpoint(md) {
|
||||
margin-left: $spacer8 !important;
|
||||
margin-right: $spacer8 !important;
|
||||
|
|
@ -66,16 +73,12 @@ p:last-child {
|
|||
.text-center-lg { @include breakpoint(lg) { text-align: center !important; } }
|
||||
|
||||
h1 { -webkit-font-smoothing: antialiased; }
|
||||
h2 { font-weight: 300; -webkit-font-smoothing: antialiased; }
|
||||
h2 { font-weight: 300; -webkit-font-smoothing: antialiased; margin-top: 0; }
|
||||
h3 { font-weight: 400; -webkit-font-smoothing: antialiased; }
|
||||
h4 { font-weight: 500; }
|
||||
h5 { font-weight: 700; }
|
||||
h6 { font-weight: 700; }
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Fade in lazily loaded images; see /scripts/lazy-load-images.js
|
||||
img {
|
||||
opacity: 1;
|
||||
|
|
@ -95,19 +98,43 @@ img[data-src] {
|
|||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
|
||||
// add top margin
|
||||
// to make it easier to see headers within a long wall of text
|
||||
.strong-headers {
|
||||
h1 { font-weight: 300 !important; -webkit-font-smoothing: initial !important; }
|
||||
h2 { margin: 1.75em 0 1em !important; font-size: 32px !important; font-weight: 300 !important; -webkit-font-smoothing: initial !important; border-bottom: $border !important; }
|
||||
h3 { margin: 2em 0 0.75em !important; font-size: 26px !important; font-weight: 300 !important; -webkit-font-smoothing: initial !important; }
|
||||
h4 { margin-top: 1.5em !important; font-weight: 300 !important; }
|
||||
h5 { margin-top: 1.25em !important; }
|
||||
h6 { margin-top: 1.125em !important; }
|
||||
h1 {
|
||||
font-weight: 300 !important;
|
||||
-webkit-font-smoothing: initial !important;
|
||||
|
||||
&.strong-headers hr { margin: $spacer6 0; }
|
||||
h1 { @include breakpoint(lg) { font-size: $body-font-size * 2.75; } }
|
||||
@include breakpoint(lg) { font-size: $body-font-size * 2.75; }
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 1.75em 0 1em !important;
|
||||
font-size: 32px !important;
|
||||
font-weight: 300 !important;
|
||||
-webkit-font-smoothing: initial !important;
|
||||
border-bottom: $border !important;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 2em 0 0.75em !important;
|
||||
font-size: 26px !important;
|
||||
font-weight: 300 !important;
|
||||
-webkit-font-smoothing: initial !important;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-top: 1.5em !important;
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-top: 1.25em !important;
|
||||
}
|
||||
|
||||
h6 {
|
||||
margin-top: 1.125em !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive video
|
||||
|
|
@ -144,8 +171,8 @@ kbd {
|
|||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 11px;
|
||||
line-height: 1.4;
|
||||
margin:0 .1em;
|
||||
padding:.1em .6em;
|
||||
margin: 0 0.1em;
|
||||
padding: 0.1em 0.6em;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
.blog-index-link {
|
||||
color: $main-color-strong !important;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none !important;
|
||||
color: $main-link-color !important;
|
||||
|
|
@ -31,7 +32,6 @@
|
|||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
|
||||
// Post
|
||||
|
||||
.blog-post {
|
||||
|
|
@ -63,6 +63,7 @@
|
|||
|
||||
p {
|
||||
line-height: 1.7 !important;
|
||||
|
||||
a {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
|
@ -82,7 +83,6 @@
|
|||
margin-top: 20px !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 2em 0;
|
||||
|
|
@ -93,7 +93,9 @@ figcaption {
|
|||
padding: 10px;
|
||||
font-size: 1em;
|
||||
color: $main-color;
|
||||
|
||||
a {
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
.docs-version {
|
||||
display: inline-block;
|
||||
padding: 0 .4em;
|
||||
padding: 0 0.4em;
|
||||
margin-left: 10px;
|
||||
vertical-align: middle;
|
||||
font-size: $body-font-size * 0.95;
|
||||
|
|
@ -23,10 +23,12 @@
|
|||
margin: 0;
|
||||
color: $main-color-subtle !important;
|
||||
font-weight: 300;
|
||||
|
||||
a {
|
||||
color: $main-color;
|
||||
}
|
||||
}
|
||||
|
||||
.docs-breadcrumbs-divider {
|
||||
color: $main-color-subtle;
|
||||
}
|
||||
|
|
@ -69,6 +71,20 @@
|
|||
|
||||
@include breakpoint(md) { font-size: $h3-size !important; }
|
||||
}
|
||||
|
||||
.sub-section[data-lang='en-US'] .en-toggle h5 {
|
||||
color: $main-link-color !important;
|
||||
}
|
||||
|
||||
.sub-section:not([data-lang='en-US']) {
|
||||
.en-toggle h5 {
|
||||
color: $main-bg-color !important;
|
||||
}
|
||||
|
||||
&:hover .en-toggle h5 {
|
||||
color: $main-border-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.docs-heading {
|
||||
|
|
@ -89,9 +105,10 @@
|
|||
|
||||
.header-link .octicon {
|
||||
color: $main-color-subtle !important;
|
||||
margin-left: .5em !important;
|
||||
margin-left: 0.5em !important;
|
||||
vertical-align: middle !important;
|
||||
visibility: hidden !important;
|
||||
|
||||
:hover > & {
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
|
@ -104,6 +121,7 @@
|
|||
text-align: center;
|
||||
color: $main-color-strong;
|
||||
background-color: darken($main-bg-color-shade, 8%);
|
||||
|
||||
@include breakpoint(md) {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
|
@ -111,38 +129,24 @@
|
|||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.docs-tag {
|
||||
display: inline-block;
|
||||
padding: .4em .8em;
|
||||
padding: 0.4em 0.8em;
|
||||
margin-bottom: 0;
|
||||
font-size: .86em;
|
||||
font-size: 0.86em;
|
||||
font-weight: 500;
|
||||
|
||||
@include breakpoint(md) {
|
||||
background-color: darken($main-bg-color-shade, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
// platform label, e.g. [OS X]
|
||||
.docs h3 code > em,
|
||||
.docs h3 > em,
|
||||
.docs h4 code > em,
|
||||
.docs h4 > em,
|
||||
.docs .platform-label {
|
||||
padding: .1em .4em !important;
|
||||
vertical-align: middle !important;
|
||||
font-size: .66em !important;
|
||||
font-weight: 300 !important;
|
||||
font-style: normal !important;
|
||||
color: $main-bg-color !important;
|
||||
border-radius: $border-radius !important;
|
||||
background-color: $main-color-subtle !important;
|
||||
}
|
||||
|
||||
// process label, e.g. Main process
|
||||
.docs h1 em {
|
||||
padding: .1em .4em;
|
||||
padding: 0.1em 0.4em;
|
||||
vertical-align: middle;
|
||||
font-size: .4em;
|
||||
font-size: 0.4em;
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
font-style: normal;
|
||||
|
|
@ -151,17 +155,29 @@
|
|||
background-color: $main-color-subtle;
|
||||
}
|
||||
|
||||
// platform label, e.g. [OS X]
|
||||
.docs h3 > em,
|
||||
.docs h4 > em,
|
||||
.docs h3 code > em,
|
||||
.docs h4 code > em,
|
||||
.docs .platform-label {
|
||||
padding: 0.1em 0.4em !important;
|
||||
vertical-align: middle !important;
|
||||
font-size: 0.66em !important;
|
||||
font-weight: 300 !important;
|
||||
font-style: normal !important;
|
||||
color: $main-bg-color !important;
|
||||
border-radius: $border-radius !important;
|
||||
background-color: $main-color-subtle !important;
|
||||
}
|
||||
|
||||
.docs table {
|
||||
th {
|
||||
text-align: left;
|
||||
padding: $spacer2;
|
||||
}
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.docs p a,
|
||||
.docs li a {
|
||||
text-decoration: underline;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.doc-actions {
|
||||
|
|
@ -170,19 +186,9 @@
|
|||
}
|
||||
}
|
||||
|
||||
.docs {
|
||||
.sub-section[data-lang='en-US'] .en-toggle h5 {
|
||||
color: $main-link-color !important;
|
||||
}
|
||||
|
||||
.sub-section:not([data-lang='en-US']) {
|
||||
.en-toggle h5 {
|
||||
color: $main-bg-color !important;
|
||||
}
|
||||
&:hover .en-toggle h5 {
|
||||
color: $main-border-color !important;
|
||||
}
|
||||
}
|
||||
.docs p a,
|
||||
.docs li a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.docs-container-xl {
|
||||
|
|
@ -211,6 +217,11 @@
|
|||
}
|
||||
|
||||
.docs-guides-readme {
|
||||
li {
|
||||
break-inside: avoid;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
> ul {
|
||||
margin-left: 0;
|
||||
|
||||
|
|
@ -219,16 +230,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
li {
|
||||
break-inside: avoid;
|
||||
margin-bottom: 3px;
|
||||
|
||||
> p {
|
||||
margin-bottom: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide various elements we only need on GitHub
|
||||
> h2,
|
||||
> h3,
|
||||
|
|
|
|||
|
|
@ -5,29 +5,31 @@
|
|||
margin: 0 auto;
|
||||
backface-visibility: hidden;
|
||||
max-width: 900px;
|
||||
|
||||
@include breakpoint(xl) { max-width: 100%; }
|
||||
|
||||
animation: hero-animation 1s forwards;
|
||||
}
|
||||
|
||||
@keyframes hero-animation {
|
||||
0% { opacity: 0; transform: scale(.96); }
|
||||
0% { opacity: 0; transform: scale(0.96); }
|
||||
100% { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
|
||||
// Electron Icon
|
||||
|
||||
$hero-icon-delay: .6s;
|
||||
$hero-icon-delay-diff: .1s;
|
||||
$hero-icon-delay: 0.6s;
|
||||
$hero-icon-delay-diff: 0.1s;
|
||||
$hero-icon-duration: 1s;
|
||||
$hero-icon-all-delay: 9 * $hero-icon-delay-diff + $hero-icon-delay;
|
||||
|
||||
|
||||
.hero-icon {
|
||||
transform-origin: 50% 50%;
|
||||
stroke: $jumbo-color-strong;
|
||||
stroke-width: 5;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
.hero-icon.dot {
|
||||
fill: $jumbo-color-strong;
|
||||
stroke: none;
|
||||
|
|
@ -37,6 +39,7 @@ $hero-icon-all-delay: 9 * $hero-icon-delay-diff + $hero-icon-delay;
|
|||
stroke-dasharray: 170;
|
||||
stroke-dashoffset: 170;
|
||||
}
|
||||
|
||||
.hero-icon--circle {
|
||||
stroke-dasharray: 70;
|
||||
stroke-dashoffset: 70;
|
||||
|
|
@ -46,7 +49,8 @@ $hero-icon-all-delay: 9 * $hero-icon-delay-diff + $hero-icon-delay;
|
|||
.hero-icon-#{$i} {
|
||||
$_duration: $hero-icon-duration;
|
||||
$_delay: $hero-icon-delay + ($hero-icon-delay-diff * $i);
|
||||
animation: hero-icon-animation $_duration $_delay cubic-bezier(.05, .35, .20, 1) forwards;
|
||||
|
||||
animation: hero-icon-animation $_duration $_delay cubic-bezier(0.05, 0.35, 0.2, 1) forwards;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -54,7 +58,6 @@ $hero-icon-all-delay: 9 * $hero-icon-delay-diff + $hero-icon-delay;
|
|||
100% { stroke-dashoffset: 0; }
|
||||
}
|
||||
|
||||
|
||||
// Apps ----------------
|
||||
|
||||
.hero-app {
|
||||
|
|
@ -65,18 +68,19 @@ $hero-icon-all-delay: 9 * $hero-icon-delay-diff + $hero-icon-delay;
|
|||
// Ripple effect
|
||||
$hero-app-delay: $hero-icon-all-delay;
|
||||
$hero-app-delay-diff: 0.04s;
|
||||
$hero-app-duration: .8s;
|
||||
$hero-app-duration: 0.8s;
|
||||
$hero-app-opacity: 0.1;
|
||||
|
||||
@keyframes hero-app-animate-left {
|
||||
0% { transform: scale(1) translateX(30px); opacity: $hero-app-opacity; animation-timing-function: cubic-bezier(.3,.1,.9,.5); }
|
||||
20% { transform: scale(1.1) translateX(20px); animation-timing-function: cubic-bezier(.1,.4,.2,1); }
|
||||
100% { transform: scale(1) translateX( 0px); opacity: 1; }
|
||||
0% { transform: scale(1) translateX(30px); opacity: $hero-app-opacity; animation-timing-function: cubic-bezier(0.3, 0.1, 0.9, 0.5); }
|
||||
20% { transform: scale(1.1) translateX(20px); animation-timing-function: cubic-bezier(0.1, 0.4, 0.2, 1); }
|
||||
100% { transform: scale(1) translateX(0); opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes hero-app-animate-right {
|
||||
0% { transform: scale(1) translateX(-30px); opacity: $hero-app-opacity; animation-timing-function: cubic-bezier(.3,.1,.9,.5); }
|
||||
20% { transform: scale(1.1) translateX(-20px); animation-timing-function: cubic-bezier(.1,.4,.2,1); }
|
||||
100% { transform: scale(1) translateX( 0px); opacity: 1; }
|
||||
0% { transform: scale(1) translateX(-30px); opacity: $hero-app-opacity; animation-timing-function: cubic-bezier(0.3, 0.1, 0.9, 0.5); }
|
||||
20% { transform: scale(1.1) translateX(-20px); animation-timing-function: cubic-bezier(0.1, 0.4, 0.2, 1); }
|
||||
100% { transform: scale(1) translateX(0); opacity: 1; }
|
||||
}
|
||||
|
||||
// Colorize and animate
|
||||
|
|
@ -85,9 +89,12 @@ $hero-app-opacity: 0.1;
|
|||
fill: mix($jumbo-color-subtle, $jumbo-bg-color, 80% - $i * 4%);
|
||||
|
||||
$_delay: $hero-app-delay + ($hero-app-delay-diff * $i);
|
||||
|
||||
@if $i % 2 == 0 {
|
||||
animation: hero-app-animate-left $hero-app-duration $_delay both;
|
||||
} @else {
|
||||
}
|
||||
|
||||
@else {
|
||||
animation: hero-app-animate-right $hero-app-duration $_delay both;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@
|
|||
.jumbotron.jumbotron-home {
|
||||
// Reduce padding because the hero has some extra padding for the animation.
|
||||
padding: $spacer2 $spacer3 $spacer6 $spacer3;
|
||||
|
||||
@include breakpoint(md) { padding: $spacer4 $spacer3 $spacer8 $spacer3; }
|
||||
|
||||
@include breakpoint(xl) { padding: $spacer6 0 $spacer6 * 2 0; }
|
||||
}
|
||||
|
||||
|
|
@ -38,7 +40,6 @@ a.featured-app-list-item {
|
|||
background-color: #e4e4e4;
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
display: inline-block;
|
||||
transition: background-color 200ms ease-in-out;
|
||||
position: relative;
|
||||
min-width: 200px;
|
||||
|
|
@ -93,6 +94,7 @@ a.featured-app-list-item {
|
|||
h4 {
|
||||
max-width: 100%;
|
||||
justify-self: flex-end;
|
||||
|
||||
/* Turn it into a h5 */
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
|
|
@ -114,9 +116,11 @@ a.featured-app-list-item {
|
|||
color: $jumbo-color-strong;
|
||||
background-color: $jumbo-bg-color;
|
||||
border-color: darken($jumbo-bg-color, 12%);
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.c1.c1 {
|
||||
color: mix($jumbo-color-strong, $jumbo-bg-color, 60%);
|
||||
}
|
||||
|
|
@ -126,7 +130,7 @@ a.featured-app-list-item {
|
|||
border: 2px solid $main-border-color;
|
||||
border-top-width: 20px;
|
||||
border-radius: 4px;
|
||||
background-color: #FAFAFA;
|
||||
background-color: #fafafa;
|
||||
box-shadow: 0 25px 30px -18px rgba(0, 0, 0, 0.28);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -65,7 +65,8 @@
|
|||
color: white;
|
||||
}
|
||||
|
||||
.kb-shortcut th, .kb-shortcut td {
|
||||
.kb-shortcut th,
|
||||
.kb-shortcut td {
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
progress {
|
||||
-webkit-appearance: none;
|
||||
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@
|
|||
|
||||
.releases-tag {
|
||||
display: inline-block;
|
||||
margin: .3em .1em;
|
||||
padding: .1em .4em;
|
||||
font-size: .86em;
|
||||
margin: 0.3em 0.1em;
|
||||
padding: 0.1em 0.4em;
|
||||
font-size: 0.86em;
|
||||
color: $main-color-subtle;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
|
|
@ -31,7 +31,6 @@
|
|||
font-size: 21px;
|
||||
// Remove border radius for active element.
|
||||
border-radius: 0;
|
||||
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 12px 15px;
|
||||
|
|
@ -89,7 +88,7 @@
|
|||
// Tag
|
||||
& > .tag {
|
||||
display: inline-block;
|
||||
padding: .1em .3em;
|
||||
padding: 0.1em 0.3em;
|
||||
color: $main-color;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
|
|
@ -107,7 +106,7 @@
|
|||
|
||||
// Date
|
||||
& > .date {
|
||||
margin-left: .5em;
|
||||
margin-left: 0.5em;
|
||||
font-size: $body-font-size;
|
||||
color: $main-color-subtle;
|
||||
font-style: normal;
|
||||
|
|
@ -144,6 +143,7 @@
|
|||
.container-narrow {
|
||||
.r-resp-header-narrow {
|
||||
display: flex;
|
||||
|
||||
h1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,9 +31,8 @@
|
|||
color: $jumbo-bg-color;
|
||||
}
|
||||
|
||||
|
||||
.nav-search:focus::-webkit-input-placeholder{ color:white }
|
||||
.nav-search:focus::-moz-input-placeholder { color: white }
|
||||
.nav-search:focus::-webkit-input-placeholder { color: white; }
|
||||
.nav-search:focus::-moz-input-placeholder { color: white; }
|
||||
|
||||
#search-hint {
|
||||
display: inline;
|
||||
|
|
@ -42,7 +41,7 @@
|
|||
top: 4.76px;
|
||||
transition: all 0.2s;
|
||||
|
||||
@media(max-width: 691px){ right: 10% }
|
||||
@media (max-width: 691px) { right: 10%; }
|
||||
}
|
||||
|
||||
#search-hint-dialog {
|
||||
|
|
@ -56,7 +55,7 @@
|
|||
right: -63%;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
box-shadow: #00000033 0.2em 0.2em 0.2em;
|
||||
box-shadow: #0003 0.2em 0.2em 0.2em;
|
||||
background-color: white;
|
||||
|
||||
@media (min-width: 693px) and (max-width: 1163px) {
|
||||
|
|
@ -70,7 +69,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
#search-hint-dialog:before {
|
||||
#search-hint-dialog::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 88%;
|
||||
|
|
@ -81,8 +80,10 @@
|
|||
border-left: 17px solid transparent;
|
||||
border-bottom: 26px solid white;
|
||||
|
||||
@media(max-width: 1230px) { right: 76% }
|
||||
@media (max-width: 1230px) { right: 76%; }
|
||||
|
||||
@media (min-width: 693px) and (max-width: 1163px) { right: 68%; }
|
||||
|
||||
@media (max-width: 690px) { right: 85%; }
|
||||
}
|
||||
|
||||
|
|
@ -94,7 +95,7 @@
|
|||
}
|
||||
|
||||
.dialog-text {
|
||||
text-align: left
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#hits {
|
||||
|
|
@ -105,7 +106,7 @@
|
|||
width: 500px;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0px 6px 35px 0px rgba(0,0,0,0.35);
|
||||
box-shadow: 0 6px 35px 0 rgba(0, 0, 0, 0.35);
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
margin-left: 49.5%;
|
||||
|
|
@ -114,11 +115,11 @@
|
|||
@media (max-width: 992px) {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-top: 10.5%
|
||||
margin-top: 10.5%;
|
||||
}
|
||||
|
||||
@media (min-width: 993px) and (max-width: 1270px) {
|
||||
margin-top: 6%
|
||||
margin-top: 6%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -130,7 +131,7 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
.hits-container:before {
|
||||
.hits-container::before {
|
||||
content: attr(title);
|
||||
display: block;
|
||||
margin: 0;
|
||||
|
|
@ -143,13 +144,14 @@
|
|||
.ais-hits--item {
|
||||
background-color: white;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid #DDD;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin: 0;
|
||||
color: #7e7e7e;
|
||||
}
|
||||
|
||||
.ais-hits--item:hover, .ais-hits--item.active {
|
||||
background-color: #F0F0F0;
|
||||
.ais-hits--item:hover,
|
||||
.ais-hits--item.active {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.ais-hits.ais-hits__empty {
|
||||
|
|
@ -171,7 +173,7 @@
|
|||
}
|
||||
|
||||
.ais-search-box--magnifier {
|
||||
display: none
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ais-search-box--reset-wrapper {
|
||||
|
|
|
|||
|
|
@ -1,110 +1,3 @@
|
|||
/* Userland List Cards */
|
||||
|
||||
ul.report-list {
|
||||
display: block;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@include breakpoint(md) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.report-list > li {
|
||||
display: block;
|
||||
float: left;
|
||||
@include breakpoint(md) { width: 47%; }
|
||||
@include breakpoint(lg) { width: 31%; }
|
||||
@include breakpoint(xl) { width: 23%; }
|
||||
}
|
||||
|
||||
.report-list .inner {
|
||||
display: block;
|
||||
margin: 8px;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: #f6f8f8;
|
||||
border: 1px solid #F0F0F0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.report-list .inner:hover {
|
||||
background-color: #fcfdfd;
|
||||
}
|
||||
|
||||
.report-list img {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
height: 60px;
|
||||
margin-bottom: 0.3em;
|
||||
transition: transform .32s;
|
||||
}
|
||||
|
||||
.report-list .inner:hover img {
|
||||
transform: scale(1.1);
|
||||
transition-duration: .08s;
|
||||
}
|
||||
|
||||
.report-list .inner:active img {
|
||||
transform: scale(.92);
|
||||
transition-duration: 0;
|
||||
}
|
||||
|
||||
.report-list h3 {
|
||||
font-size: 18px;
|
||||
color: $main-link-color;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.report-list p {
|
||||
opacity: 0.8;
|
||||
line-height: 1.4;
|
||||
font-size: 90%;
|
||||
text-align: left;
|
||||
margin-top: 10px;
|
||||
color: $text-gray-dark;
|
||||
}
|
||||
|
||||
/* Filterable Lists (in /userland) */
|
||||
|
||||
.filterable-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.filterable-list > li {
|
||||
border-bottom: 1px solid #DDD;
|
||||
line-height: 1;
|
||||
padding: 10px 40px 10px 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filterable-list > li:after {
|
||||
content: attr(data-rank);
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.filterable-list-input {
|
||||
width: 100%;
|
||||
padding: 8px 8px;
|
||||
border: 1px solid #CCC;
|
||||
border-radius: 2px;
|
||||
margin: 10px 0;
|
||||
&[type="search"] {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
/* Author List (for npm and GitHub users in /userland) */
|
||||
|
||||
.author-list {
|
||||
|
|
@ -134,3 +27,115 @@ ul.report-list {
|
|||
.author-list-item-details {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* Userland List Cards */
|
||||
|
||||
ul.report-list {
|
||||
display: block;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@include breakpoint(md) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.report-list > li {
|
||||
display: block;
|
||||
float: left;
|
||||
|
||||
@include breakpoint(md) { width: 47%; }
|
||||
|
||||
@include breakpoint(lg) { width: 31%; }
|
||||
|
||||
@include breakpoint(xl) { width: 23%; }
|
||||
}
|
||||
|
||||
.report-list .inner {
|
||||
display: block;
|
||||
margin: 8px;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: #f6f8f8;
|
||||
border: 1px solid #f0f0f0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.report-list .inner:hover {
|
||||
background-color: #fcfdfd;
|
||||
}
|
||||
|
||||
.report-list img {
|
||||
display: inline-block;
|
||||
width: 120px;
|
||||
height: 60px;
|
||||
margin-bottom: 0.3em;
|
||||
transition: transform 0.32s;
|
||||
}
|
||||
|
||||
.report-list .inner:hover img {
|
||||
transform: scale(1.1);
|
||||
transition-duration: 0.08s;
|
||||
}
|
||||
|
||||
.report-list .inner:active img {
|
||||
transform: scale(0.92);
|
||||
transition-duration: 0;
|
||||
}
|
||||
|
||||
.report-list h3 {
|
||||
font-size: 18px;
|
||||
color: $main-link-color;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.report-list p {
|
||||
opacity: 0.8;
|
||||
line-height: 1.4;
|
||||
font-size: 90%;
|
||||
text-align: left;
|
||||
margin-top: 10px;
|
||||
color: $text-gray-dark;
|
||||
}
|
||||
|
||||
/* Filterable Lists (in /userland) */
|
||||
|
||||
.filterable-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.filterable-list > li {
|
||||
border-bottom: 1px solid #ddd;
|
||||
line-height: 1;
|
||||
padding: 10px 40px 10px 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.filterable-list > li::after {
|
||||
content: attr(data-rank);
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.filterable-list-input {
|
||||
width: 100%;
|
||||
padding: 8px 8px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
margin: 10px 0;
|
||||
|
||||
&[type="search"] {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,6 @@ $mini-color-link: hsl(230, 24%, 100%) !default;
|
|||
// Accent
|
||||
$accent-color: hsl(335, 87%, 47%) !default;
|
||||
|
||||
|
||||
// Basecoat overrides
|
||||
|
||||
$theme-color: $main-color-strong !default;
|
||||
|
|
@ -44,7 +43,7 @@ $border-color: $main-border-color !default;
|
|||
// Default: $container-max-widths: ( xl: 1260px );
|
||||
$grid-breakpoints: map-merge($grid-breakpoints, (xl: 1300px)) !default;
|
||||
|
||||
$code-font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace !default;
|
||||
$code-font-family: consolas, "Liberation Mono", menlo, courier, monospace !default;
|
||||
|
||||
$nodejs-color: #65AA4C;
|
||||
$chromium-color: #5586EB
|
||||
$nodejs-color: #65aa4c;
|
||||
$chromium-color: #5586eb;
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
transition: opacity 0.4s ease-in-out, flex 0.4s ease-in-out;
|
||||
|
||||
&.expanded-version {
|
||||
flex: 2
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
&.shrunk-version {
|
||||
|
|
|
|||
|
|
@ -5,10 +5,8 @@
|
|||
@import "../bower_components/basecoat/scss/variables"; // Basecoat override
|
||||
@import "variables"; // Electron override
|
||||
|
||||
|
||||
// Global requirements
|
||||
@import "../bower_components/primer-css/scss/mixins";
|
||||
|
||||
@import "../bower_components/basecoat/scss/mixins/breakpoints";
|
||||
@import "../bower_components/basecoat/scss/mixins/grid";
|
||||
@import "../bower_components/basecoat/scss/mixins/clearfix";
|
||||
|
|
@ -18,7 +16,6 @@
|
|||
@import "../bower_components/primer-css/scss/normalize";
|
||||
@import "../bower_components/primer-css/scss/base";
|
||||
@import "../bower_components/primer-css/scss/type";
|
||||
|
||||
@import "../bower_components/basecoat/scss/layout"; // Basecoat override
|
||||
@import "../bower_components/basecoat/scss/type"; // Basecoat override
|
||||
|
||||
|
|
@ -26,7 +23,6 @@
|
|||
@import "../bower_components/primer-css/scss/buttons";
|
||||
@import "../bower_components/primer-css/scss/filter-list";
|
||||
@import "../bower_components/primer-css/scss/tooltips";
|
||||
|
||||
@import "../bower_components/basecoat/scss/grid";
|
||||
@import "primer-support/index.scss";
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче