Merge pull request #35 from lbryio/redesign

Redesign of LBRY.tech
This commit is contained in:
Kristian Polso 2018-05-07 10:51:10 +03:00 committed by GitHub
commit 98d6ee4d3d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 1079 additions and 84 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

3
.vuepress/media/svg/anchor.svg Executable file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M45, 19a3, 3, 0, 1, 0-2.82-4H28.9a5, 5, 0, 0, 0-9.8, 0H5.82a3, 3, 0, 1, 0, 0, 2h9.1q-0.77.46-1.5, 1a18.48, 18.48, 0, 0, 0-6.55, 9, 5, 5, 0, 1, 0, 2, .35A16.4, 16.4, 0, 0, 1, 19.18, 17.24a5, 5, 0, 0, 0, 9.65, 0A16.36, 16.36, 0, 0, 1, 39.11, 27.38a5, 5, 0, 1, 0, 2-.37, 18.22, 18.22, 0, 0, 0-8-10h9.07A3, 3, 0, 0, 0, 45, 19ZM10, 32a3, 3, 0, 1, 1-3-3A3, 3, 0, 0, 1, 10, 32ZM24, 19a3, 3, 0, 1, 1, 3-3A3, 3, 0, 0, 1, 24, 19ZM44, 32a3, 3, 0, 1, 1-3-3A3, 3, 0, 0, 1, 44, 32Z"/>
</svg>

After

Width:  |  Height:  |  Size: 550 B

3
.vuepress/media/svg/chat.svg Executable file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M34, 14V0H0V35l11.35-9H14v5a9, 9, 0, 0, 0, 9, 9H36.65L48, 48.08V14H34ZM10.65, 24L2, 30.92V2H32V17a7, 7, 0, 0, 1-7, 7H10.65ZM46, 44l-8.65-6H23a7, 7, 0, 0, 1-7-7V26h9a9, 9, 0, 0, 0, 9-9V16H46V44Z"/>
</svg>

After

Width:  |  Height:  |  Size: 276 B

View file

@ -0,0 +1,4 @@
<svg viewBox="0 0 245 240" xmlns="http://www.w3.org/2000/svg">
<path d="M104.4, 103.9c-5.7, 0 -10.2, 5 -10.2, 11.1c0, 6.1 4.6, 11.1 10.2, 11.1c5.7, 0 10.2, -5 10.2, -11.1c0.1, -6.1 -4.5, -11.1 -10.2, -11.1Zm36.5, 0c-5.7, 0 -10.2, 5 -10.2, 11.1c0, 6.1 4.6, 11.1 10.2, 11.1c5.7, 0 10.2, -5 10.2, -11.1c0, -6.1 -4.5, -11.1 -10.2, -11.1Z"/>
<path d="M189.5, 20l-134, 0c-11.3, 0 -20.5, 9.2 -20.5, 20.6l0, 135.2c0, 11.4 9.2, 20.6 20.5, 20.6l113.4, 0l-5.3, -18.5l12.8, 11.9l12.1, 11.2l21.5, 19l0, -179.4c0, -11.4 -9.2, -20.6 -20.5, -20.6Zm-38.6, 130.6c0, 0 -3.6, -4.3 -6.6, -8.1c13.1, -3.7 18.1, -11.9 18.1, -11.9c-4.1, 2.7 -8, 4.6 -11.5, 5.9c-5, 2.1 -9.8, 3.5 -14.5, 4.3c-9.6, 1.8 -18.4, 1.3 -25.9, -0.1c-5.7, -1.1 -10.6, -2.7 -14.7, -4.3c-2.3, -0.9 -4.8, -2 -7.3, -3.4c-0.3, -0.2 -0.6, -0.3 -0.9, -0.5c-0.2, -0.1 -0.3, -0.2 -0.4, -0.3c-1.8, -1 -2.8, -1.7 -2.8, -1.7c0, 0 4.8, 8 17.5, 11.8c-3, 3.8 -6.7, 8.3 -6.7, 8.3c-22.1, -0.7 -30.5, -15.2 -30.5, -15.2c0, -32.2 14.4, -58.3 14.4, -58.3c14.4, -10.8 28.1, -10.5 28.1, -10.5l1, 1.2c-18, 5.2 -26.3, 13.1 -26.3, 13.1c0, 0 2.2, -1.2 5.9, -2.9c10.7, -4.7 19.2, -6 22.7, -6.3c0.6, -0.1 1.1, -0.2 1.7, -0.2c6.1, -0.8 13, -1 20.2, -0.2c9.5, 1.1 19.7, 3.9 30.1, 9.6c0, 0 -7.9, -7.5 -24.9, -12.7l1.4, -1.6c0, 0 13.7, -0.3 28.1, 10.5c0, 0 14.4, 26.1 14.4, 58.3c0, 0 -8.5, 14.5 -30.6, 15.2Z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

