Merge pull request #35 from lbryio/redesign

Redesign of LBRY.tech
2018-05-07 10:51:10 +03:00 · 2018-05-07 10:51:10 +03:00 · 98d6ee4d3d
commit 98d6ee4d3d
parent a80c6950bc e5e352097e
23 changed files with 1079 additions and 84 deletions
--- a/.vuepress/media/images/missing.png
+++ b/.vuepress/media/images/missing.png
--- a/.vuepress/media/svg/anchor.svg
+++ b/.vuepress/media/svg/anchor.svg
@ -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>
--- a/.vuepress/media/svg/chat.svg
+++ b/.vuepress/media/svg/chat.svg
@ -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>
--- a/.vuepress/media/svg/discord.svg
+++ b/.vuepress/media/svg/discord.svg
@ -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>
--- a/.vuepress/media/svg/flag.svg
+++ b/.vuepress/media/svg/flag.svg
@ -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>
--- a/.vuepress/media/svg/keyboard.svg
+++ b/.vuepress/media/svg/keyboard.svg
@ -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>
--- a/.vuepress/media/svg/monitor.svg
+++ b/.vuepress/media/svg/monitor.svg
@ -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>
--- a/.vuepress/media/svg/reddit.svg
+++ b/.vuepress/media/svg/reddit.svg
@ -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>
--- a/.vuepress/media/svg/slack.svg
+++ b/.vuepress/media/svg/slack.svg
@ -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>
--- a/.vuepress/media/svg/text-logo--white.svg
+++ b/.vuepress/media/svg/text-logo--white.svg
@ -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>
--- a/.vuepress/media/svg/text-logo.svg
+++ b/.vuepress/media/svg/text-logo.svg
@ -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>
--- a/.vuepress/scss/_layout.scss
+++ b/.vuepress/scss/_layout.scss
@ -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;
+  }
+}
--- a/.vuepress/scss/_variables.scss
+++ b/.vuepress/scss/_variables.scss
@ -1,2 +1,2 @@
 $primary-color: #155b4a;
-$text-color: #222;
+$text-color: #222;
--- a/.vuepress/scss/init/_base.scss
+++ b/.vuepress/scss/init/_base.scss
@ -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;
+  }
+}
--- a/.vuepress/scss/init/_colors.scss
+++ b/.vuepress/scss/init/_colors.scss
@ -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
--- a/.vuepress/scss/init/_extends.scss
+++ b/.vuepress/scss/init/_extends.scss
@ -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;
+  }
+}
--- a/.vuepress/scss/init/_mixins.scss
+++ b/.vuepress/scss/init/_mixins.scss
@ -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;
+}
--- a/.vuepress/scss/pages/_ancillary.scss
+++ b/.vuepress/scss/pages/_ancillary.scss
@ -0,0 +1,2 @@
+.ancillary {
+}
--- a/.vuepress/scss/pages/_home.scss
+++ b/.vuepress/scss/pages/_home.scss
@ -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");
+        }
+      }
+    }
+  }
+}
--- a/.vuepress/scss/partials/_footer.scss
+++ b/.vuepress/scss/partials/_footer.scss
@ -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;
+    }
+  }
+}
--- a/.vuepress/scss/partials/_navigation.scss
+++ b/.vuepress/scss/partials/_navigation.scss
@ -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;
+      }
+    }
+  }
+}
--- a/.vuepress/scss/type/_karla.scss
+++ b/.vuepress/scss/type/_karla.scss
@ -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");
+}
--- a/.vuepress/theme/Layout.vue
+++ b/.vuepress/theme/Layout.vue
@ -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>