diff --git a/app/helpers/github.js b/app/helpers/github.js
index 6add98a..75b73ba 100644
--- a/app/helpers/github.js
+++ b/app/helpers/github.js
@@ -34,7 +34,7 @@ if (process.env.GITHUB_OAUTH_TOKEN) {
octokit = new Octokit({
auth: `token ${process.env.GITHUB_OAUTH_TOKEN}`
});
-} else process.stdout.write(`${color.red("[missing]")} GitHub token`);
+} else process.stdout.write(`${color.red("[missing]")} GitHub token\n`);
if (process.env.REDISCLOUD_URL) {
client = redis.createClient(process.env.REDISCLOUD_URL);
@@ -49,7 +49,7 @@ if (process.env.REDISCLOUD_URL) {
)
;
});
-} else process.stdout.write(`${color.red("[missing]")} Redis client URL`);
+} else process.stdout.write(`${color.red("[missing]")} Redis client URL\n`);
diff --git a/app/sass/pages/_api.scss b/app/sass/pages/_api.scss
index ab02d72..515b024 100644
--- a/app/sass/pages/_api.scss
+++ b/app/sass/pages/_api.scss
@@ -1,10 +1,3 @@
-/*!
- * API Wrapper
- *
- * @class .__slate
- * @selector {::after}
-**/
-
.__slate {
width: 100%;
height: 100%;
@@ -29,34 +22,20 @@
}
}
-
-/*!
- * API | Table of Contents
- *
- * @class .api-toc
- * @class .api-toc__search
- * @class .api-toc__search-field
- *
- * @class .api-toc__search-clear
- * @state {.active}
- *
- * @class .api-toc__items
- *
- * @class .api-toc__item
- * @state {:hover}
-**/
-
.api-toc {
width: 200px; height: calc(100vh - 4rem); // navigation is 4rem tall
bottom: 0; left: 0;
background-color: $lbry-white;
border-right: 1px solid $lbry-gray-1;
- // float: left;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
z-index: 3;
+
+ @media (max-width: 800px) {
+ display: none;
+ }
}
.api-toc__search {
@@ -68,6 +47,7 @@
padding: 0.25rem calc(2rem + 4px) 0.25rem 0.75rem;
border-bottom: 1px solid $lbry-gray-1;
+ border-radius: 0; // TODO: Put this rule in components on inputs
font-size: 0.8rem;
line-height: 2rem;
}
@@ -117,13 +97,28 @@
}
.api-content {
- width: calc(100% - 200px);
- float: right;
+ @media (min-width: 801px) {
+ width: calc(100% - 200px);
+ float: right;
+ }
}
.api-documentation {
display: grid;
- grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
+
+ @media (min-width: 1201px) {
+ grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));
+ }
+
+ @media (max-width: 1200px) {
+ grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
+
+ div {
+ &:empty {
+ display: none;
+ }
+ }
+ }
h1 {
font-size: 1.5rem;
@@ -145,11 +140,25 @@
p,
ol,
ul {
- font-size: 1rem;
line-height: 1.5;
margin-bottom: 1rem;
}
+ ol,
+ ul {
+ @media (min-width: 801px) {
+ font-size: 1rem;
+ }
+
+ @media (max-width: 800px) {
+ font-size: 0.8rem;
+ }
+ }
+
+ p {
+ font-size: 1rem;
+ }
+
pre {
font-size: 0.8rem;
}
@@ -221,11 +230,13 @@
.left {
width: 30%;
-
- border-right: 1px solid $lbry-gray-2;
float: left;
word-wrap: break-word;
+ @media (min-width: 801px) {
+ border-right: 1px solid $lbry-gray-2;
+ }
+
span {
color: $lbry-gray-3;
font-size: 0.8rem;
@@ -270,6 +281,9 @@
color: $lbry-white;
position: sticky;
z-index: 10;
+
+ // GOOD OL' SAFARI
+ position: -webkit-sticky; // sass-lint:disable-line no-duplicate-properties
}
.api-content__item {
diff --git a/app/sass/pages/_home.scss b/app/sass/pages/_home.scss
index cd962f0..2918acd 100644
--- a/app/sass/pages/_home.scss
+++ b/app/sass/pages/_home.scss
@@ -63,7 +63,7 @@ body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
padding: 0.4rem 1rem;
background-color: $lbry-white;
- border: 1px solid rgba($lbry-black, 0.1);
+ border: 1px solid $lbry-gray-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($lbry-black, 0.05);
+ border-bottom: 1px solid $lbry-gray-1;
grid-area: features;
}
@@ -140,10 +140,17 @@ body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
}
@media (max-width: 900px) {
- font-size: 1.25rem;
line-height: 1.33;
}
+ @media (min-width: 501px) and (max-width: 900px) {
+ font-size: 1.25rem;
+ }
+
+ @media (max-width: 500px) {
+ font-size: 1rem;
+ }
+
&:first-of-type {
padding-top: 0.5rem;
}
@@ -159,12 +166,13 @@ body.home { // sass-lint:disable-line no-qualifying-elements // TODO: FIX THIS
.docs,
.contribute,
.develop {
- border-bottom: 1px solid rgba($lbry-black, 0.05);
+ border-bottom: 1px solid $lbry-gray-1;
}
.intro,
.docs {
@media (min-width: 1301px) {
+ padding-right: 5%;
padding-left: 10%;
}
}
diff --git a/app/sass/partials/_ecosystem.scss b/app/sass/partials/_ecosystem.scss
index 0bf6656..ab689c5 100644
--- a/app/sass/partials/_ecosystem.scss
+++ b/app/sass/partials/_ecosystem.scss
@@ -1,15 +1,27 @@
.ecosystem {
- display: grid;
font-size: 1rem;
- grid-gap: 1rem;
margin-bottom: 2rem;
padding-top: 1rem;
- &:not(.expand-left):not(.expand-right) {
- grid-template-columns: 144px auto 144px;
+ @media (min-width: 951px) {
+ display: grid;
+ grid-gap: 1rem;
+ }
- .ecosystem__submodules {
- padding-top: 2.5rem;
+ &:not(.expand-left):not(.expand-right) {
+ @media (min-width: 951px) {
+ grid-template-columns: 144px auto 144px;
+
+ .ecosystem__submodules {
+ padding-top: 2.5rem;
+ }
+ }
+
+ @media (max-width: 950px) {
+ .ecosystem__submodules {
+ display: flex;
+ justify-content: space-between;
+ }
}
}
@@ -20,16 +32,6 @@
.ecosystem__submodule:not(.active) {
display: none;
}
-
- .ecosystem__submodules:first-of-type { // TODO: Figure out how to write this in a way that doesn't override
- @media (min-resolution: 96dpi) {
- height: 383px;
- }
-
- @media (min-resolution: 192dpi) {
- height: 378px;
- }
- }
}
&.expand-right {
@@ -39,16 +41,13 @@
.ecosystem__submodule:not(.active) {
display: none;
}
+ }
+}
- .ecosystem__submodules:last-of-type {
- @media (min-resolution: 96dpi) {
- height: 383px;
- }
-
- @media (min-resolution: 192dpi) {
- height: 378px;
- }
- }
+.ecosystem__modules {
+ @media (max-width: 950px) {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
}
}
@@ -65,24 +64,35 @@
position: relative;
> div {
- float: right;
font-size: 1rem;
padding-top: 1.95rem;
- padding-right: 3rem;
position: relative;
- text-align: right;
+
+ @media (min-width: 951px) {
+ float: right;
+ padding-right: 3rem;
+ text-align: right;
+ }
&::before {
@include font-serif;
width: 100%;
- top: 0.9rem; right: 3rem;
+ top: 0.9rem;
content: "key repositories";
font-size: 80%;
font-style: italic;
opacity: 0.3;
position: absolute;
- text-align: right;
+
+ @media (min-width: 951px) {
+ right: 3rem;
+ text-align: right;
+ }
+
+ @media (max-width: 950px) {
+ left: 0;
+ }
}
span {
@@ -149,19 +159,29 @@
}
.__close {
- top: 2rem;
- transform: rotate(45deg);
+ transform: translateY(-0.25rem) rotate(45deg);
z-index: 0;
+
+ @media (max-width: 950px) {
+ display: none;
+ }
}
}
&.active {
- padding: 1.9rem 2rem;
+ padding: 2rem;
h2 {
- font-size: 3rem;
margin-bottom: 1rem;
+ @media (min-width: 951px) {
+ font-size: 3rem;
+ }
+
+ @media (max-width: 950px) {
+ font-size: 1.5rem;
+ }
+
> span {
cursor: default;
@@ -176,7 +196,7 @@
}
.__close {
- top: 2.35rem;
+ transform: translateY(-0.25rem);
z-index: 3;
}
}
@@ -280,7 +300,9 @@
z-index: 2;
&:not(:last-of-type) {
- margin-bottom: 1rem;
+ @media (min-width: 951px) {
+ margin-bottom: 1rem;
+ }
}
&:not(.on):not(.active) {
diff --git a/app/sass/partials/_email-subscribe.scss b/app/sass/partials/_email-subscribe.scss
index a65dfa2..f44a35a 100644
--- a/app/sass/partials/_email-subscribe.scss
+++ b/app/sass/partials/_email-subscribe.scss
@@ -1,5 +1,5 @@
.newsletter-cta {
- background-color: $lbry-gray-2;
+ background-color: $lbry-gray-1;
padding-top: 1rem;
padding-bottom: 1rem;
text-align: center;
diff --git a/app/sass/partials/_github-feed.scss b/app/sass/partials/_github-feed.scss
index f9305c1..6ea2846 100644
--- a/app/sass/partials/_github-feed.scss
+++ b/app/sass/partials/_github-feed.scss
@@ -1,6 +1,5 @@
.github-feed {
border-bottom: 1px solid $lbry-gray-1;
- border-left: 1px solid $lbry-gray-1;
font-size: 0.8rem;
grid-area: github;
position: relative;
@@ -14,6 +13,7 @@
}
@media (min-width: 1001px) {
+ border-left: 1px solid $lbry-gray-1;
padding-right: 10%;
padding-bottom: 2rem;
padding-left: 2rem;
@@ -119,11 +119,15 @@
font-weight: 700;
margin-bottom: 0.5rem;
+
+ @media (max-width: 700px) {
+ display: block;
+ }
}
> p:first-of-type {
@media (max-width: 700px) {
- box-shadow: 0 2px 5px $lbry-gray-1;
+ box-shadow: 0 2px 5px rgba($lbry-black, 0.05);
}
code {
@@ -157,6 +161,7 @@
background-color: $lbry-white;
border: 1px solid $lbry-gray-1;
border-radius: 3px;
+ overflow-x: hidden;
position: relative;
white-space: normal;
}
diff --git a/app/sass/partials/_glossary.scss b/app/sass/partials/_glossary.scss
index 70f92d2..911191c 100644
--- a/app/sass/partials/_glossary.scss
+++ b/app/sass/partials/_glossary.scss
@@ -3,8 +3,10 @@
.glossary {
main {
- width: calc(100vw - 200px);
- margin-left: 200px;
+ @media (min-width: 801px) {
+ width: calc(100vw - 200px);
+ margin-left: 200px;
+ }
}
.page__header-wrap,
@@ -31,6 +33,10 @@
position: fixed;
z-index: 1;
+ @media (max-width: 800px) {
+ display: none;
+ }
+
li {
list-style-type: none !important;
diff --git a/app/sass/partials/_link-grid.scss b/app/sass/partials/_link-grid.scss
index 5a754ec..4d75959 100644
--- a/app/sass/partials/_link-grid.scss
+++ b/app/sass/partials/_link-grid.scss
@@ -30,8 +30,15 @@
}
.link-grid__title {
- font-size: 2rem;
margin-bottom: 0.5rem;
+
+ @media (min-width: 501px) {
+ font-size: 2rem;
+ }
+
+ @media (max-width: 500px) {
+ font-size: 1.5rem;
+ }
}
.link-grid__description {
diff --git a/app/sass/partials/_pre.scss b/app/sass/partials/_pre.scss
index 09d9312..29c8b91 100644
--- a/app/sass/partials/_pre.scss
+++ b/app/sass/partials/_pre.scss
@@ -1,11 +1,17 @@
pre {
- padding: 2rem;
-
line-height: 1.33;
margin-bottom: 2rem;
overflow-x: auto;
overflow-y: hidden;
+ @media (min-width: 801px) {
+ padding: 2rem;
+ }
+
+ @media (max-width: 800px) {
+ padding: 1rem;
+ }
+
&:not([class]),
&.language-text {
background-color: #27283e;
diff --git a/app/views/api.js b/app/views/api.js
index 34fa477..741af01 100644
--- a/app/views/api.js
+++ b/app/views/api.js
@@ -49,7 +49,7 @@ export default async(state) => {
</aside>
<section class="api-content">
<div class="api-documentation" id="toc-content">
- <div> </div>
+ <div></div>
<nav class="api-content__items">
<button class="api-content__item" id="toggle-curl" type="button">curl</button>
<button class="api-content__item" id="toggle-lbrynet" type="button">lbrynet</button>
diff --git a/documents/resources/claimtrie.md b/documents/resources/claimtrie.md
index 95acb7c..108147a 100644
--- a/documents/resources/claimtrie.md
+++ b/documents/resources/claimtrie.md
@@ -1,6 +1,6 @@
---
title: Merkle Claim Trie
-description: Publishes to the LBRY network get placed into a Merkle Claim Trie. Learn what that is and why trie is not a typo in this resource article.
+description: Publishes to the LBRY network get placed into a Merkle Claim Trie. Learn what that is and why trie is not a typo in this resource article.
---
This article will discuss how the data structures that organize claims by names work, how proofs are generated/verified, and how consensus on the state of the trie is represented.
diff --git a/documents/resources/setup-videos.md b/documents/resources/setup-videos.md
index 0f43340..1e5adda 100644
--- a/documents/resources/setup-videos.md
+++ b/documents/resources/setup-videos.md
@@ -1,16 +1,20 @@
+---
+title: Developer Setup Intro
+---
+
# Getting started with LBRY development
-Having trouble with getting your LBRY development environment setup or do you prefer following along with a video? Well you're in luck...we have setup videos for many of projects!
+Having trouble with getting your LBRY development environment setup or do you prefer following along with a video? Well you're in luck...we have setup videos for many of projects!
## Desktop Application
-Check out [our video tutorial](/resources/video-lbrydesktop) to setup the [Desktop app](https://github.com/lbryio/lbry-desktop) development environment.
+Check out [our video tutorial](/resources/video-lbrydesktop) to setup the [Desktop app](https://github.com/lbryio/lbry-desktop) development environment.
## Android Application
-Check out [our video tutorial](/resources/video-lbryandroid) to setup the [Android app](https://github.com/lbryio/lbry-android) development environment.
+Check out [our video tutorial](/resources/video-lbryandroid) to setup the [Android app](https://github.com/lbryio/lbry-android) development environment.
## LBRY SDK
-Check out [our video tutorial](/resources/video-lbrysdk) to setup the [LBRY SDK](https://github.com/lbryio/lbry) development environment.
+Check out [our video tutorial](/resources/video-lbrysdk) to setup the [LBRY SDK](https://github.com/lbryio/lbry) development environment.
## LBRY Blockchain
Check out [our video tutorial](/resources/video-lbrycrd) to setup the [LBRY Blockchain](https://github.com/lbryio/lbrycrd) development environment.