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