3
.vuepress/media/svg/flag.svg Executable file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M44, 0H4L19, 48l1.91-.6L14.52, 26.81ZM7, 2H38.83l-25, 22.7Z"/>
</svg>

After

Width:  |  Height:  |  Size: 142 B

View file

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M0, 8V31a9, 9, 0, 0, 0, 9, 9H39a9, 9, 0, 0, 0, 9-9V8H0ZM46, 31a7, 7, 0, 0, 1-7, 7H9a7, 7, 0, 0, 1-7-7V10H46V31Z"/>
<rect x="6" y="28" width="4" height="4"/>
<rect x="38" y="28" width="4" height="4"/>
<rect x="6" y="14" width="4" height="4"/>
<rect x="14" y="14" width="4" height="4"/>
<rect x="22" y="14" width="4" height="4"/>
<rect x="10" y="21" width="4" height="4"/>
<rect x="18" y="21" width="4" height="4"/>
<rect x="26" y="21" width="4" height="4"/>
<rect x="34" y="21" width="4" height="4"/>
<rect x="38" y="14" width="4" height="4"/>
<rect x="30" y="14" width="4" height="4"/>
<rect x="14" y="28" width="20" height="4"/>
</svg>

After

Width:  |  Height:  |  Size: 733 B

View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<path d="M43, 4H5A5, 5, 0, 0, 0, 0, 9V39a5, 5, 0, 0, 0, 5, 5H43a5, 5, 0, 0, 0, 5-5V9A5, 5, 0, 0, 0, 43, 4Zm3, 35a3, 3, 0, 0, 1-3, 3H5a3, 3, 0, 0, 1-3-3V9A3, 3, 0, 0, 1, 5, 6H43a3, 3, 0, 0, 1, 3, 3V39Z"/>
<polygon points="26.47 30.36 22.35 10.81 16.36 24 8 24 8 26 17.64 26 21.65 17.19 25.53 35.63 31.55 26 40 26 40 24 30.45 24 26.47 30.36"/>
</svg>

After

Width:  |  Height:  |  Size: 414 B

View file

@ -0,0 +1,4 @@
<svg viewBox="0 0 245 240" xmlns="http://www.w3.org/2000/svg">
<circle cx="122.5" cy="120" r="87.5"/>
<path d="M180.833, 120c0, -7.061 -5.731, -12.792 -12.792, -12.792c-3.48, 0 -6.55, 1.33 -8.801, 3.581c-8.699, -6.242 -20.775, -10.336 -34.079, -10.847l5.833, -27.325l18.933, 3.991c0.205, 4.81 4.196, 8.699 9.108, 8.699c5.015, 0 9.108, -4.094 9.108, -9.108c0, -5.015 -4.093, -9.108 -9.108, -9.108c-3.582, 0 -6.652, 2.046 -8.085, 5.117l-21.184, -4.503c-0.614, -0.103 -1.228, 0 -1.74, 0.307c-0.511, 0.307 -0.818, 0.818 -1.023, 1.432l-6.447, 30.498c-13.612, 0.409 -25.79, 4.4 -34.591, 10.847c-2.252, -2.149 -5.424, -3.581 -8.801, -3.581c-7.062, 0 -12.793, 5.731 -12.793, 12.792c0, 5.219 3.071, 9.62 7.573, 11.667c-0.204, 1.228 -0.307, 2.558 -0.307, 3.889c0, 19.649 22.822, 35.511 51.068, 35.511c28.245, 0 51.067, -15.862 51.067, -35.511c0, -1.331 -0.102, -2.559 -0.307, -3.787c4.196, -2.047 7.368, -6.55 7.368, -11.769Zm-87.5, 9.108c0, -5.014 4.094, -9.108 9.109, -9.108c5.014, 0 9.108, 4.094 9.108, 9.108c0, 5.015 -4.094, 9.108 -9.108, 9.108c-5.015, 0 -9.109, -4.093 -9.109, -9.108Zm50.863, 24.05c-6.243, 6.243 -18.114, 6.652 -21.594, 6.652c-3.479, 0 -15.453, -0.512 -21.593, -6.652c-0.921, -0.921 -0.921, -2.456 0, -3.377c0.921, -0.921 2.456, -0.921 3.377, 0c3.889, 3.889 12.281, 5.321 18.319, 5.321c6.038, 0 14.327, -1.432 18.318, -5.321c0.921, -0.921 2.457, -0.921 3.378, 0c0.716, 1.023 0.716, 2.456 -0.205, 3.377Zm-1.638, -14.942c-5.014, 0 -9.108, -4.093 -9.108, -9.108c0, -5.014 4.094, -9.108 9.108, -9.108c5.015, 0 9.109, 4.094 9.109, 9.108c0, 5.015 -4.094, 9.108 -9.109, 9.108Z" fill="#fff"/>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View file

@ -0,0 +1,4 @@
<svg viewBox="0 0 245 240" xmlns="http://www.w3.org/2000/svg">
<path d="M130.394, 104.948l-23.347, 7.82l7.554, 22.552l23.347, -7.82l-7.554, -22.552Z"/>
<path d="M202.665, 95.937c-18.048, -60.159 -44.07, -74.149 -104.228, -56.102c-60.159, 18.048 -74.149, 44.07 -56.102, 104.228c18.048, 60.159 44.07, 74.149 104.228, 56.102c60.159, -18.048 74.149, -44.07 56.102, -104.228Zm-30.359, 39.033l-11.333, 3.777l3.918, 11.752c1.539, 4.757 -0.98, 9.933 -5.736, 11.472c-0.98, 0.28 -2.099, 0.56 -3.078, 0.42c-3.638, -0.14 -7.135, -2.519 -8.394, -6.156l-3.918, -11.752l-23.364, 7.835l3.918, 11.752c1.539, 4.756 -0.98, 9.933 -5.736, 11.472c-0.98, 0.279 -2.099, 0.559 -3.078, 0.419c-3.638, -0.14 -7.135, -2.518 -8.394, -6.155l-3.918, -11.752l-11.332, 3.777c-0.979, 0.28 -2.098, 0.56 -3.078, 0.42c-3.637, -0.14 -7.135, -2.518 -8.394, -6.156c-1.539, -4.757 0.979, -9.933 5.736, -11.472l11.332, -3.777l-7.554, -22.525l-11.333, 3.778c-0.979, 0.279 -2.098, 0.559 -3.078, 0.419c-3.637, -0.14 -7.135, -2.518 -8.394, -6.155c-1.539, -4.757 0.98, -9.934 5.736, -11.473l11.332, -3.777l-3.917, -11.752c-1.539, -4.757 0.98, -9.933 5.736, -11.472c4.757, -1.539 9.933, 0.979 11.472, 5.736l3.918, 11.752l23.363, -7.835l-3.917, -11.751c-1.539, -4.757 0.979, -9.934 5.736, -11.473c4.757, -1.538 9.933, 0.98 11.472, 5.736l3.918, 11.752l11.332, -3.777c4.756, -1.539 9.933, 0.979 11.472, 5.736c1.539, 4.757 -0.98, 9.933 -5.736, 11.472l-11.332, 3.777l7.554, 22.525l11.333, -3.777c4.756, -1.539 9.933, 0.979 11.472, 5.736c1.539, 4.756 -0.98, 9.933 -5.736, 11.472Z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -0,0 +1,6 @@
<svg viewBox="0 0 800 300" xmlns="http://www.w3.org/2000/svg" fill="#fcfcfc">
<path d="M567.328, 43.44l72.864, 130.464l0, 82.656l46.944, 0l0, -82.656l72.576, -130.464l-50.688, 0l-44.64, 84.672l-44.64, -84.672l-52.416, 0Z"/>
<path d="M520.672, 173.616c22.464, -10.656 34.848, -31.968 34.848, -61.056c0, -44.64 -26.496, -68.832 -81.216, -69.12l-82.368, 0l0, 213.12l46.656, 0l0, -75.168l35.136, 0l31.392, 75.168l52.416, 0l-36.864, -82.944Zm-46.656, -32.544l-35.424, 0l0, -56.448l35.712, 0c23.904, 0 31.968, 12.96 31.968, 27.936c0, 15.264 -8.352, 28.512 -32.256, 28.512Z"/>
<path d="M328.864, 150.576c15.552, -7.2 28.512, -23.04 28.512, -48.096c0, -34.848 -25.344, -58.464 -67.104, -58.464l-43.776, 0l-46.368, 0l0, 212.544l89.568, 0c42.048, 0 70.272, -19.584 70.272, -55.872c0, -26.784 -14.976, -42.048 -31.104, -50.112Zm-43.776, -67.104c19.008, 0 25.92, 14.112 25.92, 25.344c0, 11.808 -7.2, 24.768 -25.92, 24.768l-38.592, 0l0, -50.112l38.592, 0Zm2.592, 133.632l-41.184, 0l0, -49.248l41.184, 0c15.264, 0 26.208, 10.08 26.208, 25.056c0, 14.976 -10.656, 24.192 -26.208, 24.192Z"/>
<path d="M87.52, 214.8l0, -171.36l-47.232, 0l0, 213.12l130.752, 0l0, -41.76l-83.52, 0Z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View file

