Add table variables

docs/bulma-docs.sass

@@ -113,6 +113,22 @@ $twitter: #55acee
     opacity: 0
     transform: scale(1)
 
+@keyframes slideDown
+  0%
+    opacity: 0
+    transform: translateY(-10px)
+  100%
+    opacity: 1
+    transform: translateY(0)
+
+@keyframes slideUp
+  0%
+    opacity: 0
+    transform: translateY(10px)
+  100%
+    opacity: 1
+    transform: translateY(0)
+
 $curve: cubic-bezier(0, 0.71, 0.29, 1)
 
 #b
@@ -161,7 +177,17 @@ $curve: cubic-bezier(0, 0.71, 0.29, 1)
     height: 120px
     width: 120px
 
+#bulma
+  animation: slideDown 500ms both
+  animation-delay: 1s
+
+#modern-framework
+  animation: slideUp 500ms both
+  animation-delay: 1.2s
+
 #npm
+  animation: fadeIn 500ms both
+  animation-delay: 1.4s
   background: none
   margin: -10px 0 20px
   code
@@ -171,6 +197,18 @@ $curve: cubic-bezier(0, 0.71, 0.29, 1)
     font-size: 16px
     padding: 16px 32px
 
+#ghbtns
+  animation: slideDown 500ms both
+  animation-delay: 1.6s
+
+#carbon
+  animation: slideUp 500ms both
+  animation-delay: 1.8s
+
+#download
+  animation: fadeIn 500ms both
+  animation-delay: 2s
+
 #grid
   .notification
     padding-left: 0

docs/documentation/overview/variables.html

@@ -189,12 +189,6 @@ doc-subtab: variables
 <tr><td><code>$desktop</code></td><td>980px</td></tr>
 <tr><td><code>$widescreen</code></td><td>1180px</td></tr>
 
-<tr><th colspan="2">Dimensions</th></tr>
-
-<tr><td><code>$column-gap</code></td><td>20px</td></tr>
-
-<tr><td><code>$nav-height</code></td><td>50px</td></tr>
-
 <tr><th colspan="2">Miscellaneous</th></tr>
 
 <tr><td><code>$easing</code></td><td>ease-out</td></tr>

docs/index.html

@@ -16,19 +16,19 @@ route: index
         {% include svg/bulma-icon.svg %}
         {% include svg/bulma-icon.svg %}
       </p>
-      <h1 class="title">
+      <h1 id="bulma" class="title">
         Bulma
       </h1>
-      <h2 class="subtitle">
+      <h2 id="modern-framework" class="subtitle">
         A <strong>modern</strong> CSS framework based on <strong>Flexbox</strong>
       </h2>
       <pre id="npm"><code>npm install bulma</code></pre>
-      <div class="block">
+      <div id="ghbtns" class="block">
         <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=star&count=true&size=large" frameborder="0" scrolling="0" width="150px" height="30px"></iframe>
         <iframe src="https://ghbtns.com/github-btn.html?user=jgthms&repo=bulma&type=fork&count=false&size=large" frameborder="0" scrolling="0" width="80px" height="30px"></iframe>
       </div>
       {% include carbon.html %}
-      <p class="hero-buttons">
+      <p id="download" class="hero-buttons">
         <a class="button is-primary is-large" href="{{ site.download }}">
           <span class="icon">
             <i class="fa fa-download"></i>