Fixes and added new LBRY color module
This commit is contained in:
ポール ウェッブ
parent
1d43422b77
commit
a5387f592f
28 changed files with 207 additions and 252 deletions
|
|
@ -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/", "");
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
@charset "utf-8";
|
||||
|
||||
@import "../../node_modules/@lbry/color/lbry-color";
|
||||
|
||||
@import
|
||||
"init/colors",
|
||||
"init/base",
|
||||
"init/mixins",
|
||||
"init/markdown",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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: "";
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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,7 +2,7 @@
|
|||
title: Resources
|
||||
---
|
||||
|
||||
<ResourcesLinkGrid />
|
||||
<ResourcesLinkGrid/>
|
||||
|
||||
## Additional Resources
|
||||
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue