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) => {
-
 
+