Merge pull request #260 from lbryio/237-responsiveness
Responsive fixes
This commit is contained in:
netop:// ウェッブ
GitHub
commit
06ed08afdc
|
|
@ -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`);
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
@media (min-width: 801px) {
|
||||
width: calc(100% - 200px);
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.api-documentation {
|
||||
display: grid;
|
||||
|
||||
@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 {
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
.ecosystem {
|
||||
display: grid;
|
||||
font-size: 1rem;
|
||||
grid-gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
padding-top: 1rem;
|
||||
|
||||
@media (min-width: 951px) {
|
||||
display: grid;
|
||||
grid-gap: 1rem;
|
||||
}
|
||||
|
||||
&:not(.expand-left):not(.expand-right) {
|
||||
@media (min-width: 951px) {
|
||||
grid-template-columns: 144px auto 144px;
|
||||
|
||||
.ecosystem__submodules {
|
||||
|
|
@ -13,6 +17,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 950px) {
|
||||
.ecosystem__submodules {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.expand-left {
|
||||
grid-template-columns: 50% auto;
|
||||
|
||||
|
|
@ -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,26 +64,37 @@
|
|||
position: relative;
|
||||
|
||||
> div {
|
||||
float: right;
|
||||
font-size: 1rem;
|
||||
padding-top: 1.95rem;
|
||||
padding-right: 3rem;
|
||||
position: relative;
|
||||
|
||||
@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;
|
||||
|
||||
@media (min-width: 951px) {
|
||||
right: 3rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media (max-width: 950px) {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
|
|
@ -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,8 +300,10 @@
|
|||
z-index: 2;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
@media (min-width: 951px) {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.on):not(.active) {
|
||||
color: $lbry-gray-1;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,9 +3,11 @@
|
|||
|
||||
.glossary {
|
||||
main {
|
||||
@media (min-width: 801px) {
|
||||
width: calc(100vw - 200px);
|
||||
margin-left: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.page__header-wrap,
|
||||
.page__content {
|
||||
|
|
@ -31,6 +33,10 @@
|
|||
position: fixed;
|
||||
z-index: 1;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style-type: none !important;
|
||||
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
---
|
||||
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!
|
||||
|
|
|
|||
Loading…
Reference in a new issue