Update docs

Author: mrmrs

components/buttons/pill-grow/index.html

@@ -775,9 +775,9 @@ <h2 class="f5 mb2 ttc mid-gray">pages</h2>
 }
 </style>
 
-  <footer class="bg-washed-blue black-70 ph3 ph5-ns pv5 pv6-ns bt b--black-10">
+  <footer class="bg-white black-70 ph3 ph5-ns pv5 pv6-ns bt b--black-10">
   <div class="mw9 center">
-  <div class="mb4">
+  <div class="mb5">
     <a class="black-70 link dim b dib mr3" href="/" title="Home">
       Home
     </a>
@@ -788,25 +788,28 @@ <h2 class="f5 mb2 ttc mid-gray">pages</h2>
       Components
     </a>
   </div>
-  <article>
+  <article class="v-top">
     <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>
-  <a href="https://twitter.com/intent/tweet?text=Tachyons: Functional css for humans.&url=http://tachyons.io" class="dn mb3 twitter bg-white-50 link dim br2 ph2 pb1 pt0 lh-solid" style="background-color: #55acee;">
+  <a href="https://twitter.com/intent/tweet?text=Tachyons: A functional css toolkit for designing in the browser.&url=http://tachyons.io" class="twitter bg-white-50 link dib dim br2 ph2 pb1 lh-solid v-top" style="background-color: #55acee;">
     <svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">
       <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"/>
     </svg>
     <span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
   </a>
   </article>
   <div class="mt4">
-    <a class="ba black-70 link br2 dim b dib mr3 mb3 pv2 ph3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
+    <a class="ba black-70 no-underline grow br2 b dib mr3 mb3 pv2 ph3" href="https://twitter.com/tachyons_css" title="Follow us on Twitter">
+      Follow us on Twitter
+    </a>
+    <a class="ba black-70 no-underline grow br2 b dib mr3 mb3 pv2 ph3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
       Join our Slack Channel
     </a>
-    <a class="ba br2 black-70 link dim b dib pv2 ph3  mb3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
+    <a class="ba br2 black-70 no-underline grow b dib mb3 pv2 ph3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
       Open an Issue
     </a>
   </div>
-  <p class="measure copy lh-copy">
+  <p class="f6 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
     the browser fun.

components/buttons/pill/index.html

@@ -793,9 +793,9 @@ <h2 class="f5 mb2 ttc mid-gray">pages</h2>
 }
 </style>
 
-  <footer class="bg-washed-blue black-70 ph3 ph5-ns pv5 pv6-ns bt b--black-10">
+  <footer class="bg-white black-70 ph3 ph5-ns pv5 pv6-ns bt b--black-10">
   <div class="mw9 center">
-  <div class="mb4">
+  <div class="mb5">
     <a class="black-70 link dim b dib mr3" href="/" title="Home">
       Home
     </a>
@@ -806,25 +806,28 @@ <h2 class="f5 mb2 ttc mid-gray">pages</h2>
       Components
     </a>
   </div>
-  <article>
+  <article class="v-top">
     <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>
-  <a href="https://twitter.com/intent/tweet?text=Tachyons: Functional css for humans.&url=http://tachyons.io" class="dn mb3 twitter bg-white-50 link dim br2 ph2 pb1 pt0 lh-solid" style="background-color: #55acee;">
+  <a href="https://twitter.com/intent/tweet?text=Tachyons: A functional css toolkit for designing in the browser.&url=http://tachyons.io" class="twitter bg-white-50 link dib dim br2 ph2 pb1 lh-solid v-top" style="background-color: #55acee;">
     <svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">
       <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"/>
     </svg>
     <span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
   </a>
   </article>
   <div class="mt4">
-    <a class="ba black-70 link br2 dim b dib mr3 mb3 pv2 ph3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
+    <a class="ba black-70 no-underline grow br2 b dib mr3 mb3 pv2 ph3" href="https://twitter.com/tachyons_css" title="Follow us on Twitter">
+      Follow us on Twitter
+    </a>
+    <a class="ba black-70 no-underline grow br2 b dib mr3 mb3 pv2 ph3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
       Join our Slack Channel
     </a>
-    <a class="ba br2 black-70 link dim b dib pv2 ph3  mb3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
+    <a class="ba br2 black-70 no-underline grow b dib mb3 pv2 ph3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
       Open an Issue
     </a>
   </div>
-  <p class="measure copy lh-copy">
+  <p class="f6 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
     the browser fun.