@ -0,0 +1,6 @@
<svg viewBox="0 0 800 300" xmlns="http://www.w3.org/2000/svg">
<path d="M567.328, 43.44l72.864, 130.464l0, 82.656l46.944, 0l0, -82.656l72.576, -130.464l-50.688, 0l-44.64, 84.672l-44.64, -84.672l-52.416, 0Z"/>
<path d="M520.672, 173.616c22.464, -10.656 34.848, -31.968 34.848, -61.056c0, -44.64 -26.496, -68.832 -81.216, -69.12l-82.368, 0l0, 213.12l46.656, 0l0, -75.168l35.136, 0l31.392, 75.168l52.416, 0l-36.864, -82.944Zm-46.656, -32.544l-35.424, 0l0, -56.448l35.712, 0c23.904, 0 31.968, 12.96 31.968, 27.936c0, 15.264 -8.352, 28.512 -32.256, 28.512Z"/>
<path d="M328.864, 150.576c15.552, -7.2 28.512, -23.04 28.512, -48.096c0, -34.848 -25.344, -58.464 -67.104, -58.464l-43.776, 0l-46.368, 0l0, 212.544l89.568, 0c42.048, 0 70.272, -19.584 70.272, -55.872c0, -26.784 -14.976, -42.048 -31.104, -50.112Zm-43.776, -67.104c19.008, 0 25.92, 14.112 25.92, 25.344c0, 11.808 -7.2, 24.768 -25.92, 24.768l-38.592, 0l0, -50.112l38.592, 0Zm2.592, 133.632l-41.184, 0l0, -49.248l41.184, 0c15.264, 0 26.208, 10.08 26.208, 25.056c0, 14.976 -10.656, 24.192 -26.208, 24.192Z"/>
<path d="M87.52, 214.8l0, -171.36l-47.232, 0l0, 213.12l130.752, 0l0, -41.76l-83.52, 0Z"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View file

@ -0,0 +1,92 @@
html,
body {
width: 100%; height: 100%;
}
html {
background-color: $white;
}
body {
min-width: 320px; min-height: 100vh;
color: $black;
display: flex;
flex-direction: column;
@include font-sans;
font-size: 12px;
overflow-x: hidden;
position: relative;
z-index: 0;
}
main {
flex: 1;
padding-top: 4rem !important; // override Vue
}
.inner-wrap {
margin-right: auto;
margin-left: auto;
max-width: 1200px;
@media (min-width: 901px) {
padding-right: 1rem;
padding-left: 1rem;
}
@media (max-width: 900px) {
padding-right: 2rem;
padding-left: 2rem;
}
&::after {
@include clearfix;
}
}
h1, h2, h3, h4, h5 {
.header-anchor {
display: none;
}
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 1.75rem;
}
h3 {
font-size: 1.5rem;
}
.__message {
bottom: 4rem; left: 10%;
animation: close-message linear;
animation-delay: 2s;
font-size: 0.8rem;
line-height: 1.33;
padding-bottom: 1rem;
padding-top: 1rem;
position: absolute;
text-align: center;
width: 80%;
z-index: 2;
a {
font-weight: 700;
}
&[type="error"] {
background-color: $red;
color: $white;
}
&[type="warning"] {
background-color: $yellow;
}
}

View file

@ -1,2 +1,2 @@
$primary-color: #155b4a;
$text-color: #222;
$text-color: #222;

View file

