This commit is contained in:
Erick Zhao 2020-06-18 16:49:03 -07:00 коммит произвёл GitHub
Родитель efcbaff8b3
Коммит 6772309b3e
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
17 изменённых файлов: 2341 добавлений и 329 удалений

11
.stylelintrc.json Normal file
Просмотреть файл

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

1943
package-lock.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;
@ -385,12 +389,12 @@ $app-list-icon-size: 48px;
}
.listed-app-logo {
position: absolute;
top: 0;
left: 0;
max-width: 48px;
height: 48px;
z-index: 2;
position: absolute;
top: 0;
left: 0;
max-width: 48px;
height: 48px;
z-index: 2;
}
.listed-app-name {

Просмотреть файл

@ -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;
@ -65,25 +72,21 @@ p:last-child {
.text-center-md { @include breakpoint(md) { text-align: center !important; } }
.text-center-lg { @include breakpoint(lg) { text-align: center !important; } }
h1 { -webkit-font-smoothing: antialiased; }
h2 { font-weight: 300; -webkit-font-smoothing: antialiased; }
h1 { -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;
transition: opacity 0.3s;
opacity: 1;
transition: opacity 0.3s;
}
img[data-src] {
opacity: 0;
opacity: 0;
}
.faded-out {
@ -92,22 +95,46 @@ img[data-src] {
}
.overflow-hidden {
overflow: hidden !important;
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
@ -131,22 +158,22 @@ img[data-src] {
}
kbd {
-moz-border-radius:3px;
-moz-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
-webkit-border-radius:3px;
-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
background-color:#f7f7f7;
border:1px solid #ccc;
border-radius:3px;
box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
color:#333;
display:inline-block;
font-family: Arial,Helvetica,sans-serif;
font-size:11px;
line-height:1.4;
margin:0 .1em;
padding:.1em .6em;
text-shadow:0 1px 0 #fff;
-moz-border-radius: 3px;
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
-webkit-border-radius: 3px;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
background-color: #f7f7f7;
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
color: #333;
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.4;
margin: 0 0.1em;
padding: 0.1em 0.6em;
text-shadow: 0 1px 0 #fff;
}
.PRIMER-REMOVE-ME {

Просмотреть файл

@ -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,18 +83,19 @@
margin-top: 20px !important;
margin-bottom: 20px !important;
}
}
figure {
margin: 2em 0;
}
figure {
margin: 2em 0;
}
figcaption {
text-align: center;
padding: 10px;
font-size: 1em;
color: $main-color;
a {
figcaption {
text-align: center;
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,29 +68,33 @@ $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
@for $i from 1 through 15 {
.hero-app-#{$i} {
fill: mix( $jumbo-color-subtle, $jumbo-bg-color, 80% - $i * 4% );
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);
}

Просмотреть файл

@ -1,14 +1,14 @@
/* modal background */
.kb-shortcut {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 5;
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%;
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0, 0, 0, 0.4); /* Fallback color */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0, 0, 0, 0.4); /* Fallback color */
}
/* modal box */
@ -26,7 +26,7 @@
// background-color: #5cb85c;
// color: white;
// color: $jumbo-color;
// color: $jumbo-color;
// background-color: lighten($jumbo-bg-color, 2%);
// border-bottom-color: darken($jumbo-bg-color, 8%);
@ -45,7 +45,7 @@
cursor: pointer;
}
color: $main-color-subtle;
color: $main-color-subtle;
background-color: #74b1be7a;
}
@ -65,11 +65,12 @@
color: white;
}
.kb-shortcut th, .kb-shortcut td {
.kb-shortcut th,
.kb-shortcut td {
padding: 5px;
text-align: left;
}
.kb-shortcut h2 {
margin: 0.5em 0;
margin: 0.5em 0;
}

Просмотреть файл

@ -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,29 +31,28 @@
font-size: 21px;
// Remove border radius for active element.
border-radius: 0;
position: relative;
display: block;
padding: 12px 15px;
border-bottom: 1px solid $border-color;
&:first-child {
border-top: 0;
border-top-right-radius: $border-radius;
border-top-left-radius: $border-radius;
}
&:last-child {
border-bottom: 0;
border-bottom-right-radius: $border-radius;
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
&:hover {
text-decoration: none;
background-color: $gray-0;
}
&.selected {
font-weight: bold;
color: $gray-7;
@ -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;
}

Просмотреть файл

@ -1,4 +1,4 @@
.ais-search-box{
.ais-search-box {
display: inline;
margin-right: 10px;
}
@ -11,11 +11,11 @@
}
.ais-hits--item .app-result-icon {
max-width:100%;
max-height:100%;
max-width: 100%;
max-height: 100%;
}
.nav-search{
.nav-search {
transition: all 0.2s;
background-color: $main-color;
border: none;
@ -31,46 +31,45 @@
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;
#search-hint {
display: inline;
position: relative;
right: 7%;
top: 4.76px;
transition: all 0.2s;
@media(max-width: 691px){ right: 10% }
@media (max-width: 691px) { right: 10%; }
}
#search-hint-dialog{
display:flex;
flex-direction:row;
align-items:center;
#search-hint-dialog {
display: flex;
flex-direction: row;
align-items: center;
position: absolute;
z-index: 1;
width: 350px;
top: 71px;
right: -63%;
border: none;
border-radius:10px;
box-shadow: #00000033 0.2em 0.2em 0.2em;
border-radius: 10px;
box-shadow: #0003 0.2em 0.2em 0.2em;
background-color: white;
@media(min-width:693px) and (max-width: 1163px) {
@media (min-width: 693px) and (max-width: 1163px) {
top: 103px;
right: -48%;
}
@media(max-width: 690px){
@media (max-width: 690px) {
top: 148px;
right: -1%;
}
}
#search-hint-dialog:before {
#search-hint-dialog::before {
content: "";
position: absolute;
right: 88%;
@ -81,23 +80,25 @@
border-left: 17px solid transparent;
border-bottom: 26px solid white;
@media(max-width: 1230px) { right: 76% }
@media(min-width:693px) and (max-width:1163px) { right: 68%; }
@media(max-width: 690px) { right:85%; }
@media (max-width: 1230px) { right: 76%; }
@media (min-width: 693px) and (max-width: 1163px) { right: 68%; }
@media (max-width: 690px) { right: 85%; }
}
.dialog-button{
.dialog-button {
position: relative;
top:30px;
height:30px;
border-radius:5px;
top: 30px;
height: 30px;
border-radius: 5px;
}
.dialog-text{
text-align: left
.dialog-text {
text-align: left;
}
#hits{
#hits {
position: absolute;
display: none;
flex-direction: column;
@ -105,24 +106,24 @@
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;
background-color: white;
margin-left: 49.5%;
top: 80px;
@media (max-width: 992px) {
width: 100%;
margin-left: 0;
margin-top: 10.5%
width: 100%;
margin-left: 0;
margin-top: 10.5%;
}
@media (min-width:993px) and (max-width: 1270px){
margin-top: 6%
@media (min-width: 993px) and (max-width: 1270px) {
margin-top: 6%;
}
}
.first{
.first {
order: -1;
}
@ -130,7 +131,7 @@
display: none;
}
.hits-container:before {
.hits-container::before {
content: attr(title);
display: block;
margin: 0;
@ -140,20 +141,21 @@
background-color: #74b1be7a;
}
.ais-hits--item{
.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{
display:none;
.ais-hits.ais-hits__empty {
display: none;
}
.ais-hits--item em {
@ -171,19 +173,19 @@
}
.ais-search-box--magnifier {
display: none
display: none;
}
.ais-search-box--reset-wrapper{
display:inline !important;
.ais-search-box--reset-wrapper {
display: inline !important;
position: relative;
right: 30px;
top: 6px;
}
::-webkit-input-placeholder { color: $jumbo-color; }
::-moz-input-placeholder{color: $jumbo-color; }
::-moz-input-placeholder { color: $jumbo-color; }
.search-small-text {
font-size: 10pt;
}
}

Просмотреть файл

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

Просмотреть файл

@ -3,7 +3,7 @@
// TODO: Audit for contrast
// main
$main-bg-color: hsl(190, 12%,100%) !default;
$main-bg-color: hsl(190, 12%, 100%) !default;
$main-bg-color-shade: hsl(190, 12%, 97%) !default;
$main-color-subtle: hsl(190, 12%, 54%) !default;
$main-color: hsl(192, 24%, 30%) !default;
@ -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";