LBRYCommunity/lbry.tech
1
0
Fork 0
Code Issues 13 Pull requests 8 Projects Releases Packages Wiki Activity

Fixes and added new LBRY color module

Browse source
This commit is contained in:
ポール ウェッブ 2018-10-12 17:29:53 -05:00
parent 1d43422b77
commit a5387f592f
28 changed files with 207 additions and 252 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/helpers/github.js
View file

@ -355,7 +355,7 @@ function updateGithubFeed() {
// H E L P E R // H E L P E R
function refToBranch(ref) { function refToBranch(ref) {
return ref.replace("refs/heads/", ""); if (ref) return ref.replace("refs/heads/", "");
} }

10
app/sass/_layout.scss
View file

@ -4,14 +4,14 @@ body {
} }
html { html {
background-color: $white; background-color: $lbry-white;
} }
body { body {
@include font-sans; @include font-sans;
min-width: 320px; min-width: 320px;
color: $black; color: $lbry-black;
font-size: 12px; font-size: 12px;
overflow-x: hidden; overflow-x: hidden;
position: relative; position: relative;
@ -59,7 +59,7 @@ h5 {
hr { hr {
width: 100%; height: 1px; width: 100%; height: 1px;
background-color: rgba($gray, 0.3); background-color: $lbry-gray-2;
border: none; border: none;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -72,7 +72,7 @@ code {
width: 100%; width: 100%;
bottom: 0; left: 0; bottom: 0; left: 0;
background-color: $yellow; background-color: $lbry-yellow-3;
line-height: 1.33; line-height: 1.33;
padding-top: 1rem; padding-top: 1rem;
padding-right: env(safe-area-inset-right); padding-right: env(safe-area-inset-right);
@ -113,7 +113,7 @@ code {
width: 1.25rem; height: 1.25rem; width: 1.25rem; height: 1.25rem;
top: 0; right: 0; top: 0; right: 0;
background-color: $white; background-color: $lbry-white;
border-radius: 50%; border-radius: 50%;
display: block; display: block;
font-size: 1rem; font-size: 1rem;

3
app/sass/bundle.scss
View file

@ -1,7 +1,8 @@
@charset "utf-8"; @charset "utf-8";
@import "../../node_modules/@lbry/color/lbry-color";
@import @import
"init/colors",
"init/base", "init/base",
"init/mixins", "init/mixins",
"init/markdown", "init/markdown",

6
app/sass/init/_base.scss
View file

@ -93,10 +93,10 @@ img {
&::after { &::after {
width: 100%; height: 100%; width: 100%; height: 100%;
background-color: $white; background-color: $lbry-white;
background-image: url("/assets/media/images/missing.png"); background-image: url("/assets/media/images/missing.png");
background-size: cover; background-size: cover;
box-shadow: 0 0 1px 0 rgba($black, 0.3); box-shadow: 0 0 1px 0 rgba($lbry-black, 0.3);
content: ""; content: "";
display: block; display: block;
} }
@ -182,7 +182,7 @@ button::-moz-focus-inner {
// Get rid of yellow autofill background // Get rid of yellow autofill background
input:-webkit-autofill { input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px $white inset !important; -webkit-box-shadow: 0 0 0 1000px $lbry-white inset !important;
&:focus { &:focus {
outline: none; outline: none;

16
app/sass/init/_colors.scss
View file

@ -1,16 +0,0 @@
$white: #fff;
$silver: #f1f3f5;
$black: #212529;
$gray: #ced4da;
$teal: #38d9a9;
$cyan: #3bc9db;
$blue: #339af0;
$indigo: #748ffc;
$violet: #9775fa;
$fuchsia: #da77f2;
$pink: #f783ac;
$red: #e03131;
$orange: #ff922b;
$yellow: #ffe066;
$lime: #a9e34b;
$green: #51cf66;

50
app/sass/init/_extends.scss
View file

@ -52,7 +52,7 @@
} }
&:hover::after { &:hover::after {
background-color: $black; background-color: $lbry-black;
} }
} }
@ -62,16 +62,16 @@
@extend .__button-padding-horizontal; @extend .__button-padding-horizontal;
&:not(:hover) { &:not(:hover) {
background-color: $black; background-color: $lbry-black;
border-color: $white; border-color: $lbry-white;
box-shadow: 2px 2px 0 $white; box-shadow: 2px 2px 0 $lbry-white;
color: $white; color: $lbry-white;
} }
&:hover { &:hover {
background-color: $white; background-color: $lbry-white;
border-color: $black; border-color: $lbry-black;
box-shadow: 2px 2px 0 $black; box-shadow: 2px 2px 0 $lbry-black;
color: inherit; color: inherit;
} }
} }
@ -82,17 +82,17 @@
@extend .__button-padding-horizontal; @extend .__button-padding-horizontal;
&:not(:hover) { &:not(:hover) {
background-color: $white; background-color: $lbry-white;
border-color: transparent; border-color: transparent;
box-shadow: 2px 2px 0 $black; box-shadow: 2px 2px 0 $lbry-black;
color: inherit; color: inherit;
} }
&:hover { &:hover {
background-color: $black; background-color: $lbry-black;
border-color: $white; border-color: $lbry-white;
box-shadow: 2px 2px 0 $white; box-shadow: 2px 2px 0 $lbry-white;
color: $white; color: $lbry-white;
} }
} }
@ -101,17 +101,17 @@
@extend .__button-padding-vertical; @extend .__button-padding-vertical;
@extend .__button-padding-horizontal; @extend .__button-padding-horizontal;
background-color: $white; background-color: $lbry-white;
&:not(:hover) { &:not(:hover) {
border-color: transparent; border-color: transparent;
box-shadow: 2px 2px 0 $black; box-shadow: 2px 2px 0 $lbry-black;
} }
&:hover { &:hover {
border-color: $teal; border-color: $lbry-teal-3;
box-shadow: 2px 2px 0 $teal; box-shadow: 2px 2px 0 $lbry-teal-3;
color: $teal; color: $lbry-teal-3;
} }
} }
@ -127,7 +127,7 @@
.button { .button {
@extend .__button-padding-horizontal; @extend .__button-padding-horizontal;
color: $white; color: $lbry-white;
font-size: 1rem; font-size: 1rem;
line-height: 2rem; line-height: 2rem;
position: relative; position: relative;
@ -144,18 +144,18 @@
} }
&:not(:hover) { &:not(:hover) {
background-color: $black; background-color: $lbry-black;
&::after { &::after {
background-color: $black; background-color: $lbry-black;
} }
} }
&:hover { &:hover {
background-color: $teal; background-color: $lbry-teal-3;
&::after { &::after {
background-color: $teal; background-color: $lbry-teal-3;
} }
} }
} }
@ -181,7 +181,7 @@
top: 2rem; left: calc(50% - 2rem); top: 2rem; left: calc(50% - 2rem);
animation: spin 2s linear infinite; animation: spin 2s linear infinite;
border-top-color: $teal; border-top-color: $lbry-teal-3;
border-radius: 50%; border-radius: 50%;
border-style: solid; border-style: solid;
border-width: 6px; border-width: 6px;