@ -0,0 +1,151 @@
html {
box-sizing: border-box;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
*,
*::before,
*::after {
margin: 0; padding: 0;
box-sizing: inherit;
outline: 0 !important;
}
a,
area,
button,
[role="button"],
input,
label,
select,
summary,
textarea { // Remove touch delay on supported devices
touch-action: manipulation;
}
a {
color: currentColor;
text-decoration: none;
}
*[readonly] {
cursor: not-allowed;
}
textarea {
&[disabled] {
resize: none;
}
&:not[disabled] {
resize: vertical;
}
}
button {
&:not(:disabled) {
cursor: pointer;
}
&:active {
top: 2px;
}
}
button,
input,
select,
textarea {
border: none;
border-radius: 0;
font-family: inherit;
font-size: inherit;
-moz-appearance: none;
-webkit-appearance: none;
&:focus {
outline: none;
}
}
input,
select,
textarea {
background-color: transparent;
}
input[type=submit] {
cursor: pointer;
}
.left {
float: left;
}
.right {
float: right;
}
iframe {
border: 0;
}
img {
font-size: 0;
&::after {
width: 100%; height: 100%;
top: -100%; left: 0;
background-color: $white;
background-image: url("../media/images/missing.png");
background-size: cover;
box-shadow: 0 0 1px 0 rgba($black, 0.3);
content: "";
display: block;
position: relative;
}
}
@media print {
// Intelligent print styles
pre, blockquote { border: 1px solid #999 !important; page-break-inside: avoid !important; }
tr, img { page-break-inside: avoid !important; }
img { max-width: 100% !important; }
@page { margin: 0.5cm !important; }
p, h2, h3 { orphans: 3 !important; widows: 3 !important; }
h2, h3 { page-break-after: avoid !important; }
thead { display: table-header-group !important; }
// Faster, more stable printing
* { background: transparent !important; color: black !important; text-shadow: none !important; filter: none !important; }
// Show hypertext data for links and abbreviations
p a[href]::after { content: " (" attr(href) ")" !important; }
p abbr[title]::after { content: " (" attr(title) ")" !important; }
p a[href^="javascript:"]::after, p a[href^="#"]::after { content: "" !important; }
p a, p abbr { word-wrap: break-word !important; text-decoration: underline !important; }
}
input::-moz-focus-inner,
button::-moz-focus-inner {
display: none;
}
// Get rid of yellow autofill background
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px $white inset !important;
&:focus {
outline: none;
}
}

View file

@ -0,0 +1,18 @@
$white: #fcfcfc;
$black: #222;
$gray: #a3b7ad;
$yellow: #dbdb3e;
$lime: #8ddb3e;
$green: #3edb3e;
$teal: #3edb8d;
$cyan: #3edbdb;
$blue: #3e8cdb;
$indigo: #3e3edb;
$violet: #8c3edb;
$fuchsia: #db3edb;
$pink: #db3e8d;
$red: #db3e3e;
$orange: #db8c3e;
// via https://palx.jxnblk.com/3edb8d

View file

@ -0,0 +1,181 @@
// B U T T O N S
.__button-base {
border: 1px solid;
font-size: 1rem;
letter-spacing: 0.025rem;
position: relative;
transition: all 0.2s;
}
.__button-basic {
@extend .__button-base;
@extend .__button-padding-vertical;
background-color: transparent;
border-color: transparent;
&::after {
width: 100%; height: 2px;
bottom: 2px; left: 0;
content: "";
display: block;
transition: background-color 0.2s;
}
&:not(:hover)::after {
background-color: transparent;
}
&:hover::after {
background-color: $black;
}
}
.__button-black {
@extend .__button-base;
@extend .__button-padding-vertical;
@extend .__button-padding-horizontal;
&:not(:hover) {
background-color: $black;
border-color: $white;
box-shadow: 2px 2px 0 $white;
color: $white;
}
&:hover {
background-color: $white;
border-color: $black;
box-shadow: 2px 2px 0 $black;
color: inherit;
}
}
.__button-white {
@extend .__button-base;
@extend .__button-padding-vertical;
@extend .__button-padding-horizontal;
&:not(:hover) {
background-color: $white;
border-color: transparent;
box-shadow: 2px 2px 0 $black;
color: inherit;
}
&:hover {
background-color: $black;
border-color: $white;
box-shadow: 2px 2px 0 $white;
color: $white;
}
}
.__button-gray {
@extend .__button-base;
@extend .__button-padding-vertical;
@extend .__button-padding-horizontal;
background-color: $white;
&:not(:hover) {
border-color: transparent;
box-shadow: 2px 2px 0 $black;
}
&:hover {
border-color: $teal;
box-shadow: 2px 2px 0 $teal;
color: $teal;
}
}
.__button-padding-vertical {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.__button-padding-horizontal {
padding-right: 1rem;
padding-left: 1rem;
}
// G R I D
.__grid {
&:first-of-type {
cursor: default;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.2rem;
text-transform: uppercase;
}
&:not(:first-of-type) {
border-left: 1px solid $gray;
.col {
border-bottom-style: solid;
border-bottom-width: 1px;
&:last-of-type {
border-right-style: solid;
border-right-width: 1px;
}
&:not(.red):not(.orange):not(.yellow):not(.green) {
border-color: $gray;
}
}
}
@media (min-width: 600px) {
display: table;
table-layout: fixed;
width: 100%;
.col {
display: table-cell;
}
}
}
.col {
padding: 0.5rem 1rem;
width: 100%;
&:not(:first-of-type) {
text-align: right;
}
}
// Padded columns
.grid-padded {
@media (min-width: 600px) {
margin-right: -1rem;
margin-left: -1rem;
.grid {
border-spacing: 1rem 0;
}
}
}
// Vertically center grid content
// Requires content within the column to be inline/inline-block
.grid-align-middle .col {
vertical-align: middle;
}
.grid-reverse {
direction: rtl;
.col {
direction: ltr;
}
}

View file

@ -0,0 +1,72 @@
@mixin center {
align-items: center;
display: inline-flex;
justify-content: center;
}
@mixin font-sans {
font-family: Karla, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
@mixin font-serif {
font-family: Georgia, serif;
}
@mixin font-mono {
font-family: "Courier New", monospace;
}
@mixin clearfix {
clear: both;
content: "";
display: block;
}
@mixin hide-text {
border: 0;
color: transparent;
font: 0/0 a;
text-shadow: none;
}
@mixin ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@mixin selection($background, $foreground) {
::selection {
background-color: $background;
color: $foreground;
}
::-moz-selection {
background-color: $background;
color: $foreground;
}
}
@mixin no-user-select {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
.clear {
@include clearfix;
}
.hide-text {
@include hide-text;
}

View file

@ -0,0 +1,2 @@
.ancillary {
}

View file

@ -0,0 +1,265 @@
.home {
h1, h2 {
text-align: center;
}
h1 {
margin-bottom: 1rem;
text-transform: uppercase;
}
h2 {
font-weight: 400;
margin-bottom: 4rem;
}
hr {
width: 100%; height: 1px;
background-color: rgba($black, 0.1);
border: none;
margin-bottom: 4rem;
}
&.hero {
align-items: center;
background-color: $black;
background-image: url("../media/svg/text-logo--white.svg");
background-position: center;
background-repeat: no-repeat;
display: flex;
height: calc(50vh - 4rem);
justify-content: center;
h2 {
background-color: $white;
border: 1px solid rgba($black, 0.1);
box-decoration-break: clone;
display: inline;
line-height: 2;
padding: 0.4rem 1rem;
}
}
&.features {
.home__features {
align-content: center;
border-bottom: 1px solid rgba($black, 0.05);
display: flex;
flex-flow: row wrap;
list-style-type: none;
padding-top: 2rem;
padding-bottom: 2rem;
}
.home__feature {
position: relative;
text-align: center;
vertical-align: top;
width: 50%;
}
.home__feature__title {
font-size: 2rem;
margin-bottom: 0.5rem;
}
.home__feature__description {
font-size: 1rem;
left: 10%;
margin-bottom: 1rem;
position: relative;
width: 80%;
}
.home__feature__cta {
@extend .__button-black;
display: inline-block;
font-size: 1rem;
position: relative;
}
}
&.intro,
&.docs,
&.contribute,
&.develop,
&.community {
padding-top: 3rem;
padding-bottom: 3.5rem;
.inner-wrap {
position: relative;
}
h3 {
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;
}
p {
font-size: 1.5rem;
line-height: 1.55;
margin-bottom: 1.5rem;
max-width: 1000px;
&:first-of-type {
padding-top: 0.5rem;
}
}
.cta {
@extend .__button-black;
top: 0.5rem;
}
}
&.intro,
&.docs,
&.contribute,
&.develop {
border-bottom: 1px solid rgba($black, 0.05);
}
&.community {
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: 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;
}
a {
display: block;
position: relative;
transition: color 0.2s;
&:not(:hover) {
color: inherit;
}
&:hover {
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;
background-position: center 0;
background-repeat: no-repeat;
background-size: 3rem;
content: "";
position: absolute;
}
a {
display: block;
position: relative;
transition: color 0.2s;
&:not(:hover) {
color: inherit;
}
&:hover {
color: $teal;
}
}
&:nth-child(1)::before {
background-image: url("../media/svg/flag.svg");
}
&:nth-child(2)::before {
background-image: url("../media/svg/keyboard.svg");
}
&:nth-child(3)::before {
background-image: url("../media/svg/anchor.svg");
}
&:nth-child(4)::before {
background-image: url("../media/svg/chat.svg");
}
&:nth-child(5)::before {
background-image: url("../media/svg/monitor.svg");
}
}
}
}
}

View file

@ -0,0 +1,40 @@
.footer {
background-color: $black;
color: $white;
font-size: 1rem;
padding-top: 2rem;
padding-bottom: 2rem;
ul {
align-items: stretch;
display: flex;
flex-flow: row wrap;
list-style-type: none;
li {
padding-right: 0.5rem;
padding-left: 0.5rem;
&:first-of-type {
flex: 1;
}
&:last-of-type {
cursor: default;
opacity: 0.3;
}
}
}
a {
transition: color 0.2s;
&:not(:hover) {
color: inherit;
}
&:hover {
color: $teal;
}
}
}

View file

@ -0,0 +1,54 @@
.navigation {
top: 0; left: 0;
background-color: $white;
box-shadow: 0 1px 5px rgba($black, 0.1);
position: fixed;
width: 100%;
z-index: 10;
> div:first-of-type {
align-items: stretch;
display: flex;
flex-flow: row wrap;
}
}
.navigation__item {
color: inherit;
font-size: 1rem;
line-height: 4rem;
overflow: hidden;
padding-right: 0.5rem;
padding-left: 0.5rem;
position: relative;
&:first-of-type {
flex: 1;
}
&:not(:first-of-type) {
&::after {
width: 100%; height: 3px;
background-color: $teal;
content: "";
left: 0;
position: absolute;
transition: bottom 0.2s;
}
&:not(:hover) {
&::after {
bottom: -3px;
}
}
&:hover,
&.active {
&::after {
bottom: 0;
}
}
}
}

View file

@ -0,0 +1,22 @@
// via //brick.freetls.fastly.net/Karla:400,700,400i (brick.im)
@font-face {
font-family: "Karla";
font-style: normal;
font-weight: 400;
src: local("Karla Regular"), url(//brick.freetls.fastly.net/fonts/karla/400.woff) format("woff");
}
@font-face {
font-family: "Karla";
font-style: italic;
font-weight: 400;
src: local("Karla Italic"), url(//brick.freetls.fastly.net/fonts/karla/400i.woff) format("woff");
}
@font-face {
font-family: "Karla";
font-style: normal;
font-weight: 700;
src: local("Karla Bold"), url(//brick.freetls.fastly.net/fonts/karla/700.woff) format("woff");
}

View file

@ -1,12 +1,14 @@
<template>
<v-app>
<v-toolbar clipped-left app scroll-off-screen>
<!--/
<v-toolbar>
<v-toolbar-title class="align-center">
<span class="title"><router-link to="/">LBRY.tech</router-link></span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat to="/overview.html">Overview</v-btn>
<v-btn flat to="/documentation.html">Documentation</v-btn>
@ -14,71 +16,147 @@
<v-btn flat to="/develop.html">How to Develop</v-btn>
<v-btn flat to="/resources/">Resources</v-btn>
</v-toolbar-items>
</v-toolbar>
/-->
<nav class="navigation">
<div class="inner-wrap">
<a class="navigation__item" href="/" title="Go back home">LBRY</a>
<a class="navigation__item" href="/overview.html" title="TBD">Overview</a>
<a class="navigation__item" href="/documentation.html" title="TBD">Documentation</a>
<a class="navigation__item" href="/contribute.html" title="TBD">Contribute</a>
<a class="navigation__item" href="/develop.html" title="TBD">Develop</a>
<a class="navigation__item" href="/resources" title="TBD">Resources</a>
</div>
</nav>
<v-content>
<v-alert type="error" value="true" id="in-development-alert" class="pt-4 pb-4 ma-0">
<!--/
<v-alert type="error" value="true" id="in-development-alert">
<strong>This website is in beta.</strong> We are actively developing this website to showcase and teach about the LBRY protocol. All things may not work as expected!<br/>This website is open source and you can <a href="https://github.com/lbryio/lbry.tech" target="_blank">contribute to it on Github</a>.</v-alert>
</v-alert>
/-->
<template v-if="$page.frontmatter.home">
<section class="home hero">
<div>
<h2>
LBRY is a free, open, and community-run digital marketplace.<br/>
Build the future of content freedom.
</h2>
</div>
</section>
<hook></hook>
<section class="home features">
<ul class="home__features">
<li class="home__feature">
<p class="home__feature__title"><strong>New to LBRY?</strong></p>
<p class="home__feature__description">Learn how LBRY works in 3 easy steps</p>
<a class="home__feature__cta" href="">Check it out</a>
</li>
<v-container fluid>
<li class="home__feature">
<p class="home__feature__title"><strong>Want to contribute?</strong></p>
<p class="home__feature__description">Start exploring our API and help make LBRY better</p>
<a class="home__feature__cta" href="">Jump in</a>
</li>
</ul>
</section>
<v-layout row wrap>
<section class="home intro">
<div class="inner-wrap">
<h3>Intro/Overview</h3>
<p>What if anyone in the world could publish a piece of digital content, anyone else in the world could access it, for free or for payment, and that entire system worked end-to-end without any centralized authority or point of control?</p>
<v-flex xs12 xl6 offset-xl3>
<Content custom></Content>
<p>That's the idea behind LBRY. To create a market for accessing and publishing information that is global, decentralized, robust, optimal and complete.</p>
<edit-link :path="this.$page.path"></edit-link>
<a class="cta" href="">Learn more</a>
</div>
</section>
<router-link to="/sitemap.html">Sitemap</router-link>
</v-flex>
<section class="home docs">
<div class="inner-wrap">
<h3>Documentation</h3>
<p>LBRY has enough moving parts to warrant comprehensive documentation. Whether you are interested in learning the technical details of our technology stack or you want to integrate LBRY into your life, you will find everything you need in our docs.</p>
</v-layout>
<a class="cta" href="">Go deeper</a>
</div>
</section>
</v-container>
<section class="home contribute">
<div class="inner-wrap">
<h3>Contribute</h3>
<p>Interested in progressing content freedom? Awesome! No matter your experience or skill level, <strong>you</strong> can make a difference.</p>
<ul>
<li><a href="">Raising Issues</a></li>
<li><a href="">Coding</a></li>
<li><a href="">Creative</a></li>
<li><a href="">Translating</a></li>
<li><a href="">Testing</a></li>
</ul>
</div>
</section>
<section class="home develop">
<div class="inner-wrap">
<h3>Development</h3>
<p>Like a bit of documentation but would prefer to jump in and make your mark on the blockchain? Perhaps add cats to it?</p>
<a class="cta" href="">Learn the LBRY API</a>
</div>
</section>
<section class="home community">
<div class="inner-wrap">
<h3>Community</h3>
<p>Hang out with us! We have a vibrant community of lbryians and would be <em>delighted</em> if you joined us.</p>
<ul>
<li><a href="//discord.gg/YjYbwhS">Discord</a></li>
<li><a href="//www.reddit.com/r/lbry">Reddit</a></li>
<li><a href="//chat.lbry.io">Slack</a></li>
</ul>
</div>
</section>
<edit-link :path="this.$page.path"></edit-link>
<router-link to="/sitemap.html">Sitemap</router-link>
</template>
<template v-else-if="$page.path == '/whitepaper.html'">
<Content custom></Content>
</template>
<template v-else>
<section class="ancillary">
<div class="inner-wrap">
{{ $page.title }}
<Content custom></Content>
<edit-link :path="this.$page.path"></edit-link>
</div>
<v-container>
<v-layout row wrap>
<v-flex xs12 xl6 offset-xl3>
<Sidebar v-if="$page.headers"></Sidebar>
<Content custom></Content>
<edit-link :path="this.$page.path"></edit-link>
<router-link to="/sitemap.html">Sitemap</router-link>
</v-flex>
</v-layout>
</v-container>
<edit-link :path="this.$page.path"></edit-link>
<router-link to="/sitemap.html">Sitemap</router-link>
</section>
</template>
</v-content>
<footer class="footer">
<div class="inner-wrap">
<ul>
<li><a href=""> LBRY.io</a></li>
<li><a href="">Get</a></li>
<li><a href="">Learn</a></li>
<li><a href="">News</a></li>
<li><a href="">Chat</a></li>
<li><a href="">GitHub</a></li>
<li>MIT Licensed</li>
</ul>
</div>
</footer>
</v-app>
</template>
@ -89,12 +167,7 @@ import Vuetify from 'vuetify'
import VueResource from 'vue-resource'
import VueHighlightJS from 'vue-highlightjs'
Vue.use(Vuetify, {
theme: {
primary: '#155b4a'
}
});
Vue.use(Vuetify);
Vue.use(VueResource)
Vue.use(VueHighlightJS)
@ -153,42 +226,15 @@ function updateMetaTags (meta, current) {
}
</script>
<style src="../../node_modules/vuetify/dist/vuetify.min.css"></style>
<style lang="scss">
@import '../scss/fonts';
html {
font-size: 16px;
}
pre {
text-align: left;
overflow-x: auto;
}
img {
max-width: 100%;
}
.content.custom {
display: block;
}
.toolbar__title {
a {
text-decoration: none;
&:hover {
color: black;
}
}
}
#in-development-alert {
a {
color: white;
}
}
@import "../scss/type/karla";
@import "../scss/init/colors";
@import "../scss/init/base";
@import "../scss/init/extends";
@import "../scss/init/mixins";
@import "../scss/layout";
@import "../scss/pages/home";
@import "../scss/pages/ancillary";
@import "../scss/partials/navigation";
@import "../scss/partials/footer";
</style>