Merge pull request #260 from lbryio/237-responsiveness

Responsive fixes
This commit is contained in:
netop:// ウェッブ 2019-02-19 17:47:51 -06:00 committed by GitHub
commit 06ed08afdc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 159 additions and 87 deletions

View file

@ -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`);

View file

@ -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 {

View file

@ -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%;
}
}

View file

@ -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) {

View file

@ -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;

View file

@ -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;
}

View file

@ -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;

View file

@ -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 {

View file

@ -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;

View file

@ -49,7 +49,7 @@ export default async(state) => {
</aside>
<section class="api-content">
<div class="api-documentation" id="toc-content">
<div>&nbsp;</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>

View file

@ -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.

View file

@ -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.