28
app/sass/init/_markdown.scss
View file

@ -94,7 +94,7 @@
width: 150px; height: 100px; width: 150px; height: 100px;
top: 3rem; left: -2rem; top: 3rem; left: -2rem;
color: rgba($teal, 0.2); color: rgba($lbry-teal-3, 0.2);
content: "\201C"; content: "\201C";
font-size: 20rem; font-size: 20rem;
line-height: 0.5; line-height: 0.5;
@ -109,9 +109,9 @@
code { code {
padding: 0.3rem 0.5rem; padding: 0.3rem 0.5rem;
background-color: $black; background-color: $lbry-black;
border-radius: 3px; border-radius: 3px;
color: $white; color: $lbry-white;
font-size: 60%; font-size: 60%;
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
vertical-align: middle; vertical-align: middle;
@ -185,11 +185,11 @@
} }
a:not(.__button-black):not(.button) { a:not(.__button-black):not(.button) {
@include underline($teal, $white); @include underline($lbry-teal-3, $lbry-white);
color: $teal; color: $lbry-teal-3;
code { code {
background-color: $teal; background-color: $lbry-teal-3;
text-shadow: none; text-shadow: none;
} }
} }
@ -210,8 +210,8 @@
table { table {
width: 100%; width: 100%;
background-color: $white; background-color: $lbry-white;
border: 1px solid rgba($gray, 0.3); border: 1px solid $lbry-gray-1;
border-spacing: 0; border-spacing: 0;
margin-bottom: 2rem; margin-bottom: 2rem;
position: relative; position: relative;
@ -230,13 +230,13 @@
} }
tbody tr:last-of-type td:not(:last-of-type) { tbody tr:last-of-type td:not(:last-of-type) {
border-bottom: 1px solid rgba($gray, 0.3); border-bottom: 1px solid $lbry-gray-1;
} }
} }
thead { thead {
background-color: $black; background-color: $lbry-black;
color: $white; color: $lbry-white;
cursor: default; cursor: default;
position: relative; position: relative;
@ -253,7 +253,7 @@
width: calc(100% + 2px); height: calc(100% + 2px); width: calc(100% + 2px); height: calc(100% + 2px);
top: -1px; left: -1px; top: -1px; left: -1px;
background-color: $black; background-color: $lbry-black;
content: ""; content: "";
position: absolute; position: absolute;
z-index: 0; z-index: 0;
@ -265,7 +265,7 @@
} }
tr:nth-of-type(even) { tr:nth-of-type(even) {
background-color: rgba($black, 0.025); background-color: $lbry-gray-1;
} }
th, th,
@ -280,7 +280,7 @@
} }
tbody tr:not(:last-of-type) td { tbody tr:not(:last-of-type) td {
border-bottom: 1px solid rgba($gray, 0.3); border-bottom: 1px solid $lbry-gray-1;
} }
td { td {

8
app/sass/init/_mixins.scss
View file

@ -57,17 +57,17 @@
} }
} }
@mixin underline($text-color: #000, $whitespace-color: #fff) { @mixin underline($text-color: #000, $lbry-whitespace-color: #fff) {
@include selection($text-color, $whitespace-color); @include selection($text-color, $lbry-whitespace-color);
background-image: linear-gradient($whitespace-color, $whitespace-color), linear-gradient($whitespace-color, $whitespace-color), linear-gradient($text-color, $text-color); background-image: linear-gradient($lbry-whitespace-color, $lbry-whitespace-color), linear-gradient($lbry-whitespace-color, $lbry-whitespace-color), linear-gradient($text-color, $text-color);
background-position: 0 88%, 100% 88%, 0 88%; background-position: 0 88%, 100% 88%, 0 88%;
background-repeat: no-repeat, no-repeat, repeat-x; background-repeat: no-repeat, no-repeat, repeat-x;
background-size: 0.05rem 1px, 0.05rem 1px, 1px 1px; background-size: 0.05rem 1px, 0.05rem 1px, 1px 1px;
box-decoration-break: clone; box-decoration-break: clone;
display: inline; display: inline;
text-decoration: none; text-decoration: none;
text-shadow: 0.03rem 0 $whitespace-color, -0.03rem 0 $whitespace-color, 0 0.03rem $whitespace-color, 0 -0.03rem $whitespace-color, 0.06rem 0 $whitespace-color, -0.06rem 0 $whitespace-color, 0.09rem 0 $whitespace-color, -0.09rem 0 $whitespace-color, 0.12rem 0 $whitespace-color, -0.12rem 0 $whitespace-color, 0.15rem 0 $whitespace-color, -0.15rem 0 $whitespace-color; text-shadow: 0.03rem 0 $lbry-whitespace-color, -0.03rem 0 $lbry-whitespace-color, 0 0.03rem $lbry-whitespace-color, 0 -0.03rem $lbry-whitespace-color, 0.06rem 0 $lbry-whitespace-color, -0.06rem 0 $lbry-whitespace-color, 0.09rem 0 $lbry-whitespace-color, -0.09rem 0 $lbry-whitespace-color, 0.12rem 0 $lbry-whitespace-color, -0.12rem 0 $lbry-whitespace-color, 0.15rem 0 $lbry-whitespace-color, -0.15rem 0 $lbry-whitespace-color;
@-moz-document url-prefix() { // sass-lint:disable-line empty-args @-moz-document url-prefix() { // sass-lint:disable-line empty-args
background-position: 0 90%, 100% 90%, 0 90%; background-position: 0 90%, 100% 90%, 0 90%;

44
app/sass/pages/_api.scss
View file

@ -23,7 +23,7 @@
width: 100%; height: 1px; width: 100%; height: 1px;
bottom: -1px; left: 0; bottom: -1px; left: 0;
background-color: rgba($gray, 0.3); background-color: $lbry-gray-2;
content: ""; content: "";
position: absolute; position: absolute;
} }
@ -50,8 +50,8 @@
width: 200px; height: calc(100vh - 4rem); // navigation is 4rem tall width: 200px; height: calc(100vh - 4rem); // navigation is 4rem tall
bottom: 0; left: 0; bottom: 0; left: 0;
background-color: $white; background-color: $lbry-white;
border-right: 1px solid rgba($gray, 0.3); border-right: 1px solid $lbry-gray-1;
float: left; float: left;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
@ -67,7 +67,7 @@
width: 100%; width: 100%;
padding: 0.25rem calc(2rem + 4px) 0.25rem 0.75rem; padding: 0.25rem calc(2rem + 4px) 0.25rem 0.75rem;
border-bottom: 1px solid rgba($gray, 0.3); border-bottom: 1px solid $lbry-gray-1;
font-size: 0.8rem; font-size: 0.8rem;
line-height: 2rem; line-height: 2rem;
} }
@ -76,9 +76,9 @@
width: 1.25rem; height: 1.25rem; width: 1.25rem; height: 1.25rem;
top: 0.6rem; right: 0.75rem; top: 0.6rem; right: 0.75rem;
background-color: $black; background-color: $lbry-black;
border-radius: 50%; border-radius: 50%;
color: $white; color: $lbry-white;
cursor: pointer; cursor: pointer;
font-size: 1rem; font-size: 1rem;
line-height: 1.15; line-height: 1.15;
@ -107,7 +107,7 @@
.api__toc__item { .api__toc__item {
&:hover { &:hover {
background-color: rgba($gray, 0.3); background-color: $lbry-gray-2;
} }
a { a {
@ -157,7 +157,7 @@
table { table {
width: 100%; width: 100%;
border: 1px solid rgba($white, 0.1); border: 1px solid rgba($lbry-white, 0.1);
border-radius: 0.3rem; border-radius: 0.3rem;
border-spacing: 0; border-spacing: 0;
font-size: 0.8rem; font-size: 0.8rem;
@ -174,36 +174,32 @@
} }
th { th {
border-bottom: 1px solid rgba($white, 0.1); border-bottom: 1px solid rgba($lbry-white, 0.1);
} }
tr:nth-child(even) { tr:nth-child(even) {
background-color: rgba($white, 0.1); background-color: rgba($lbry-white, 0.1);
} }
} }
.api__content__body { .api__content__body {
padding: 2rem; padding: 2rem;
border-bottom: 1px solid rgba($gray, 0.3); border-bottom: 1px solid $lbry-gray-1; // rgba($lbry-gray-1, 0.3);
pre {
border: 1px solid rgba($gray, 0.3);
}
} }
.api__content__body__arguments { .api__content__body__arguments {
border: 1px solid rgba($gray, 0.3); border: 1px solid $lbry-gray-2;
border-radius: 3px; border-radius: 3px;
list-style-type: none; list-style-type: none;
} }
.api__content__body__argument { .api__content__body__argument {
&:not(:last-of-type) { &:not(:last-of-type) {
border-bottom: 1px solid rgba($gray, 0.3); border-bottom: 1px solid $lbry-gray-2;
} }
&:nth-child(even) { &:nth-child(even) {
background-color: rgba($gray, 0.1); background-color: rgba($lbry-gray-1, 0.2);
} }
.left, .left,
@ -214,12 +210,12 @@
.left { .left {
width: 30%; width: 30%;
border-right: 1px solid rgba($gray, 0.3); border-right: 1px solid $lbry-gray-2;
float: left; float: left;
word-wrap: break-word; word-wrap: break-word;
span { span {
color: $gray; color: $lbry-gray-3;
font-size: 0.8rem; font-size: 0.8rem;
&:not(:first-of-type) { &:not(:first-of-type) {
@ -241,11 +237,11 @@
.api__content__example { .api__content__example {
padding: 2rem; padding: 2rem;
background-color: mix($gray, $black, 10%); background-color: rgba($lbry-black, 0.9);
border-bottom: 1px solid rgba($white, 0.1); border-bottom: 1px solid rgba($lbry-white, 0.1);
color: $white; color: $lbry-white;
pre { pre {
background-color: $black; background-color: $lbry-black;
} }
} }

4
app/sass/pages/_documentation.scss
View file

@ -18,7 +18,7 @@
position: relative; position: relative;
&::before { &::before {
background-color: $black; background-color: $lbry-black;
border-radius: 50%; border-radius: 50%;
content: ""; content: "";
line-height: 0; line-height: 0;
@ -97,7 +97,7 @@
position: relative; position: relative;
&::before { &::before {
color: rgba($black, 0.5); color: rgba($lbry-black, 0.5);
font-style: italic; font-style: italic;
position: absolute; position: absolute;
vertical-align: bottom; vertical-align: bottom;

18
app/sass/pages/_home.scss
View file

@ -36,7 +36,7 @@ body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
hr { hr {
width: 100%; height: 1px; width: 100%; height: 1px;
background-color: rgba($black, 0.1); background-color: rgba($lbry-black, 0.1);
border: none; border: none;
margin-bottom: 4rem; margin-bottom: 4rem;
} }
@ -45,7 +45,7 @@ body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
height: calc(50vh - 4rem); min-height: 300px; height: calc(50vh - 4rem); min-height: 300px;
align-items: center; align-items: center;
background-color: $black; background-color: $lbry-black;
// background-image: url("/assets/media/svg/text-logo--white.svg"); // background-image: url("/assets/media/svg/text-logo--white.svg");
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 800 300' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='%23fcfcfc' d='M567.328, 43.44l72.864, 130.464l0, 82.656l46.944, 0l0, -82.656l72.576, -130.464l-50.688, 0l-44.64, 84.672l-44.64, -84.672l-52.416, 0Z'/%3E %3Cpath fill='%23fcfcfc' d='M520.672, 173.616c22.464, -10.656 34.848, -31.968 34.848, -61.056c0, -44.64 -26.496, -68.832 -81.216, -69.12l-82.368, 0l0, 213.12l46.656, 0l0, -75.168l35.136, 0l31.392, 75.168l52.416, 0l-36.864, -82.944Zm-46.656, -32.544l-35.424, 0l0, -56.448l35.712, 0c23.904, 0 31.968, 12.96 31.968, 27.936c0, 15.264 -8.352, 28.512 -32.256, 28.512Z'/%3E %3Cpath fill='%23fcfcfc' d='M328.864, 150.576c15.552, -7.2 28.512, -23.04 28.512, -48.096c0, -34.848 -25.344, -58.464 -67.104, -58.464l-43.776, 0l-46.368, 0l0, 212.544l89.568, 0c42.048, 0 70.272, -19.584 70.272, -55.872c0, -26.784 -14.976, -42.048 -31.104, -50.112Zm-43.776, -67.104c19.008, 0 25.92, 14.112 25.92, 25.344c0, 11.808 -7.2, 24.768 -25.92, 24.768l-38.592, 0l0, -50.112l38.592, 0Zm2.592, 133.632l-41.184, 0l0, -49.248l41.184, 0c15.264, 0 26.208, 10.08 26.208, 25.056c0, 14.976 -10.656, 24.192 -26.208, 24.192Z'/%3E %3Cpath fill='%23fcfcfc' d='M87.52, 214.8l0, -171.36l-47.232, 0l0, 213.12l130.752, 0l0, -41.76l-83.52, 0Z'/%3E %3C/svg%3E"); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 800 300' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill='%23fcfcfc' d='M567.328, 43.44l72.864, 130.464l0, 82.656l46.944, 0l0, -82.656l72.576, -130.464l-50.688, 0l-44.64, 84.672l-44.64, -84.672l-52.416, 0Z'/%3E %3Cpath fill='%23fcfcfc' d='M520.672, 173.616c22.464, -10.656 34.848, -31.968 34.848, -61.056c0, -44.64 -26.496, -68.832 -81.216, -69.12l-82.368, 0l0, 213.12l46.656, 0l0, -75.168l35.136, 0l31.392, 75.168l52.416, 0l-36.864, -82.944Zm-46.656, -32.544l-35.424, 0l0, -56.448l35.712, 0c23.904, 0 31.968, 12.96 31.968, 27.936c0, 15.264 -8.352, 28.512 -32.256, 28.512Z'/%3E %3Cpath fill='%23fcfcfc' d='M328.864, 150.576c15.552, -7.2 28.512, -23.04 28.512, -48.096c0, -34.848 -25.344, -58.464 -67.104, -58.464l-43.776, 0l-46.368, 0l0, 212.544l89.568, 0c42.048, 0 70.272, -19.584 70.272, -55.872c0, -26.784 -14.976, -42.048 -31.104, -50.112Zm-43.776, -67.104c19.008, 0 25.92, 14.112 25.92, 25.344c0, 11.808 -7.2, 24.768 -25.92, 24.768l-38.592, 0l0, -50.112l38.592, 0Zm2.592, 133.632l-41.184, 0l0, -49.248l41.184, 0c15.264, 0 26.208, 10.08 26.208, 25.056c0, 14.976 -10.656, 24.192 -26.208, 24.192Z'/%3E %3Cpath fill='%23fcfcfc' d='M87.52, 214.8l0, -171.36l-47.232, 0l0, 213.12l130.752, 0l0, -41.76l-83.52, 0Z'/%3E %3C/svg%3E");
background-position: center; background-position: center;
@ -62,8 +62,8 @@ body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
h1 { h1 {
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
background-color: $white; background-color: $lbry-white;
border: 1px solid rgba($black, 0.1); border: 1px solid rgba($lbry-black, 0.1);
box-decoration-break: clone; box-decoration-break: clone;
display: inline; display: inline;
font-weight: normal; font-weight: normal;
@ -82,7 +82,7 @@ body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
} }
.features { .features {
border-bottom: 1px solid rgba($black, 0.05); border-bottom: 1px solid rgba($lbry-black, 0.05);
grid-area: features; grid-area: features;
} }
@ -106,13 +106,13 @@ body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
@media (min-width: 1301px) { @media (min-width: 1301px) {
top: -0.85rem; left: -2rem; top: -0.85rem; left: -2rem;
color: rgba($black, 0.045); color: rgba($lbry-black, 0.045);
font-size: 4rem; font-size: 4rem;
position: absolute; position: absolute;
} }
@media (max-width: 1300px) { @media (max-width: 1300px) {
color: $black; color: $lbry-black;
} }
@media (min-width: 901px) and (max-width: 1300px) { @media (min-width: 901px) and (max-width: 1300px) {
@ -159,7 +159,7 @@ body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
.docs, .docs,
.contribute, .contribute,
.develop { .develop {
border-bottom: 1px solid rgba($black, 0.05); border-bottom: 1px solid rgba($lbry-black, 0.05);
} }
.intro, .intro,
@ -238,7 +238,7 @@ body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
} }
&:hover { &:hover {
color: $teal; color: $lbry-teal-3;
} }
} }
} }

6
app/sass/pages/_page.scss
View file

@ -14,11 +14,11 @@
@include center; @include center;
width: 100%; width: 100%;
background-color: $black; background-color: $lbry-black;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
color: $white; color: $lbry-white;
padding-right: env(safe-area-inset-right); padding-right: env(safe-area-inset-right);
padding-left: env(safe-area-inset-left); padding-left: env(safe-area-inset-left);
position: relative; position: relative;
@ -26,7 +26,7 @@
.page__header__title { .page__header__title {
font-weight: 300; font-weight: 300;
text-shadow: 1px 1px 2px rgba($black, 0.3); text-shadow: 1px 1px 2px rgba($lbry-black, 0.3);
@media (min-width: 901px) { @media (min-width: 901px) {
font-size: 3rem; font-size: 3rem;

49
app/sass/pages/_playground.scss
View file

@ -10,14 +10,14 @@
.playground { .playground {
top: 1rem; top: 1rem;
border-top: 1px solid rgba($black, 0.05); border-top: 1px solid rgba($lbry-gray-1, 0.3);
position: relative; position: relative;
&.waiting::before { &.waiting::before {
top: 0; right: 0; top: 0; right: 0;
bottom: 0; left: 0; bottom: 0; left: 0;
background-color: rgba($white, 0.7); background-color: rgba($lbry-white, 0.7);
content: ""; content: "";
cursor: progress; cursor: progress;
position: absolute; position: absolute;
@ -78,19 +78,19 @@
&::before, &::before,
button, button,
span { span {
color: rgba($black, 0.3); color: $lbry-gray-1;
} }
} }
&.active, &.active,
&:hover { &:hover {
button { button {
color: $teal; color: $lbry-teal-3;
} }
&::before, &::before,
span { span {
color: $black; color: $lbry-black;
} }
} }
@ -99,7 +99,7 @@
width: 100%; height: 100%; width: 100%; height: 100%;
top: 0; left: 0; top: 0; left: 0;
background-color: rgba($white, 0.7); background-color: rgba($lbry-white, 0.7);
content: "✓"; content: "✓";
font-size: 3rem; font-size: 3rem;
line-height: 0.85; line-height: 0.85;
@ -151,7 +151,7 @@
**/ **/
.playground__content { .playground__content {
border-top: 1px solid rgba($black, 0.05); // border-top: 1px solid rgba($lbry-black, 0.05);
overflow-y: visible; overflow-y: visible;
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
@ -193,7 +193,7 @@
canvas { canvas {
width: 100%; height: 100%; width: 100%; height: 100%;
background-color: rgba($teal, 0.3); background-color: rgba($lbry-teal-1, 0.3);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
} }
@ -217,7 +217,7 @@
} }
&.selected { &.selected {
border-color: $black; border-color: $lbry-black;
} }
} }
@ -244,7 +244,7 @@
label { label {
width: 100%; width: 100%;
color: rgba($black, 0.3); color: $lbry-gray-2;
display: block; display: block;
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 600; font-weight: 600;
@ -276,12 +276,12 @@
&:not([type="file"]):not([type="submit"]) { &:not([type="file"]):not([type="submit"]) {
&:not(:hover):not(:active) { &:not(:hover):not(:active) {
border-color: $black; border-color: $lbry-black;
} }
&:hover, &:hover,
&:active { &:active {
border-color: $teal; border-color: $lbry-teal-3;
} }
} }
@ -297,7 +297,7 @@
width: 100%; height: 100%; width: 100%; height: 100%;
content: "✓"; content: "✓";
font-size: 1.5rem; font-size: 1.3rem;
line-height: 1rem; line-height: 1rem;
position: absolute; position: absolute;
} }
@ -307,7 +307,7 @@
} }
&:checked::after { &:checked::after {
color: $teal; color: $lbry-teal-3;
} }
} }
} }
@ -318,12 +318,12 @@
border-bottom: 2px solid; border-bottom: 2px solid;
&:not(:hover):not(:active) { &:not(:hover):not(:active) {
border-color: $black; border-color: $lbry-black;
} }
&:hover, &:hover,
&:active { &:active {
border-color: $teal; border-color: $lbry-teal-3;
} }
} }
@ -376,7 +376,7 @@
line-height: 1.33; line-height: 1.33;
span { span {
color: rgba($black, 0.3); color: rgba($lbry-black, 0.3);
display: block; display: block;
font-size: 0.8rem; font-size: 0.8rem;
letter-spacing: 0.025rem; letter-spacing: 0.025rem;
@ -385,7 +385,7 @@
} }
.playground__content__urlbar { .playground__content__urlbar {
border: 1px solid rgba($black, 0.05); border: 1px solid $lbry-gray-1;
display: flex; display: flex;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -404,6 +404,7 @@
button { button {
width: 6rem; width: 6rem;
text-transform: lowercase; text-transform: lowercase;
z-index: 1;
} }
input { input {
@ -411,7 +412,7 @@
font-size: 1rem; font-size: 1rem;
&::placeholder { &::placeholder {
color: rgba($black, 0.5); color: $lbry-gray-4;
opacity: 1; opacity: 1;
} }
} }
@ -420,7 +421,7 @@
@include no-user-select; @include no-user-select;
width: 3.5rem; width: 3.5rem;
color: rgba($black, 0.5); color: $lbry-gray-4;
cursor: default; cursor: default;
font-size: 1rem; font-size: 1rem;
line-height: 2rem; line-height: 2rem;
@ -442,12 +443,12 @@
line-height: 1.33; line-height: 1.33;
&:not(.success) { &:not(.success) {
background-color: rgba($black, 0.05); background-color: rgba($lbry-gray-1, 0.3);
text-align: center; text-align: center;
} }
&.success { &.success {
background-color: rgba($teal, 0.05); background-color: rgba($lbry-teal-1, 0.3);
strong { strong {
display: block; display: block;
@ -457,9 +458,9 @@
code { code {
padding: 2px 5px; padding: 2px 5px;
background-color: $black; background-color: $lbry-black;
border-radius: 0.2rem; border-radius: 0.2rem;
color: $white; color: $lbry-white;
font-size: 0.8rem; font-size: 0.8rem;
} }

40
app/sass/partials/_ecosystem.scss
View file

@ -96,7 +96,7 @@
&::after { &::after {
top: 0; right: -0.7rem; top: 0; right: -0.7rem;
color: rgba($gray, 0.3); color: $lbry-gray-1;
content: "/"; content: "/";
font-style: italic; font-style: italic;
position: absolute; position: absolute;
@ -172,7 +172,7 @@
} }
&::before { &::before {
background-color: $white; background-color: $lbry-white;
} }
.__close { .__close {
@ -207,18 +207,18 @@
&.lbrycrd { &.lbrycrd {
&:not(.active)::before { &:not(.active)::before {
background-color: $red; background-color: $lbry-red-3;
} }
&.active::before { &.active::before {
border: 2px solid $red; border: 2px solid $lbry-red-3;
} }
} }
&.lbry { &.lbry {
&:not(.active) { &:not(.active) {
&::before { &::before {
background-color: $blue; background-color: $lbry-blue-3;
} }
h2::after { h2::after {
@ -227,14 +227,14 @@
} }
&.active::before { &.active::before {
border: 2px solid $blue; border: 2px solid $lbry-blue-3;
} }
} }
&.applications { &.applications {
&:not(.active) { &:not(.active) {
&::before { &::before {
background-color: $green; background-color: $lbry-green-3;
} }
h2::after { h2::after {
@ -243,7 +243,7 @@
} }
&.active::before { &.active::before {
border: 2px solid $green; border: 2px solid $lbry-green-3;
} }
} }
} }
@ -256,7 +256,7 @@
.ecosystem__module__piece { .ecosystem__module__piece {
width: 80%; left: 10%; width: 80%; left: 10%;
background-color: $white; background-color: $lbry-white;
line-height: 2; line-height: 2;
position: relative; position: relative;
@ -277,7 +277,7 @@
} }
&:not(.on):not(.active) { &:not(.on):not(.active) {
color: rgba($black, 0.3); color: $lbry-gray-1;
} }
&:not(.active) { &:not(.active) {
@ -313,7 +313,7 @@
} }
&:not(.blue):not(.green):not(.red) { &:not(.blue):not(.green):not(.red) {
border-color: rgba($gray, 0.3); border-color: $lbry-gray-1;
} }
&.blue, &.blue,
@ -325,18 +325,18 @@
} }
&.blue { &.blue {
background-color: rgba($blue, 0.025); background-color: rgba($lbry-blue-1, 0.05);
border-color: $blue; border-color: $lbry-blue-3;
} }
&.green { &.green {
background-color: rgba($green, 0.025); background-color: rgba($lbry-green-1, 0.05);
border-color: $green; border-color: $lbry-green-3;
} }
&.red { &.red {
background-color: rgba($red, 0.025); background-color: rgba($lbry-red-1, 0.05);
border-color: $red; border-color: $lbry-red-3;
} }
} }
@ -353,7 +353,7 @@
} }
.ecosystem__submodule__description__title { .ecosystem__submodule__description__title {
color: rgba($black, 0.3); color: $lbry-gray-4;
letter-spacing: 0.1rem; letter-spacing: 0.1rem;
text-transform: uppercase; text-transform: uppercase;
} }
@ -377,7 +377,7 @@
@include font-serif; @include font-serif;
top: 0.3rem; left: -3.4rem; top: 0.3rem; left: -3.4rem;
color: rgba($black, 0.3); color: $lbry-gray-4;
content: "back to"; content: "back to";
font-size: 0.8rem; font-size: 0.8rem;
font-style: italic; font-style: italic;
@ -388,7 +388,7 @@
width: 2px; height: 100%; width: 2px; height: 100%;
top: 0; right: 0; top: 0; right: 0;
background-color: rgba($black, 0.3); background-color: $lbry-gray-1;
content: ""; content: "";
} }
} }

36
app/sass/partials/_email-subscribe.scss
View file

@ -1,5 +1,5 @@
.newsletter-cta { .newsletter-cta {
background-color: rgba($black, 0.2); background-color: $lbry-gray-2;
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 1rem; padding-bottom: 1rem;
text-align: center; text-align: center;
@ -43,7 +43,7 @@
.newsletter-cta__input { .newsletter-cta__input {
height: 38px; height: 38px;
background-color: $white; background-color: $lbry-white;
font-size: 1rem; font-size: 1rem;
transition: border 0.2s; transition: border 0.2s;
@ -57,31 +57,31 @@
} }
&:not(:focus) { &:not(:focus) {
border-top-color: $black; border-top-color: $lbry-black;
border-left-color: $black; border-left-color: $lbry-black;
@media (min-width: 551px) { @media (min-width: 551px) {
border-right-color: transparent; border-right-color: transparent;
border-bottom-color: $black; border-bottom-color: $lbry-black;
} }
@media (max-width: 550px) { @media (max-width: 550px) {
border-right-color: $black; border-right-color: $lbry-black;
border-bottom-color: transparent; border-bottom-color: transparent;
} }
} }
&:focus { &:focus {
border-top-color: mix($black, $teal, 20%); border-top-color: $lbry-teal-5;
border-left-color: mix($black, $teal, 20%); border-left-color: $lbry-teal-5;
@media (min-width: 551px) { @media (min-width: 551px) {
border-right-color: transparent; border-right-color: transparent;
border-bottom-color: mix($black, $teal, 20%); border-bottom-color: $lbry-teal-5;
} }
@media (max-width: 550px) { @media (max-width: 550px) {
border-right-color: mix($black, $teal, 20%); border-right-color: $lbry-teal-5;
border-bottom-color: transparent; border-bottom-color: transparent;
} }
} }
@ -90,7 +90,7 @@
.newsletter-cta__submit { .newsletter-cta__submit {
@extend .__button-basic; @extend .__button-basic;
@extend .__button-padding-vertical; @extend .__button-padding-vertical;
color: $white; color: $lbry-white;
@media (min-width: 551px) { @media (min-width: 551px) {
width: 112px; height: 38px; width: 112px; height: 38px;
@ -105,19 +105,19 @@
} }
&:not(:hover) { &:not(:hover) {
background-color: $black; background-color: $lbry-black;
border-color: $black; border-color: $lbry-black;
} }
&:hover { &:hover {
background-color: $teal; background-color: $lbry-teal-3;
border-color: mix($black, $teal, 20%); border-color: $lbry-teal-5;
} }
} }
.newsletter-cta__message { .newsletter-cta__message {
@include clearfix; @include clearfix;
color: $white; color: $lbry-white;
cursor: default; cursor: default;
display: inline-block; display: inline-block;
font-size: 0.8rem; font-size: 0.8rem;
@ -128,10 +128,10 @@
} }
&:not(.error) { &:not(.error) {
background-color: $teal; background-color: $lbry-teal-3;
} }
&.error { &.error {
background-color: $red; background-color: $lbry-red-3;
} }
} }

16
app/sass/partials/_feature-links.scss
View file

@ -13,8 +13,8 @@ $width-feature-link: 320px;
} }
.feature-link { .feature-link {
background-color: $white; background-color: $lbry-white;
border: 1px solid rgba($black, 0.1); border: 1px solid rgba($lbry-black, 0.1);
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
@ -53,10 +53,10 @@ $width-feature-link: 320px;
} }
&:hover { &:hover {
box-shadow: 0 0 15px rgba($black, 0.15); box-shadow: 0 0 15px $lbry-gray-1;
.feature-link__title { .feature-link__title {
color: $teal; color: $lbry-teal-3;
} }
} }
} }
@ -75,11 +75,11 @@ $width-feature-link: 320px;
.feature-link__title-inner { .feature-link__title-inner {
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
background-color: $white; background-color: $lbry-white;
border: 1px solid rgba($gray, 0.1); border: 1px solid $lbry-gray-1;
border-radius: 3px; border-radius: 3px;
box-decoration-break: clone; box-decoration-break: clone;
box-shadow: 0 2px 5px rgba($black, 0.025); box-shadow: 0 2px 5px rgba($lbry-gray-5, 0.1);
display: inline-block; display: inline-block;
} }
@ -87,7 +87,7 @@ $width-feature-link: 320px;
width: calc(100% + 2px); height: 100px; width: calc(100% + 2px); height: 100px;
top: -1px; left: -1px; top: -1px; left: -1px;
background-color: $teal; background-color: $lbry-teal-3;
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
overflow: hidden; overflow: hidden;

16
app/sass/partials/_flash.scss
View file

@ -17,8 +17,8 @@
position: absolute; position: absolute;
&:not(.error):not(.info):not(.warning) { &:not(.error):not(.info):not(.warning) {
background-color: mix($white, $teal, 90%); background-color: $lbry-teal-1;
border-color: $teal; border-color: $lbry-teal-3;
} }
&:not(.active) { &:not(.active) {
@ -31,17 +31,17 @@
} }
&.error { &.error {
background-color: mix($white, $red, 90%); background-color: $lbry-red-1;
border-color: $red; border-color: $lbry-red-3;
} }
&.info { &.info {
background-color: mix($white, $gray, 90%); background-color: $lbry-gray-1;
border-color: $gray; border-color: $lbry-gray-3;
} }
&.warning { &.warning {
background-color: mix($white, $yellow, 90%); background-color: $lbry-yellow-1;
border-color: $yellow; border-color: $lbry-yellow-3;
} }
} }

