From 53571f747c6cc77b0fdb139d404f1ab775e2a2ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=AB=20=E3=82=A6=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=83=96?= <netopwibby@thenetwork.email>
Date: Thu, 3 May 2018 16:55:34 -0500
Subject: [PATCH] Finished design for the homepage

---
 .vuepress/media/svg/discord.svg          |   4 +
 .vuepress/media/svg/reddit.svg           |   4 +
 .vuepress/media/svg/slack.svg            |   4 +
 .vuepress/scss/pages/_ancillary.scss     |   2 +
 .vuepress/scss/pages/_home.scss          |  78 +++++++++++++++-
 .vuepress/scss/partials/_footer.scss     |  40 +++++++++
 .vuepress/scss/partials/_navigation.scss |   1 -
 .vuepress/theme/Layout.vue               | 109 +++++++++--------------
 8 files changed, 170 insertions(+), 72 deletions(-)
 create mode 100644 .vuepress/media/svg/discord.svg
 create mode 100644 .vuepress/media/svg/reddit.svg
 create mode 100644 .vuepress/media/svg/slack.svg
 create mode 100644 .vuepress/scss/pages/_ancillary.scss
 create mode 100644 .vuepress/scss/partials/_footer.scss

diff --git a/.vuepress/media/svg/discord.svg b/.vuepress/media/svg/discord.svg
new file mode 100644
index 0000000..cf27f74
--- /dev/null
+++ 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>
diff --git a/.vuepress/media/svg/reddit.svg b/.vuepress/media/svg/reddit.svg
new file mode 100644
index 0000000..73c3d68
--- /dev/null
+++ 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>
diff --git a/.vuepress/media/svg/slack.svg b/.vuepress/media/svg/slack.svg
new file mode 100644
index 0000000..6a54e84
--- /dev/null
+++ 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>
diff --git a/.vuepress/scss/pages/_ancillary.scss b/.vuepress/scss/pages/_ancillary.scss
new file mode 100644
index 0000000..9851f5a
--- /dev/null
+++ b/.vuepress/scss/pages/_ancillary.scss
@@ -0,0 +1,2 @@
+.ancillary {
+}
diff --git a/.vuepress/scss/pages/_home.scss b/.vuepress/scss/pages/_home.scss
index bb3abd6..47bae5e 100644
--- a/.vuepress/scss/pages/_home.scss
+++ b/.vuepress/scss/pages/_home.scss
@@ -129,10 +129,66 @@
     border-bottom: 1px solid rgba($black, 0.05);
   }
 
-  &.docs,
-  &.develop {
-    h3 {
-      // text-align: right;
+  &.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");
+        }
+      }
     }
   }
 
@@ -170,6 +226,20 @@
           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");
         }
diff --git a/.vuepress/scss/partials/_footer.scss b/.vuepress/scss/partials/_footer.scss
new file mode 100644
index 0000000..b9ef2b8
--- /dev/null
+++ 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;
+    }
+  }
+}
diff --git a/.vuepress/scss/partials/_navigation.scss b/.vuepress/scss/partials/_navigation.scss
index 4f05bfb..5a634ab 100644
--- a/.vuepress/scss/partials/_navigation.scss
+++ b/.vuepress/scss/partials/_navigation.scss
@@ -3,7 +3,6 @@
 
   background-color: $white;
   box-shadow: 0 1px 5px rgba($black, 0.1);
-  // color: $white;
   position: fixed;
   width: 100%;
   z-index: 10;
diff --git a/.vuepress/theme/Layout.vue b/.vuepress/theme/Layout.vue
index a6841f3..8699e23 100644
--- a/.vuepress/theme/Layout.vue
+++ b/.vuepress/theme/Layout.vue
@@ -39,7 +39,6 @@
 
       <template v-if="$page.frontmatter.home">
         <section class="home hero">
-          <!--/ <h1 class="home__heading">LBRY Technology</h1> /-->
           <div>
             <h2>
               LBRY is a free, open, and community-run digital marketplace.<br/>
@@ -78,7 +77,9 @@
         <section class="home docs">
           <div class="inner-wrap">
             <h3>Documentation</h3>
-            <p>Text and such</p>
+            <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>
+
+            <a class="cta" href="">Go deeper</a>
           </div>
         </section>
 
@@ -88,11 +89,11 @@
             <p>Interested in progressing content freedom? Awesome! No matter your experience or skill level, <strong>you</strong> can make a difference.</p>
 
             <ul>
-              <li>Raising Issues</li>
-              <li>Coding</li>
-              <li>Creative</li>
-              <li>Translating</li>
-              <li>Testing</li>
+              <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>
@@ -100,29 +101,24 @@
         <section class="home develop">
           <div class="inner-wrap">
             <h3>Development</h3>
-            <p>Text and such</p>
+            <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>Text and such</p>
+            <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>
-
-        <!--/ <hook></hook> /-->
-
-        <!--/
-        <v-container fluid>
-          <v-layout row wrap>
-            <v-flex>
-              <Content custom></Content>
-              <edit-link :path="this.$page.path"></edit-link>
-            </v-flex>
-          </v-layout>
-        </v-container>
-        /-->
       </template>
 
       <template v-else-if="$page.path == '/whitepaper.html'">
@@ -130,18 +126,31 @@
       </template>
 
       <template v-else>
-        <v-container>
-          <v-layout>
-            <v-flex>
-              <Sidebar v-if="$page.headers"></Sidebar>
-              <Content custom></Content>
-              <edit-link :path="this.$page.path"></edit-link>
-            </v-flex>
-          </v-layout>
-        </v-container>
+        <section class="ancillary">
+          <div class="inner-wrap">
+            {{ $page.title }}
+            <Content custom></Content>
+            <edit-link :path="this.$page.path"></edit-link>
+          </div>
+        </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>
 
@@ -211,8 +220,6 @@ function updateMetaTags (meta, current) {
 }
 </script>
 
-<!--/ <style src="../../node_modules/vuetify/dist/vuetify.min.css"></style> /-->
-
 <style lang="scss">
   @import "../scss/type/karla";
   @import "../scss/init/colors";
@@ -221,39 +228,7 @@ function updateMetaTags (meta, current) {
   @import "../scss/init/mixins";
   @import "../scss/layout";
   @import "../scss/pages/home";
+  @import "../scss/pages/ancillary";
   @import "../scss/partials/navigation";
-
-  /*
-  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/partials/footer";
 </style>