From c50fb2be90c2ce3841ebe8c52d54050a73002c30 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: Wed, 2 May 2018 10:47:17 -0500
Subject: [PATCH] Added icons to "Contribute" section of homepage

---
 .vuepress/media/svg/anchor.svg   |  3 +
 .vuepress/media/svg/chat.svg     |  3 +
 .vuepress/media/svg/flag.svg     |  3 +
 .vuepress/media/svg/keyboard.svg | 15 +++++
 .vuepress/media/svg/monitor.svg  |  4 ++
 .vuepress/scss/pages/_home.scss  | 96 +++++++++++++++++++++++++++++++-
 .vuepress/theme/Layout.vue       | 42 ++++++++++----
 7 files changed, 153 insertions(+), 13 deletions(-)
 create mode 100755 .vuepress/media/svg/anchor.svg
 create mode 100755 .vuepress/media/svg/chat.svg
 create mode 100755 .vuepress/media/svg/flag.svg
 create mode 100755 .vuepress/media/svg/keyboard.svg
 create mode 100755 .vuepress/media/svg/monitor.svg

diff --git a/.vuepress/media/svg/anchor.svg b/.vuepress/media/svg/anchor.svg
new file mode 100755
index 0000000..bc6663b
--- /dev/null
+++ 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>
diff --git a/.vuepress/media/svg/chat.svg b/.vuepress/media/svg/chat.svg
new file mode 100755
index 0000000..0febba6
--- /dev/null
+++ 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>
diff --git a/.vuepress/media/svg/flag.svg b/.vuepress/media/svg/flag.svg
new file mode 100755
index 0000000..4f11d4e
--- /dev/null
+++ 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>
diff --git a/.vuepress/media/svg/keyboard.svg b/.vuepress/media/svg/keyboard.svg
new file mode 100755
index 0000000..c6badda
--- /dev/null
+++ 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>
diff --git a/.vuepress/media/svg/monitor.svg b/.vuepress/media/svg/monitor.svg
new file mode 100755
index 0000000..bee1965
--- /dev/null
+++ 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>
diff --git a/.vuepress/scss/pages/_home.scss b/.vuepress/scss/pages/_home.scss
index 5c713cf..bb3abd6 100644
--- a/.vuepress/scss/pages/_home.scss
+++ b/.vuepress/scss/pages/_home.scss
@@ -88,11 +88,37 @@
   &.develop,
   &.community {
     padding-top: 3rem;
-    padding-bottom: 3rem;
+    padding-bottom: 3.5rem;
+
+    .inner-wrap {
+      position: relative;
+    }
 
     h3 {
-      @extend .inner-wrap;
-      font-size: 3rem;
+      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;
     }
   }
 
@@ -102,4 +128,68 @@
   &.develop {
     border-bottom: 1px solid rgba($black, 0.05);
   }
+
+  &.docs,
+  &.develop {
+    h3 {
+      // text-align: right;
+    }
+  }
+
+  &.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;
+        }
+
+        &: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");
+        }
+      }
+    }
+  }
 }
diff --git a/.vuepress/theme/Layout.vue b/.vuepress/theme/Layout.vue
index 9df844c..a6841f3 100644
--- a/.vuepress/theme/Layout.vue
+++ b/.vuepress/theme/Layout.vue
@@ -65,28 +65,50 @@
         </section>
 
         <section class="home intro">
-          <h3>Intro/Overview</h3>
-          <p>Text and such</p>
+          <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>
+
+            <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>
+
+            <a class="cta" href="">Learn more</a>
+          </div>
         </section>
 
         <section class="home docs">
-          <h3>Documentation</h3>
-          <p>Text and such</p>
+          <div class="inner-wrap">
+            <h3>Documentation</h3>
+            <p>Text and such</p>
+          </div>
         </section>
 
         <section class="home contribute">
-          <h3>Contribute</h3>
-          <p>Text and such</p>
+          <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>Raising Issues</li>
+              <li>Coding</li>
+              <li>Creative</li>
+              <li>Translating</li>
+              <li>Testing</li>
+            </ul>
+          </div>
         </section>
 
         <section class="home develop">
-          <h3>Development</h3>
-          <p>Text and such</p>
+          <div class="inner-wrap">
+            <h3>Development</h3>
+            <p>Text and such</p>
+          </div>
         </section>
 
         <section class="home community">
-          <h3>Community</h3>
-          <p>Text and such</p>
+          <div class="inner-wrap">
+            <h3>Community</h3>
+            <p>Text and such</p>
+          </div>
         </section>
 
         <!--/ <hook></hook> /-->