10
app/sass/partials/_footer.scss
View file

@ -1,6 +1,6 @@
.footer { .footer {
background-color: $black; background-color: $lbry-black;
color: rgba($white, 0.15); color: rgba($lbry-white, 0.15);
font-size: 1rem; font-size: 1rem;
padding-right: env(safe-area-inset-right); padding-right: env(safe-area-inset-right);
padding-left: env(safe-area-inset-left); padding-left: env(safe-area-inset-left);
@ -11,7 +11,7 @@
width: 3rem; height: 100%; width: 3rem; height: 100%;
right: 0; bottom: 0; right: 0; bottom: 0;
background-image: linear-gradient(90deg, rgba($black, 0), $black 50%, $black); // iOS Safari cannot handle `transparent` background-image: linear-gradient(90deg, rgba($lbry-black, 0), $lbry-black 50%, $lbry-black); // iOS Safari cannot handle `transparent`
content: ""; content: "";
position: absolute; position: absolute;
z-index: 2; z-index: 2;
@ -64,11 +64,11 @@
transition: color 0.2s; transition: color 0.2s;
&:not(:hover) { &:not(:hover) {
color: $white; color: $lbry-white;
} }
&:hover { &:hover {
color: $teal; color: $lbry-teal-3;
} }
} }
} }