components/cards/album-centered/index.html

@@ -586,9 +586,9 @@ <h2 class="f5 mb2 ttc mid-gray">pages</h2>
 }
 </style>
 
-  <footer class="bg-washed-blue black-70 ph3 ph5-ns pv5 pv6-ns bt b--black-10">
+  <footer class="bg-white black-70 ph3 ph5-ns pv5 pv6-ns bt b--black-10">
   <div class="mw9 center">
-  <div class="mb4">
+  <div class="mb5">
     <a class="black-70 link dim b dib mr3" href="/" title="Home">
       Home
     </a>
@@ -599,25 +599,28 @@ <h2 class="f5 mb2 ttc mid-gray">pages</h2>
       Components
     </a>
   </div>
-  <article>
+  <article class="v-top">
     <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>
-  <a href="https://twitter.com/intent/tweet?text=Tachyons: Functional css for humans.&url=http://tachyons.io" class="dn mb3 twitter bg-white-50 link dim br2 ph2 pb1 pt0 lh-solid" style="background-color: #55acee;">
+  <a href="https://twitter.com/intent/tweet?text=Tachyons: A functional css toolkit for designing in the browser.&url=http://tachyons.io" class="twitter bg-white-50 link dib dim br2 ph2 pb1 lh-solid v-top" style="background-color: #55acee;">
     <svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">
       <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"/>
     </svg>
     <span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
   </a>
   </article>
   <div class="mt4">
-    <a class="ba black-70 link br2 dim b dib mr3 mb3 pv2 ph3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
+    <a class="ba black-70 no-underline grow br2 b dib mr3 mb3 pv2 ph3" href="https://twitter.com/tachyons_css" title="Follow us on Twitter">
+      Follow us on Twitter
+    </a>
+    <a class="ba black-70 no-underline grow br2 b dib mr3 mb3 pv2 ph3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
       Join our Slack Channel
     </a>
-    <a class="ba br2 black-70 link dim b dib pv2 ph3  mb3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
+    <a class="ba br2 black-70 no-underline grow b dib mb3 pv2 ph3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
       Open an Issue
     </a>
   </div>
-  <p class="measure copy lh-copy">
+  <p class="f6 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
     the browser fun.

components/cards/album-left/index.html

@@ -586,9 +586,9 @@ <h2 class="f5 mb2 ttc mid-gray">pages</h2>
 }
 </style>
 
-  <footer class="bg-washed-blue black-70 ph3 ph5-ns pv5 pv6-ns bt b--black-10">
+  <footer class="bg-white black-70 ph3 ph5-ns pv5 pv6-ns bt b--black-10">
   <div class="mw9 center">
-  <div class="mb4">
+  <div class="mb5">
     <a class="black-70 link dim b dib mr3" href="/" title="Home">
       Home
     </a>
@@ -599,25 +599,28 @@ <h2 class="f5 mb2 ttc mid-gray">pages</h2>
       Components
     </a>
   </div>
-  <article>
+  <article class="v-top">
     <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>
-  <a href="https://twitter.com/intent/tweet?text=Tachyons: Functional css for humans.&url=http://tachyons.io" class="dn mb3 twitter bg-white-50 link dim br2 ph2 pb1 pt0 lh-solid" style="background-color: #55acee;">
+  <a href="https://twitter.com/intent/tweet?text=Tachyons: A functional css toolkit for designing in the browser.&url=http://tachyons.io" class="twitter bg-white-50 link dib dim br2 ph2 pb1 lh-solid v-top" style="background-color: #55acee;">
     <svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">
       <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"/>
     </svg>
     <span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
   </a>
   </article>
   <div class="mt4">
-    <a class="ba black-70 link br2 dim b dib mr3 mb3 pv2 ph3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
+    <a class="ba black-70 no-underline grow br2 b dib mr3 mb3 pv2 ph3" href="https://twitter.com/tachyons_css" title="Follow us on Twitter">
+      Follow us on Twitter
+    </a>
+    <a class="ba black-70 no-underline grow br2 b dib mr3 mb3 pv2 ph3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
       Join our Slack Channel
     </a>
-    <a class="ba br2 black-70 link dim b dib pv2 ph3  mb3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
+    <a class="ba br2 black-70 no-underline grow b dib mb3 pv2 ph3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
       Open an Issue
     </a>
   </div>
-  <p class="measure copy lh-copy">
+  <p class="f6 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
     the browser fun.

