Improved table styling, made buttons descriptive, and improved line-height with paragraphs

.vuepress/scss/pages/_contributing.scss

@@ -0,0 +1,11 @@
+.contributing {
+  table th {
+    &:first-of-type {
+      width: 30%;
+    }
+
+    &:nth-of-type(2) {
+      width: 20%;
+    }
+  }
+}

.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);
-      }
-    }
   }
 }

.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>
+              <p class="home__feature__description">Help make LBRY better!</p>
-              <a class="home__feature__cta" href="/contribute">Jump in</a>
+              <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";

contribute/index.md

@@ -1,4 +1,5 @@
 ---
+contributing: true
 title: Contributing
 ---