Fixes and added new LBRY color module

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

View file

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

View file

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

View file

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

View file

@ -93,10 +93,10 @@ img {
&::after {
width: 100%; height: 100%;
background-color: $white;
background-color: $lbry-white;
background-image: url("/assets/media/images/missing.png");
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: "";
display: block;
}
@ -182,7 +182,7 @@ button::-moz-focus-inner {
// Get rid of yellow autofill background
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 {
outline: none;

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;

View file

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

View file

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

View file

@ -57,17 +57,17 @@
}
}
@mixin underline($text-color: #000, $whitespace-color: #fff) {
@include selection($text-color, $whitespace-color);
@mixin underline($text-color: #000, $lbry-whitespace-color: #fff) {
@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-repeat: no-repeat, no-repeat, repeat-x;
background-size: 0.05rem 1px, 0.05rem 1px, 1px 1px;
box-decoration-break: clone;
display: inline;
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
background-position: 0 90%, 100% 90%, 0 90%;

View file

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

View file

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

View file

@ -36,7 +36,7 @@ body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
hr {
width: 100%; height: 1px;
background-color: rgba($black, 0.1);
background-color: rgba($lbry-black, 0.1);
border: none;
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;
align-items: center;
background-color: $black;
background-color: $lbry-black;
// 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-position: center;
@ -62,8 +62,8 @@ body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
h1 {
padding: 0.4rem 1rem;
background-color: $white;
border: 1px solid rgba($black, 0.1);
background-color: $lbry-white;
border: 1px solid rgba($lbry-black, 0.1);
box-decoration-break: clone;
display: inline;
font-weight: normal;
@ -82,7 +82,7 @@ body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
}
.features {
border-bottom: 1px solid rgba($black, 0.05);
border-bottom: 1px solid rgba($lbry-black, 0.05);
grid-area: features;
}
@ -106,13 +106,13 @@ body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
@media (min-width: 1301px) {
top: -0.85rem; left: -2rem;
color: rgba($black, 0.045);
color: rgba($lbry-black, 0.045);
font-size: 4rem;
position: absolute;
}
@media (max-width: 1300px) {
color: $black;
color: $lbry-black;
}
@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,
.contribute,
.develop {
border-bottom: 1px solid rgba($black, 0.05);
border-bottom: 1px solid rgba($lbry-black, 0.05);
}
.intro,
@ -238,7 +238,7 @@ body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
}
&:hover {
color: $teal;
color: $lbry-teal-3;
}
}
}

View file

@ -14,11 +14,11 @@
@include center;
width: 100%;
background-color: $black;
background-color: $lbry-black;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: $white;
color: $lbry-white;
padding-right: env(safe-area-inset-right);
padding-left: env(safe-area-inset-left);
position: relative;
@ -26,7 +26,7 @@
.page__header__title {
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) {
font-size: 3rem;

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,6 +1,6 @@
.footer {
background-color: $black;
color: rgba($white, 0.15);
background-color: $lbry-black;
color: rgba($lbry-white, 0.15);
font-size: 1rem;
padding-right: env(safe-area-inset-right);
padding-left: env(safe-area-inset-left);
@ -11,7 +11,7 @@
width: 3rem; height: 100%;
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: "";
position: absolute;
z-index: 2;
@ -64,11 +64,11 @@
transition: color 0.2s;
&:not(:hover) {
color: $white;
color: $lbry-white;
}
&:hover {
color: $teal;
color: $lbry-teal-3;
}
}
}

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -1,6 +1,7 @@
---
title: Contributor's Guide
---
## 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.

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

View file

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

View file

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