22
app/sass/partials/_github-feed.scss
View file

@ -1,6 +1,6 @@
.github-feed { .github-feed {
border-bottom: 1px solid rgba($black, 0.05); border-bottom: 1px solid $lbry-gray-1;
border-left: 1px solid rgba($black, 0.05); border-left: 1px solid $lbry-gray-1;
font-size: 0.8rem; font-size: 0.8rem;
grid-area: github; grid-area: github;
position: relative; position: relative;
@ -56,13 +56,13 @@
width: calc(100% - (1rem + 5%)); width: calc(100% - (1rem + 5%));
top: 2.15rem; left: 0; top: 2.15rem; left: 0;
color: rgba($black, 0.045); color: rgba($lbry-black, 0.045);
font-size: 4rem; font-size: 4rem;
position: absolute; position: absolute;
} }
@media (max-width: 1300px) { @media (max-width: 1300px) {
color: $black; color: $lbry-black;
} }
@media (min-width: 901px) and (max-width: 1300px) { @media (min-width: 901px) and (max-width: 1300px) {
@ -123,16 +123,16 @@
> p:first-of-type { > p:first-of-type {
@media (max-width: 700px) { @media (max-width: 700px) {
box-shadow: 0 2px 5px rgba($black, 0.025); box-shadow: 0 2px 5px $lbry-gray-1;
} }
code { code {
padding: 0.2rem 0.5rem; padding: 0.2rem 0.5rem;
top: -1px; top: -1px;
background-color: $black; background-color: $lbry-black;
border-radius: 3px; border-radius: 3px;
color: $white; color: $lbry-white;
font-size: 80%; font-size: 80%;
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
position: relative; position: relative;
@ -154,8 +154,8 @@
width: 90%; padding: 1rem; width: 90%; padding: 1rem;
top: -3.5rem; left: 5%; top: -3.5rem; left: 5%;
background-color: $white; background-color: $lbry-white;
border: 1px solid rgba($gray, 0.1); border: 1px solid $lbry-gray-1;
border-radius: 3px; border-radius: 3px;
position: relative; position: relative;
white-space: normal; white-space: normal;
@ -164,7 +164,7 @@
} }
.github-feed__event__avatar { .github-feed__event__avatar {
border: 1px solid rgba($gray, 0.1); border: 1px solid $lbry-gray-1;
border-radius: 3px; border-radius: 3px;
object-fit: cover; object-fit: cover;
object-position: center; object-position: center;
@ -179,7 +179,7 @@
} }
.github-feed__event__time { .github-feed__event__time {
color: $gray; color: $lbry-gray-3;
display: block; display: block;
@media (max-width: 700px) { @media (max-width: 700px) {

6
app/sass/partials/_glossary.scss
View file

@ -63,8 +63,8 @@
width: 250px; height: calc(100vh - 4rem); width: 250px; height: calc(100vh - 4rem);
top: 4rem; left: 0; top: 4rem; left: 0;
background-color: $white; background-color: $lbry-white;
border-right: 1px solid rgba($gray, 0.3); border-right: 1px solid $lbry-gray-2;
font-size: 0.8rem; // TODO: Why was !important here? font-size: 0.8rem; // TODO: Why was !important here?
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
@ -78,7 +78,7 @@
} }
.component--glossary-toc-toggle { .component--glossary-toc-toggle {
background-color: mix($gray, $white, 30%); background-color: $lbry-gray-1;
font-size: 0.7rem; font-size: 0.7rem;
position: absolute; position: absolute;
text-orientation: upright; text-orientation: upright;

6
app/sass/partials/_mission-statement.scss
View file

@ -1,8 +1,8 @@
.component--mission-statement { .component--mission-statement {
padding: 1rem 1rem 1rem 1.25rem; padding: 1rem 1rem 1rem 1.25rem;
background-color: rgba($teal, 0.1); background-color: rgba($lbry-teal-1, 0.3);
border-left: 0.5rem solid $teal; border-left: 0.5rem solid $lbry-teal-3;
line-height: 1.55; line-height: 1.55;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
position: relative; position: relative;
@ -17,7 +17,7 @@
} }
.component--mission-statement__title { .component--mission-statement__title {
color: $teal; color: $lbry-teal-3;
display: block; display: block;
letter-spacing: 0.025rem; letter-spacing: 0.025rem;
text-transform: uppercase; text-transform: uppercase;

6
app/sass/partials/_modal.scss
View file

@ -3,7 +3,7 @@
top: 0; right: 0; top: 0; right: 0;
bottom: 0; left: 0; bottom: 0; left: 0;
background-color: rgba($black, 0.5); background-color: rgba($lbry-black, 0.5);
position: fixed; position: fixed;
z-index: 10; z-index: 10;
@ -32,14 +32,14 @@
} }
a { a {
color: $teal; color: $lbry-teal-3;
} }
} }
} }
.modal-wrap { .modal-wrap {
padding: 2rem 1.5rem; padding: 2rem 1.5rem;
background-color: $white; background-color: $lbry-white;
@media (min-width: 501px) { @media (min-width: 501px) {
width: 500px; width: 500px;

14
app/sass/partials/_navigation.scss
View file

@ -2,8 +2,8 @@
width: 100%; width: 100%;
top: 0; left: 0; top: 0; left: 0;
background-color: $white; background-color: $lbry-white;
box-shadow: 0 1px 5px rgba($black, 0.1); box-shadow: 0 1px 5px rgba($lbry-black, 0.1);
padding-right: env(safe-area-inset-right); padding-right: env(safe-area-inset-right);
padding-left: env(safe-area-inset-left); padding-left: env(safe-area-inset-left);
position: fixed; position: fixed;
@ -29,7 +29,7 @@
width: 2rem; height: 4rem; width: 2rem; height: 4rem;
top: 0; right: 0; top: 0; right: 0;
background-image: linear-gradient(90deg, rgba($white, 0), $white 50%, $white); // iOS Safari cannot handle `transparent` background-image: linear-gradient(90deg, rgba($lbry-white, 0), $lbry-white 50%, $lbry-white); // iOS Safari cannot handle `transparent`
content: ""; content: "";
position: fixed; position: fixed;
z-index: 2; z-index: 2;
@ -70,7 +70,7 @@
width: 100%; height: 3px; width: 100%; height: 3px;
left: 0; left: 0;
background-color: $teal; background-color: $lbry-teal-3;
content: ""; content: "";
position: absolute; position: absolute;
transition: bottom 0.2s; transition: bottom 0.2s;
@ -103,17 +103,17 @@
&[href="http://localhost:8000"], &[href="http://localhost:8000"],
&[href="https://lbry.io"] { &[href="https://lbry.io"] {
color: $white; color: $lbry-white;
margin-right: 0.5rem; margin-right: 0.5rem;
padding-right: 1rem; padding-right: 1rem;
padding-left: 1rem; padding-left: 1rem;
&:not(:hover)::after { &:not(:hover)::after {
background-color: $black; background-color: $lbry-black;
} }
&:hover::after { &:hover::after {
background-color: $teal; background-color: $lbry-teal-3;
} }
&::after { &::after {

4
app/sass/partials/_pre.scss
View file

@ -9,7 +9,7 @@ pre {
&:not([class]), &:not([class]),
&.language-text { &.language-text {
background-color: #27283e; background-color: #27283e;
color: $white; color: $lbry-white;
} }
&.language-yaml { &.language-yaml {
@ -25,7 +25,7 @@ pre {
} }
.punctuation { .punctuation {
color: $white; color: $lbry-white;
} }
} }
} }

1
documents/contribute.md
View file

@ -1,6 +1,7 @@
--- ---
title: Contributor's Guide title: Contributor's Guide
--- ---
## Welcome to LBRY! ## Welcome to LBRY!
Interested in working on the LBRY protocol, an official LBRY app, or other LBRY infrastructure? Awesome! This guide will get you started. Interested in working on the LBRY protocol, an official LBRY app, or other LBRY infrastructure? Awesome! This guide will get you started.

29
documents/guides.md
View file

@ -1,29 +0,0 @@
---
title: Quality Guides
---
When contributing to this repo there are existing coding guidelines that you can find [here](/guides/css) (CSS) and [here](/guides/js) (JavaScript). However, here's a high-level overview:
## CSS
- Styles should never override - `:not` and media queries make this possible
- **IDs do not belong in stylesheets**
- Nesting should be a maximum of three levels deep
- BEM is your friend
- Nested includes should be at the top of rules
- CSS parameters in alphabetical order, except for presentation styles
## JS
- Space indentation - Two spaces, makes reading code easy for humans
- Double-quotes - Use single quotes within to avoid escaping
- No unused variables - This one catches tons of bugs!
- Semicolons protect you from yourself
- Space after keyword - `if (condition) {}`
- Space after function name - `function name (arg) { ... }`
- No space in array bracket - `const arr = [1, 2, 3]`
- Always space in block - `const obj = { foo: "bar" }`
- Always `===` instead of `==` - Strict compares are consistent
- No trailing commas

2
documents/resources.md
View file

@ -2,7 +2,7 @@
title: Resources title: Resources
--- ---
<ResourcesLinkGrid /> <ResourcesLinkGrid/>
## Additional Resources ## Additional Resources

7
package.json
View file

@ -2,6 +2,7 @@
"author": "LBRY Team", "author": "LBRY Team",
"dependencies": { "dependencies": {
"@babel/polyfill": "^7.0.0", "@babel/polyfill": "^7.0.0",
"@lbry/color": "^1.0.1",
"@octokit/rest": "^15.13.1", "@octokit/rest": "^15.13.1",
"app-root-path": "^2.1.0", "app-root-path": "^2.1.0",
"async": "^2.6.1", "async": "^2.6.1",
@ -57,11 +58,11 @@
"@babel/preset-env": "^7.1.0", "@babel/preset-env": "^7.1.0",
"@babel/register": "^7.0.0", "@babel/register": "^7.0.0",
"@inc/eslint-config": "^1.0.5", "@inc/eslint-config": "^1.0.5",
"eslint": "^5.6.1", "eslint": "^5.7.0",
"husky": "^1.1.1", "husky": "^1.1.2",
"nodemon": "^1.18.4", "nodemon": "^1.18.4",
"npm-run-all": "^4.1.3", "npm-run-all": "^4.1.3",
"sass": "^1.14.1", "sass": "^1.14.2",
"sass-lint": "^1.12.1", "sass-lint": "^1.12.1",
"snazzy": "^8.0.0", "snazzy": "^8.0.0",
"standardx": "^3.0.1", "standardx": "^3.0.1",