Update docs and homepage. Move descriptive text to homepage.

Author: mrmrs

docs/index.html

@@ -20,52 +20,34 @@
     <header class="w-100 pa3 ph5-ns bg-near-white">
   <div class="dt w-100">
     <div class="dtc v-mid tl w-50">
-      <a href="/" class="dib f5 f4-ns fw6 mt0 mb1 link black-50 dim" title="Home">
+      <a href="/" class="dib f5 f4-ns fw6 mt0 mb1 link black-70 dim" title="Home">
         Tachyons
         <div class="dib">
-          <small class="nowrap f6 mt2 mt3-ns pr2 black-50 fw2">v4.0.0-beta.7</small>
+          <small class="nowrap f6 mt2 mt3-ns pr2 black-70 fw2">v4.0.0-beta.12</small>
         </div>
       </a>
     </div>
     <div class="db dtc v-mid w-100 tr">
 
       <a title="Documentation" href="/docs/"
-         class="f6 b dim link black-50 mr1 mr3-m mr4-l dib">
+         class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
         Docs
       </a>
       <a title="Components" href="/components/"
-         class="f6 b dim link black-50 mr1 mr3-m mr4-l dib">
+         class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
         Components
       </a>
       <a title="Tachyons on GitHub" href="http://github.com/mrmrs/tachyons/"
-         class="f6 b dim link black-50 mr1 mr3-m mr4-l dib">
+         class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dn dib-ns">
         GitHub
       </a>
-      <a title="Tachyons Npm Modules" href="/#npm"
-         class="f6 b link black-50 dim dib">
-        Npm
-      </a>
     </div>
   </div>
 </header>
 
     <main>
-      <div class="ph3 ph5-ns pb3 pt4">
-        <h1 class="f4 f3-ns  lh-title measure">
-          Tachyons was built for designing.
-        </h1>
-        <p class="f5 f4-ns b measure lh-copy">Create fast loading, highly readable, and
-          100% responsive interfaces with as little css as possible.</p>
-        <p class="measure f5 f4-ns lh-copy">
-          Modules can be altered, extended, or changed to meet your design needs.
-          You shouldn't need to write css everything you want to build a new
-          ui component. By learning the composable building blocks in tachyons, you can     quickly start to build out interfaces while writing little to no css.
-        </p>
-        <p class="measure f5 f4=ns lh-copy">
-          Coming soon: component and example docs.
-        </p>
-      </div>
-    <div class="ph3 ph5-ns pt3 pb5">
+      <h1>Docs</h1>
+      <div class="ph3 ph5-ns pt3 pb5">
   <section>
     <h2 class="f6 fw7 ttu tracked">Elements</h2>
     <a class="f5 fw4 dim link blue db pv1" href="/docs/elements/images/" title="Images">Images</a>
@@ -121,22 +103,32 @@ <h2 class="f6 fw7 ttu tracked">Theming</h2>
     </svg>
     <span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
   </a>
+  <div class="mb4">
+    <a class="black-70 link dim b dib mr3" href="/" title="Home">
+      Home
+    </a>
+    <a class="black-70 link dim b dib mr3" href="/docs" title="Docs">
+      Docs
+    </a>
+    <a class="black-70 link dim b dib mr3" href="/components/" title="Components">
+      Components
+    </a>
+  </div>
   <article>
     <iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
     <iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
   </article>
-
-  <p>
-    <a class="black-70 link dim b dib mr3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
+  <div class="mt4">
+    <a class="black-70 link dim b dib mr3 pv2" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
       Join our Slack Channel
     </a>
-    <a class="black-70 link dim b dib mr3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
+    <a class="black-70 link dim b dib mr3 pv2" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
       Open an Issue
     </a>
-    <a class="black-70 link dim b dib mr3" href="https://github.com/tachyons-css" title="Tachyons-css on GitHub">
+    <a class="black-70 link dim b dib mr3 pv2" href="https://github.com/tachyons-css" title="Tachyons-css on GitHub">
       GitHub
     </a>
-  </p>
+  </div>
   <p class="measure copy lh-copy">
     Have a question? Need help? Feel free to open an issue on GitHub or ask a
     question in our slack channel. We're here to try and help make designing in

index.html

@@ -51,6 +51,19 @@
   <iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
   <iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
 </article>
+      <div class="ph3 ph5-ns pb3 pt4">
+        <h1 class="f4 f3-ns  lh-title measure">
+          Tachyons was built for designing.
+        </h1>
+        <p class="f5 f4-ns b measure lh-copy">Create fast loading, highly readable, and
+          100% responsive interfaces with as little css as possible.</p>
+        <p class="measure f5 f4-ns lh-copy">
+          Modules can be altered, extended, or changed to meet your design needs.
+          You shouldn't need to write css everytime you want to build a new
+          ui component. By learning the composable building blocks in tachyons, you
+          can quickly start to build out interfaces while writing little to no css.
+        </p>
+      </div>
           <article class="ph3 ph5-ns mb4 mb5-ns">
             <h1>Getting Started</h1>
             <p class="measure lh-copy">

src/templates/docs/index.html

@@ -10,22 +10,10 @@
   <body class="w-100 sans-serif">
     <%= siteHeader %>
     <main>
-      <div class="ph3 ph5-ns pb3 pt4">
-        <h1 class="f4 f3-ns  lh-title measure">
-          Tachyons was built for designing.
-        </h1>
-        <p class="f5 f4-ns b measure lh-copy">Create fast loading, highly readable, and
-          100% responsive interfaces with as little css as possible.</p>
-        <p class="measure f5 f4-ns lh-copy">
-          Modules can be altered, extended, or changed to meet your design needs.
-          You shouldn't need to write css everything you want to build a new
-          ui component. By learning the composable building blocks in tachyons, you can     quickly start to build out interfaces while writing little to no css.
-        </p>
-        <p class="measure f5 f4=ns lh-copy">
-          Coming soon: component and example docs.
-        </p>
+      <div class="ph3 ph5-ns">
+        <h1 class="f4">Docs</h1>
       </div>
-    <%= navDocs %>
+      <%= navDocs %>
     </main>
     <%= siteFooter %>
 

src/templates/index.html

@@ -15,6 +15,19 @@
   <iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
   <iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
 </article>
+      <div class="ph3 ph5-ns pb3 pt4">
+        <h1 class="f4 f3-ns  lh-title measure">
+          Tachyons was built for designing.
+        </h1>
+        <p class="f5 f4-ns b measure lh-copy">Create fast loading, highly readable, and
+          100% responsive interfaces with as little css as possible.</p>
+        <p class="measure f5 f4-ns lh-copy">
+          Modules can be altered, extended, or changed to meet your design needs.
+          You shouldn't need to write css everytime you want to build a new
+          ui component. By learning the composable building blocks in tachyons, you
+          can quickly start to build out interfaces while writing little to no css.
+        </p>
+      </div>
           <article class="ph3 ph5-ns mb4 mb5-ns">
             <h1>Getting Started</h1>
             <p class="measure lh-copy">