components/cards/news-card/index.html

@@ -591,9 +591,9 @@ <h2 class="f5 mb2 ttc mid-gray">pages</h2>
 }
 </style>
 
-  <footer class="bg-washed-blue black-70 ph3 ph5-ns pv5 pv6-ns bt b--black-10">
+  <footer class="bg-white black-70 ph3 ph5-ns pv5 pv6-ns bt b--black-10">
   <div class="mw9 center">
-  <div class="mb4">
+  <div class="mb5">
     <a class="black-70 link dim b dib mr3" href="/" title="Home">
       Home
     </a>
@@ -604,25 +604,28 @@ <h2 class="f5 mb2 ttc mid-gray">pages</h2>
       Components
     </a>
   </div>
-  <article>
+  <article class="v-top">
     <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>
-  <a href="https://twitter.com/intent/tweet?text=Tachyons: Functional css for humans.&url=http://tachyons.io" class="dn mb3 twitter bg-white-50 link dim br2 ph2 pb1 pt0 lh-solid" style="background-color: #55acee;">
+  <a href="https://twitter.com/intent/tweet?text=Tachyons: A functional css toolkit for designing in the browser.&url=http://tachyons.io" class="twitter bg-white-50 link dib dim br2 ph2 pb1 lh-solid v-top" style="background-color: #55acee;">
     <svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">
       <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"/>
     </svg>
     <span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
   </a>
   </article>
   <div class="mt4">
-    <a class="ba black-70 link br2 dim b dib mr3 mb3 pv2 ph3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
+    <a class="ba black-70 no-underline grow br2 b dib mr3 mb3 pv2 ph3" href="https://twitter.com/tachyons_css" title="Follow us on Twitter">
+      Follow us on Twitter
+    </a>
+    <a class="ba black-70 no-underline grow br2 b dib mr3 mb3 pv2 ph3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
       Join our Slack Channel
     </a>
-    <a class="ba br2 black-70 link dim b dib pv2 ph3  mb3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
+    <a class="ba br2 black-70 no-underline grow b dib mb3 pv2 ph3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
       Open an Issue
     </a>
   </div>
-  <p class="measure copy lh-copy">
+  <p class="f6 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
     the browser fun.

components/cards/product-card/index.html

@@ -617,9 +617,9 @@ <h2 class="f5 mb2 ttc mid-gray">pages</h2>
 }
 </style>
 
-  <footer class="bg-washed-blue black-70 ph3 ph5-ns pv5 pv6-ns bt b--black-10">
+  <footer class="bg-white black-70 ph3 ph5-ns pv5 pv6-ns bt b--black-10">
   <div class="mw9 center">
-  <div class="mb4">
+  <div class="mb5">
     <a class="black-70 link dim b dib mr3" href="/" title="Home">
       Home
     </a>
@@ -630,25 +630,28 @@ <h2 class="f5 mb2 ttc mid-gray">pages</h2>
       Components
     </a>
   </div>
-  <article>
+  <article class="v-top">
     <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>
-  <a href="https://twitter.com/intent/tweet?text=Tachyons: Functional css for humans.&url=http://tachyons.io" class="dn mb3 twitter bg-white-50 link dim br2 ph2 pb1 pt0 lh-solid" style="background-color: #55acee;">
+  <a href="https://twitter.com/intent/tweet?text=Tachyons: A functional css toolkit for designing in the browser.&url=http://tachyons.io" class="twitter bg-white-50 link dib dim br2 ph2 pb1 lh-solid v-top" style="background-color: #55acee;">
     <svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">
       <path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"/>
     </svg>
     <span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
   </a>
   </article>
   <div class="mt4">
-    <a class="ba black-70 link br2 dim b dib mr3 mb3 pv2 ph3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
+    <a class="ba black-70 no-underline grow br2 b dib mr3 mb3 pv2 ph3" href="https://twitter.com/tachyons_css" title="Follow us on Twitter">
+      Follow us on Twitter
+    </a>
+    <a class="ba black-70 no-underline grow br2 b dib mr3 mb3 pv2 ph3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
       Join our Slack Channel
     </a>
-    <a class="ba br2 black-70 link dim b dib pv2 ph3  mb3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
+    <a class="ba br2 black-70 no-underline grow b dib mb3 pv2 ph3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
       Open an Issue
     </a>
   </div>
-  <p class="measure copy lh-copy">
+  <p class="f6 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
     the browser fun.