From 955bd3689497f460c75309ed3aaa8bcfa29e5fc1 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, 23 May 2018 17:19:09 -0500
Subject: [PATCH] Improved table styling, made buttons descriptive, and
 improved line-height with paragraphs

---
 .vuepress/scss/pages/_contributing.scss | 11 ++++
 .vuepress/scss/pages/_page.scss         | 70 +++++++++++++++++++++----
 .vuepress/theme/Layout.vue              | 13 ++---
 contribute/index.md                     |  1 +
 4 files changed, 79 insertions(+), 16 deletions(-)
 create mode 100644 .vuepress/scss/pages/_contributing.scss

diff --git a/.vuepress/scss/pages/_contributing.scss b/.vuepress/scss/pages/_contributing.scss
new file mode 100644
index 0000000..8d061ca
--- /dev/null
+++ b/.vuepress/scss/pages/_contributing.scss
@@ -0,0 +1,11 @@
+.contributing {
+  table th {
+    &:first-of-type {
+      width: 30%;
+    }
+
+    &:nth-of-type(2) {
+      width: 20%;
+    }
+  }
+}
diff --git a/.vuepress/scss/pages/_page.scss b/.vuepress/scss/pages/_page.scss
index fc36acd..3602b58 100644
--- a/.vuepress/scss/pages/_page.scss
+++ b/.vuepress/scss/pages/_page.scss
@@ -88,6 +88,11 @@
       letter-spacing: 0.05rem;
       padding: 0.3rem 0.5rem;
       vertical-align: middle;
+
+      @media (max-width: 900px) {
+        position: relative;
+        top: -1px;
+      }
     }
   }
 
@@ -96,12 +101,12 @@
 
     @media (min-width: 901px) {
       font-size: 1.25rem;
-      line-height: 1.55;
+      line-height: 1.6;
     }
 
     @media (max-width: 900px) {
       font-size: 1.05rem;
-      line-height: 1.33;
+      line-height: 1.55;
     }
   }
 
@@ -201,27 +206,72 @@
   table {
     background-color: $white;
     border: 1px solid rgba($gray, 0.3);
+    border-spacing: 0;
     margin-bottom: 2rem;
+    width: 100%;
+
+    @media (max-width: 1030px) {
+      display: inline-grid;
+
+      thead {
+        display: none;
+      }
+
+      tbody, tr, td {
+        display: block;
+      }
+
+      tbody tr:last-of-type td:not(:last-of-type) {
+        border-bottom: 1px solid rgba($gray, 0.3);
+      }
+    }
+
+    thead {
+      background-color: $black;
+      color: $white;
+      cursor: default;
+      position: relative;
+
+      tr {
+        position: relative;
+        z-index: 1;
+      }
+
+      &::after {
+        width: calc(100% + 2px); height: calc(100% + 2px);
+        top: -1px; left: -1px;
+
+        background-color: $black;
+        content: "";
+        position: absolute;
+        z-index: 0;
+      }
+    }
+
+    tbody {
+      line-height: 1.55;
+    }
+
+    tr:nth-of-type(even) {
+      background-color: rgba($black, 0.025);
+    }
 
     th, td {
-      padding: 1rem;
+      padding: 0.5rem 1rem;
     }
 
     th {
-      border-bottom: 1px solid rgba($gray, 0.3);
       font-size: 0.8rem;
       letter-spacing: 0.1rem;
       text-transform: uppercase;
     }
 
+    tbody tr:not(:last-of-type) td {
+      border-bottom: 1px solid rgba($gray, 0.3);
+    }
+
     td {
       font-size: 1rem;
     }
-
-    tbody {
-      tr:not(:last-of-type) td {
-        border-bottom: 1px solid rgba($gray, 0.3);
-      }
-    }
   }
 }
diff --git a/.vuepress/theme/Layout.vue b/.vuepress/theme/Layout.vue
index 2a343ef..0e42b22 100644
--- a/.vuepress/theme/Layout.vue
+++ b/.vuepress/theme/Layout.vue
@@ -1,5 +1,5 @@
 <template>
-  <main v-bind:class="{ 'home': $page.frontmatter.home, 'documentation': $page.frontmatter.documentation }">
+  <main v-bind:class="{ 'home': $page.frontmatter.home, 'documentation': $page.frontmatter.documentation, 'contributing': $page.frontmatter.contributing }">
     <nav class="navigation">
       <div class="inner-wrap">
         <router-link class="navigation__item" to="/" title="Go back home">LBRY</router-link>
@@ -28,13 +28,13 @@
             <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="/hook.html">Check it out</a>
+              <a class="home__feature__cta" href="/hook.html">Try the welcome guide</a>
             </li>
 
             <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="/contribute">Jump in</a>
+              <p class="home__feature__description">Help make LBRY better!</p>
+              <a class="home__feature__cta" href="/contribute">Explore our repos</a>
             </li>
           </ul>
         </section>
@@ -46,7 +46,7 @@
 
             <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>
+            <a class="cta" href="/overview">Learn more about our mission</a>
           </div>
         </section>
 
@@ -55,7 +55,7 @@
             <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>
 
-            <a class="cta" href="">Go deeper</a>
+            <a class="cta" href="/resources">Explore our documentation</a>
           </div>
         </section>
 
@@ -326,6 +326,7 @@ function updateMetaTags (meta, current) {
   @import "../scss/layout";
   @import "../scss/pages/home";
   @import "../scss/pages/page";
+  @import "../scss/pages/contributing";
   @import "../scss/pages/documentation";
   @import "../scss/partials/navigation";
   @import "../scss/partials/footer";
diff --git a/contribute/index.md b/contribute/index.md
index 32600cd..88ac29d 100644
--- a/contribute/index.md
+++ b/contribute/index.md
@@ -1,4 +1,5 @@
 ---
+contributing: true
 title: Contributing
 ---