diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
index 71fb68db..1ac69d64 100644
--- a/docs/_includes/footer.html
+++ b/docs/_includes/footer.html
@@ -43,29 +43,60 @@
 
 <footer class="footer">
   <div class="container">
-    <div class="content has-text-centered">
-      <p>
-        <strong xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">Bulma</strong> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://jgthms.com" property="cc:attributionName" rel="cc:attributionURL">Jeremy Thomas</a>. The source code is licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content is licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
-      </p>
-      <div id="social">
-        <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="105px" height="20px"></iframe>
-        <a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en">@jgthms</a>
-        <a href="https://twitter.com/share" class="twitter-share-button" data-text="{{ site.title }}" data-url="{{ site.url }}" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma">Tweet</a>
+    <div class="columns">
+      <div class="column is-one-third">
+        <div id="about" class="content">
+          <div>
+            <strong xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/Text" property="dct:title" rel="dct:type">Bulma</strong> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://jgthms.com" property="cc:attributionName" rel="cc:attributionURL">Jeremy Thomas</a>.
+            <div class="twitter-container">
+              <a href="https://twitter.com/jgthms" class="twitter-follow-button" data-show-count="true" data-lang="en" data-size="large">@jgthms</a>
+            </div>
+          </div>
+          <small>
+            Source code licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
+            <br>
+            Website content licensed <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a>.
+          </small>
+        </div>
+      </div>
+      <div class="column">
+        <div id="share" class="content">
+          <div>
+            <strong>Support</strong> and share the love!
+          </div>
+          <div id="social">
+            <iframe class="github-btn" src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="160px" height="30px"></iframe>
+
+            <a href="https://twitter.com/share" class="twitter-share-button" data-text="{{ site.title }}" data-url="{{ site.url }}" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma" data-size="large">Tweet</a>
+          </div>
+
+          <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
+            <input type="hidden" name="cmd" value="_s-xclick">
+            <input type="hidden" name="hosted_button_id" value="8WMKYSRFN6A78">
+            <input type="image" src="https://www.paypalobjects.com/webstatic/en_US/i/btn/png/gold-rect-paypaldonate-60px.png" border="0" name="submit" alt="PayPal – The safer, easier way to pay online." height="30">
+            <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
+          </form>
+        </div>
+      </div>
+      <div class="column">
+        <div id="sister">
+          <p>
+            More <strong>helpful</strong> tools:
+          </p>
+          <ul>
+            <li>
+              <a href="http://cssreference.io">
+                <img src="{{site.url}}/images/css-reference-logo.png" alt="CSS Reference logo">
+              </a>
+            </li>
+            <li>
+              <a href="http://htmlreference.io">
+                <img src="{{site.url}}/images/html-reference-logo.png" alt="HTML Reference logo">
+              </a>
+            </li>
+          </ul>
+        </div>
       </div>
-      <p>
-        Want to learn how to <strong>create a website</strong>?
-        <br>
-        Read <a href="http://marksheet.io">MarkSheet: a free HTML &amp; CSS tutorial</a>.
-      </p>
-      <p>
-        Want to make a <strong>donation</strong>?
-      </p>
-      <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
-        <input type="hidden" name="cmd" value="_s-xclick">
-        <input type="hidden" name="hosted_button_id" value="8WMKYSRFN6A78">
-        <input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
-        <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
-      </form>
     </div>
   </div>
 </footer>
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index b5b73478..d7df81d1 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -2442,7 +2442,7 @@ input[type="submit"].button {
 
 .tag .delete {
   margin-left: 0.25em;
-  margin-right: -0.5em;
+  margin-right: -0.375em;
 }
 
 .tag.is-white {
@@ -6420,7 +6420,19 @@ html.route-index #carbon {
   color: white;
 }
 
-#mc_embed_signup .control {
+#about .twitter-container {
+  display: block;
+  height: 30px;
+  line-height: 30px;
+  margin-top: 5px;
+}
+
+#about small {
+  display: block;
+  margin-top: 5px;
+}
+
+#mc_embed_signup .field {
   margin-bottom: 0;
 }
 
@@ -6428,24 +6440,24 @@ html.route-index #carbon {
   margin-top: 0.75rem;
 }
 
+#share form {
+  height: 30px;
+  margin-top: 10px;
+}
+
 #social {
   align-items: center;
   display: flex;
   flex-wrap: wrap;
-  margin-bottom: 1em;
-  justify-content: center;
+  margin-top: 5px;
+  justify-content: flex-start;
 }
 
 #social a {
   display: inline-block;
   font-size: 11px;
