LBRYCommunity/lbry.tech
1
0
Fork 0
Code Issues 13 Pull requests 8 Projects Releases Packages Wiki Activity

Merge branch 'master' of github.com:lbryio/lbry.tech

Browse source
This commit is contained in:
Kristian Polso 2018-05-11 11:00:17 +03:00
commit 3170d45868
6 changed files with 238 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

213
.vuepress/scss/pages/_home.scss
View file

@ -10,13 +10,16 @@
}
h2 {
font-size: 1.75rem;
font-weight: 400;
margin-bottom: 4rem;
@media (min-width: 851px) {
font-size: 1.75rem;
}
h3 {
font-size: 1.5rem;
@media (max-width: 850px) {
font-size: 1.25rem;
}
}
hr {
@ -37,6 +40,10 @@
height: calc(50vh - 4rem);
justify-content: center;
@media (max-width: 850px) {
background-size: cover;
}
h2 {
background-color: $white;
border: 1px solid rgba($black, 0.1);
@ -49,12 +56,19 @@
&.alert {
background-color: $yellow;
font-size: 1rem;
line-height: 1.33;
padding-top: 1rem;
padding-bottom: 1rem;
text-align: center;
@media (min-width: 901px) {
font-size: 1rem;
}
@media (max-width: 900px) {
font-size: 0.8rem;
}
a {
font-weight: 600;
}
@ -75,9 +89,24 @@
position: relative;
text-align: center;
vertical-align: top;
@media (min-width: 651px) {
width: 50%;
}
@media (max-width: 650px) {
width: 100%;
&:first-of-type {
padding-bottom: 1rem;
}
&:last-of-type {
padding-top: 1rem;
}
}
}
.home__feature__title {
@ -114,22 +143,46 @@
}
h3 {
letter-spacing: 0.1rem;
line-height: 1;
text-transform: uppercase;
@media (min-width: 1301px) {
top: -0.85rem; left: -2rem;
color: rgba($black, 0.045);
font-size: 4rem;
letter-spacing: 0.1rem;
line-height: 1;
position: absolute;
text-transform: uppercase;
}
@media (max-width: 1300px) {
color: $black;
}
@media (min-width: 901px) and (max-width: 1300px) {
font-size: 3rem;
}
@media (max-width: 900px) {
font-size: 2rem;
margin-bottom: 1rem;
}
}
p {
font-size: 1.5rem;
line-height: 1.55;
margin-bottom: 1.5rem;
max-width: 1000px;
@media (min-width: 901px) {
font-size: 1.5rem;
line-height: 1.55;
}
@media (max-width: 900px) {
font-size: 1.25rem;
line-height: 1.33;
}
&:first-of-type {
padding-top: 0.5rem;
}
@ -148,12 +201,15 @@
border-bottom: 1px solid rgba($black, 0.05);
}
&.community {
&.community,
&.contribute {
p {
@media (min-width: 1301px) {
margin-right: auto;
margin-left: auto;
text-align: center;
}
}
ul {
list-style-type: none;
@ -163,30 +219,44 @@
@include clearfix;
}
@media (min-width: 901px) {
font-size: 1.5rem;
}
@media (min-width: 751px) and (max-width: 900px) {
font-size: 1.25rem;
}
@media (max-width: 750px) {
font-size: 1rem;
}
li {
float: left;
font-size: 1.5rem;
padding-top: 5rem;
position: relative;
text-align: center;
width: calc(100% / 3);
&::before {
width: 100%; height: 100%;
top: 0; left: 0;
background-position: center 0;
background-repeat: no-repeat;
background-size: 5rem;
content: "";
position: absolute;
@media (max-width: 750px) {
margin-bottom: 2rem;
min-width: 8rem;
}
a {
display: block;
position: relative;
padding-top: 4rem;
transition: color 0.2s;
&::before {
width: 100%; height: 100%;
background-position: center 0;
background-repeat: no-repeat;
content: "";
left: 0;
position: absolute;
}
&:not(:hover) {
color: inherit;
}
@ -195,90 +265,79 @@
color: $teal;
}
}
&:nth-child(1)::before {
background-image: url("../media/svg/discord.svg");
}
&:nth-child(2)::before {
background-image: url("../media/svg/reddit.svg");
}
&:nth-child(3)::before {
background-image: url("../media/svg/slack.svg");
}
}
}
}
&.contribute {
p {
margin-right: auto;
margin-left: auto;
text-align: center;
}
ul {
list-style-type: none;
padding-top: 1rem;
&::after {
@include clearfix;
}
li {
float: left;
font-size: 1.5rem;
padding-top: 4rem;
position: relative;
text-align: center;
width: calc(100% / 5);
&::before {
width: 100%; height: 100%;
top: 0; left: 0;
a::before {
@media (min-width: 901px) {
background-size: 4rem;
top: -1rem;
}
background-position: center 0;
background-repeat: no-repeat;
@media (max-width: 900px) {
background-size: 3rem;
content: "";
position: absolute;
}
a {
display: block;
position: relative;
transition: color 0.2s;
&:not(:hover) {
color: inherit;
}
&:hover {
color: $teal;
top: 0;
}
}
&:nth-child(1)::before {
&:nth-child(1) a::before {
background-image: url("../media/svg/flag.svg");
}
&:nth-child(2)::before {
&:nth-child(2) a::before {
background-image: url("../media/svg/keyboard.svg");
}
&:nth-child(3)::before {
&:nth-child(3) a::before {
background-image: url("../media/svg/anchor.svg");
}
&:nth-child(4)::before {
&:nth-child(4) a::before {
background-image: url("../media/svg/chat.svg");
}
&:nth-child(5)::before {
&:nth-child(5) a::before {
background-image: url("../media/svg/monitor.svg");
}
}
}
}
&.community {
ul {
li {
width: calc(100% / 3);
a::before {
@media (min-width: 901px) {
background-size: 6rem;
top: -2rem;
}
@media (max-width: 900px) {
background-size: 4rem;
top: -0.5rem;
}
}
&:nth-child(1) a::before {
background-image: url("../media/svg/discord.svg");
}
&:nth-child(2) a::before {
background-image: url("../media/svg/reddit.svg");
}
&:nth-child(3) a::before {
background-image: url("../media/svg/slack.svg");
}
}
}
}
}

40
.vuepress/scss/pages/_page.scss
View file

@ -12,21 +12,27 @@
.page__header {
@include center;
width: 100%; height: 100px;
background-image: url("../media/images/background-a.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: $white;
position: relative;
width: 100%;
}
.page__header__title {
font-size: 3rem;
font-weight: 300;
line-height: 6.5rem;
text-shadow: 1px 1px 2px rgba($black, 0.3);
@media (min-width: 901px) {
font-size: 3rem;
}
@media (max-width: 900px) {
font-size: 2rem;
}
}
@ -62,12 +68,7 @@
text-transform: uppercase;
}
p, ol, ul {
font-size: 1.25rem;
line-height: 1.5;
margin-bottom: 2rem;
position: relative;
p, ol, ul, table {
code {
background-color: $black;
border-radius: 3px;
@ -79,7 +80,26 @@
}
}
ol, ul {
p, ol, ul {
line-height: 1.33;
margin-bottom: 2rem;
position: relative;
@media (min-width: 901px) {
font-size: 1.25rem;
}
@media (max-width: 900px) {
font-size: 1.05rem;
}
}
ol {
list-style-type: lower-roman;
padding-left: 1.6rem;
}
ul {
padding-left: 1.25rem;
}

27
.vuepress/scss/partials/_footer.scss
View file

@ -2,18 +2,41 @@
background-color: $black;
color: rgba($white, 0.15);
font-size: 1rem;
> div:first-of-type {
@media (max-width: 900px) {
overflow: auto;
overflow-scrolling: touch;
white-space: nowrap;
width: 102%;
}
}
ul {
list-style-type: none;
padding-top: 2rem;
padding-bottom: 2rem;
ul {
@media (min-width: 901px) {
align-items: stretch;
display: flex;
flex-flow: row wrap;
list-style-type: none;
}
li {
padding-right: 0.5rem;
padding-left: 0.5rem;
vertical-align: bottom;
@media (max-width: 900px) {
display: inline-block;
transform: translate3d(0, 0, 0);
transition: opacity 0.2s 0.2s ease, transform 0.4s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
&:last-of-type {
margin-right: 3rem;
}
}
&:first-of-type {
flex: 1;

32
.vuepress/scss/partials/_navigation.scss
View file

@ -8,10 +8,31 @@
z-index: 10;
> div:first-of-type {
position: relative;
@media (min-width: 701px) {
align-items: stretch;
display: flex;
flex-flow: row wrap;
}
@media (max-width: 700px) {
overflow: auto;
overflow-scrolling: touch;
white-space: nowrap;
width: 102%;
&::before {
width: 2rem; height: 4rem;
top: 0; right: 0;
background-image: linear-gradient(90deg, rgba($white, 0), $white 50%, $white); // iOS Safari cannot handle `transparent`
content: "";
position: fixed;
z-index: 2;
}
}
}
}
.navigation__item {
@ -20,6 +41,17 @@
padding-left: 0.5rem;
position: relative;
@media (max-width: 700px) {
display: inline-block;
transform: translate3d(0, 0, 0);
transition: opacity 0.2s 0.2s ease, transform 0.4s 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
vertical-align: top;
&:last-of-type {
margin-right: 3rem;
}
}
&:first-of-type {
@include hide-text;
width: 10rem; height: 3rem;

1
.vuepress/theme/Layout.vue
View file

@ -104,7 +104,6 @@
<template v-else>
<div>
<article class="page" itemtype="http://schema.org/BlogPosting">
<header class="page__header">
<div class="page__header-wrap">
<div class="inner-wrap">

2
README.md
View file

@ -25,7 +25,7 @@ Visit [beta.LBRY.tech](https://beta.lbry.tech) for hosted version for this repos
## Running from Source
### Prequisities
### Prerequisities
* [Node](https://nodejs.org/) (version >= 9)
* [Yarn](https://yarnpkg.com/)