-  height: 20px;
-  line-height: 20px;
-  margin: 5px;
-}
-
-#social iframe {
-  margin: 5px;
+  height: 30px;
+  line-height: 30px;
 }
 
 #newsletter .input {
@@ -6453,6 +6465,20 @@ html.route-index #carbon {
   box-shadow: none;
 }
 
+#sister ul {
+  display: flex;
+}
+
+#sister li {
+  display: flex;
+  height: 30px;
+  margin: 5px 1rem 0 0;
+}
+
+#sister img {
+  height: 30px;
+}
+
 #images tr td:nth-child(2) {
   width: 320px;
 }
@@ -6668,8 +6694,8 @@ html.route-index #carbon {
   border-radius: 5px;
   box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
   display: block;
+  line-height: 1.25;
   margin-top: 15px;
-  max-width: 400px;
   padding: 15px;
   padding-left: 70px;
   position: relative;
@@ -6711,16 +6737,19 @@ html.route-index #carbon {
   #_default_ {
     display: flex;
     justify-content: center;
-    padding: 0 60px;
     position: relative;
   }
   #_default_ .default-ad {
+    left: 100%;
+    margin-left: 2rem;
     position: absolute;
-    right: 0;
     top: 0;
   }
   #_default_ > a {
-    margin: 0 20px;
+    margin: 0;
+  }
+  #_default_ > a:not(:nth-child(2)) {
+    margin-left: 2rem;
   }
 }
 
diff --git a/docs/images/css-reference-logo.png b/docs/images/css-reference-logo.png
new file mode 100644
index 00000000..3b770bdd
Binary files /dev/null and b/docs/images/css-reference-logo.png differ
diff --git a/docs/images/html-reference-logo.png b/docs/images/html-reference-logo.png
new file mode 100644
index 00000000..7b41e3ca
Binary files /dev/null and b/docs/images/html-reference-logo.png differ
diff --git a/docs/index.html b/docs/index.html
index 2d4d91d2..732ad0be 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -512,7 +512,7 @@ route: index
           <div class="card-content">
             <div class="media">
               <div class="media-left">
-                <figure class="image" style="height: 40px; width: 40px;">
+                <figure class="image is-48x48">
                   <img src="{{site.url}}/images/placeholders/96x96.png" alt="Image">
                 </figure>
               </div>
diff --git a/docs/sass/bsa.sass b/docs/sass/bsa.sass
index d996e304..d3dbd89c 100644
--- a/docs/sass/bsa.sass
+++ b/docs/sass/bsa.sass
@@ -16,8 +16,8 @@
     border-radius: $radius-large
     box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
     display: block
+    line-height: 1.25
     margin-top: 15px
-    max-width: 400px
     padding: 15px
     padding-left: 70px
     position: relative
@@ -47,11 +47,13 @@
   #_default_
     display: flex
     justify-content: center
-    padding: 0 60px
     position: relative
     .default-ad
+      left: 100%
+      margin-left: 2rem
       position: absolute
-      right: 0
       top: 0
     & > a
-      margin: 0 20px
+      margin: 0
+      &:not(:nth-child(2))
+        margin-left: 2rem
diff --git a/docs/sass/footer.sass b/docs/sass/footer.sass
index a7c929d6..3f628e02 100644
--- a/docs/sass/footer.sass
+++ b/docs/sass/footer.sass
@@ -1,25 +1,47 @@
+#about
+  .twitter-container
+    display: block
+    height: 30px
+    line-height: 30px
+    margin-top: 5px
+  small
+    display: block
+    margin-top: 5px
+
 #mc_embed_signup
-  .control
+  .field
     margin-bottom: 0
   .notification
     margin-top: 0.75rem
 
+#share
+  form
+    height: 30px
+    margin-top: 10px
+
 #social
   align-items: center
   display: flex
   flex-wrap: wrap
-  margin-bottom: 1em
-  justify-content: center
+  margin-top: 5px
+  justify-content: flex-start
   a
     display: inline-block
     font-size: 11px
-    height: 20px
-    line-height: 20px
-    margin: 5px
-  iframe
-    margin: 5px
+    height: 30px
+    line-height: 30px
 
 #newsletter
   .input
     border-color: $white
     box-shadow: none
+
+#sister
+  ul
+    display: flex
+  li
+    display: flex
+    height: 30px
+    margin: 5px 1rem 0 0
+  img
+    height: 30px
diff --git a/sass/elements/tag.sass b/sass/elements/tag.sass
index 8d62856a..db940904 100644
--- a/sass/elements/tag.sass
+++ b/sass/elements/tag.sass
@@ -14,7 +14,7 @@
   white-space: nowrap
   .delete
     margin-left: 0.25em
-    margin-right: -0.5em
+    margin-right: -0.375em
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)