Fix button spacing, Add image placeholders

docs/bulma-docs.sass

@@ -188,11 +188,10 @@ $curve: cubic-bezier(0, 0.71, 0.29, 1)
 #npm
   animation: fadeIn 500ms both
   animation-delay: 1.4s
-  background: none
   margin: -10px 0 20px
   code
     border-radius: $radius
-    color: $link
+    color: $primary
     display: inline-block
     font-size: 16px
     padding: 16px 32px

docs/css/bulma-docs.css

@@ -95,7 +95,7 @@ th {
 
 html {
   background-color: whitesmoke;
-  font-size: 16px;
+  font-size: 14px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   min-width: 300px;
@@ -150,7 +150,7 @@ a:hover {
 code {
   background-color: whitesmoke;
   color: #ff3860;
-  font-size: 0.75em;
+  font-size: 0.8em;
   font-weight: normal;
   padding: 0.25em 0.5em 0.25em;
 }
@@ -189,7 +189,7 @@ strong {
 pre {
   background-color: whitesmoke;
   color: #4a4a4a;
-  font-size: 0.75em;
+  font-size: 0.8em;
   white-space: pre;
   word-wrap: normal;
 }
@@ -597,8 +597,8 @@ a.box:active {
   color: #363636;
   cursor: pointer;
   justify-content: center;
-  padding-left: 1em;
-  padding-right: 1em;
+  padding-left: 0.75em;
+  padding-right: 0.75em;
   text-align: center;
   white-space: nowrap;
 }
@@ -626,53 +626,47 @@ a.box:active {
 }
 
 .button .icon:first-child:last-child {
-  margin-left: calc(-1px - 0.5rem);
-  margin-right: calc(-1px - 0.5rem);
+  margin-left: calc(-1px + -0.25rem);
+  margin-right: calc(-1px + -0.25rem);
 }
 
 .button .icon.is-small:first-child:not(:last-child) {
-  margin-left: -0.125rem;
-  margin-right: 0.25rem;
+  margin-left: 0rem;
 }
 
 .button .icon.is-small:last-child:not(:first-child) {
-  margin-left: 0.25rem;
-  margin-right: -0.125rem;
+  margin-right: 0rem;
 }
 
 .button .icon.is-small:first-child:last-child {
-  margin-left: calc(-1px - 0.25rem);
-  margin-right: calc(-1px - 0.25rem);
+  margin-left: calc(-1px + 0rem);
+  margin-right: calc(-1px + 0rem);
 }
 
 .button .icon.is-medium:first-child:not(:last-child) {
-  margin-left: -0.375rem;
-  margin-right: 0.75rem;
+  margin-left: -0.5rem;
 }
 
 .button .icon.is-medium:last-child:not(:first-child) {
-  margin-left: 0.75rem;
-  margin-right: -0.375rem;
+  margin-right: -0.5rem;
 }
 
 .button .icon.is-medium:first-child:last-child {
-  margin-left: calc(-1px - 0.75rem);
-  margin-right: calc(-1px - 0.75rem);
+  margin-left: calc(-1px + -0.5rem);
+  margin-right: calc(-1px + -0.5rem);
 }
 
 .button .icon.is-large:first-child:not(:last-child) {
-  margin-left: -0.625rem;
-  margin-right: 1.25rem;
+  margin-left: -1rem;
 }
 
 .button .icon.is-large:last-child:not(:first-child) {
-  margin-left: 1.25rem;
-  margin-right: -0.625rem;
+  margin-right: -1rem;
 }
 
 .button .icon.is-large:first-child:last-child {
-  margin-left: calc(-1px - 1.25rem);
-  margin-right: calc(-1px - 1.25rem);
+  margin-left: calc(-1px + -1rem);
+  margin-right: calc(-1px + -1rem);
 }
 
 .button:hover, .button.is-hovered {
@@ -1259,63 +1253,57 @@ a.box:active {
 }
 
 .button.is-small .icon:first-child:not(:last-child) {
-  margin-left: -0.28125rem;
-  margin-right: 0.5625rem;
+  margin-left: -0.375rem;
+  margin-right: 0.375rem;
 }
 
 .button.is-small .icon:last-child:not(:first-child) {
-  margin-left: 0.5625rem;
-  margin-right: -0.28125rem;
+  margin-left: 0.375rem;
+  margin-right: -0.375rem;
 }
 
 .button.is-small .icon:first-child:last-child {
-  margin-left: calc(-1px - 0.5625rem);
-  margin-right: calc(-1px - 0.5625rem);
+  margin-left: calc(-1px + -0.375rem);
+  margin-right: calc(-1px + -0.375rem);
 }
 
 .button.is-small .icon.is-small:first-child:not(:last-child) {
-  margin-left: -0.15625rem;
-  margin-right: 0.3125rem;
+  margin-left: -0.125rem;
 }
 
 .button.is-small .icon.is-small:last-child:not(:first-child) {
-  margin-left: 0.3125rem;
-  margin-right: -0.15625rem;
+  margin-right: -0.125rem;
 }
 
 .button.is-small .icon.is-small:first-child:last-child {
-  margin-left: calc(-1px - 0.3125rem);
-  margin-right: calc(-1px - 0.3125rem);
+  margin-left: calc(-1px + -0.125rem);
+  margin-right: calc(-1px + -0.125rem);
 }
 
 .button.is-small .icon.is-medium:first-child:not(:last-child) {
-  margin-left: -0.40625rem;
-  margin-right: 0.8125rem;
+  margin-left: -0.625rem;
 }
 
 .button.is-small .icon.is-medium:last-child:not(:first-child) {
-  margin-left: 0.8125rem;
-  margin-right: -0.40625rem;
+  margin-right: -0.625rem;
 }
 
 .button.is-small .icon.is-medium:first-child:last-child {
-  margin-left: calc(-1px - 0.8125rem);
-  margin-right: calc(-1px - 0.8125rem);
+  margin-left: calc(-1px + -0.625rem);
+  margin-right: calc(-1px + -0.625rem);
 }
 
 .button.is-small .icon.is-large:first-child:not(:last-child) {
-  margin-left: -0.65625rem;
-  margin-right: 1.3125rem;
+  margin-left: -1.125rem;
 }
 
 .button.is-small .icon.is-large:last-child:not(:first-child) {
-  margin-left: 1.3125rem;
-  margin-right: -0.65625rem;
+  margin-right: -1.125rem;
 }
 
 .button.is-small .icon.is-large:first-child:last-child {
-  margin-left: calc(-1px - 1.3125rem);
-  margin-right: calc(-1px - 1.3125rem);
+  margin-left: calc(-1px + -1.125rem);
+  margin-right: calc(-1px + -1.125rem);
 }
 
 .button.is-medium {
@@ -1323,63 +1311,57 @@ a.box:active {
 }
 
 .button.is-medium .icon:first-child:not(:last-child) {
-  margin-left: -0.21875rem;
-  margin-right: 0.4375rem;
+  margin-left: -0.125rem;
+  margin-right: 0.625rem;
 }
 
 .button.is-medium .icon:last-child:not(:first-child) {
-  margin-left: 0.4375rem;
-  margin-right: -0.21875rem;
+  margin-left: 0.625rem;
+  margin-right: -0.125rem;
 }
 
 .button.is-medium .icon:first-child:last-child {
-  margin-left: calc(-1px - 0.4375rem);
-  margin-right: calc(-1px - 0.4375rem);
+  margin-left: calc(-1px + -0.125rem);
+  margin-right: calc(-1px + -0.125rem);
 }
 
 .button.is-medium .icon.is-small:first-child:not(:last-child) {
-  margin-left: -0.09375rem;
-  margin-right: 0.1875rem;
+  margin-left: 0.125rem;
 }
 
 .button.is-medium .icon.is-small:last-child:not(:first-child) {
-  margin-left: 0.1875rem;
-  margin-right: -0.09375rem;
+  margin-right: 0.125rem;
 }
 
 .button.is-medium .icon.is-small:first-child:last-child {
-  margin-left: calc(-1px - 0.1875rem);
-  margin-right: calc(-1px - 0.1875rem);
+  margin-left: calc(-1px + 0.125rem);
+  margin-right: calc(-1px + 0.125rem);
 }
 
 .button.is-medium .icon.is-medium:first-child:not(:last-child) {
-  margin-left: -0.34375rem;
-  margin-right: 0.6875rem;
+  margin-left: -0.375rem;
 }
 
 .button.is-medium .icon.is-medium:last-child:not(:first-child) {
-  margin-left: 0.6875rem;
-  margin-right: -0.34375rem;
+  margin-right: -0.375rem;
 }
 
 .button.is-medium .icon.is-medium:first-child:last-child {
-  margin-left: calc(-1px - 0.6875rem);
-  margin-right: calc(-1px - 0.6875rem);
+  margin-left: calc(-1px + -0.375rem);
+  margin-right: calc(-1px + -0.375rem);
 }
 
 .button.is-medium .icon.is-large:first-child:not(:last-child) {
-  margin-left: -0.59375rem;
-  margin-right: 1.1875rem;
+  margin-left: -0.875rem;
 }
 
 .button.is-medium .icon.is-large:last-child:not(:first-child) {
-  margin-left: 1.1875rem;
-  margin-right: -0.59375rem;
+  margin-right: -0.875rem;
 }
 
 .button.is-medium .icon.is-large:first-child:last-child {
-  margin-left: calc(-1px - 1.1875rem);
-  margin-right: calc(-1px - 1.1875rem);
+  margin-left: calc(-1px + -0.875rem);
+  margin-right: calc(-1px + -0.875rem);
 }
 
 .button.is-large {
@@ -1387,63 +1369,57 @@ a.box:active {
 }
 
 .button.is-large .icon:first-child:not(:last-child) {
-  margin-left: -0.1875rem;
-  margin-right: 0.375rem;
+  margin-left: 0rem;
+  margin-right: 0.75rem;
 }
 
 .button.is-large .icon:last-child:not(:first-child) {
-  margin-left: 0.375rem;
-  margin-right: -0.1875rem;
+  margin-left: 0.75rem;
+  margin-right: 0rem;
 }
 
 .button.is-large .icon:first-child:last-child {
-  margin-left: calc(-1px - 0.375rem);
-  margin-right: calc(-1px - 0.375rem);
+  margin-left: calc(-1px + 0rem);
+  margin-right: calc(-1px + 0rem);
 }
 
 .button.is-large .icon.is-small:first-child:not(:last-child) {
-  margin-left: -0.0625rem;
-  margin-right: 0.125rem;
+  margin-left: 0.25rem;
 }
 
 .button.is-large .icon.is-small:last-child:not(:first-child) {
-  margin-left: 0.125rem;
-  margin-right: -0.0625rem;
+  margin-right: 0.25rem;
 }
 
 .button.is-large .icon.is-small:first-child:last-child {
-  margin-left: calc(-1px - 0.125rem);
-  margin-right: calc(-1px - 0.125rem);
+  margin-left: calc(-1px + 0.25rem);
+  margin-right: calc(-1px + 0.25rem);
 }
 
 .button.is-large .icon.is-medium:first-child:not(:last-child) {
-  margin-left: -0.3125rem;
-  margin-right: 0.625rem;
+  margin-left: -0.25rem;
 }
 
 .button.is-large .icon.is-medium:last-child:not(:first-child) {
-  margin-left: 0.625rem;
-  margin-right: -0.3125rem;
+  margin-right: -0.25rem;
 }
 
 .button.is-large .icon.is-medium:first-child:last-child {
-  margin-left: calc(-1px - 0.625rem);
-  margin-right: calc(-1px - 0.625rem);
+  margin-left: calc(-1px + -0.25rem);
+  margin-right: calc(-1px + -0.25rem);
 }
 
 .button.is-large .icon.is-large:first-child:not(:last-child) {
-  margin-left: -0.5625rem;
-  margin-right: 1.125rem;
+  margin-left: -0.75rem;
 }
 
 .button.is-large .icon.is-large:last-child:not(:first-child) {
-  margin-left: 1.125rem;
-  margin-right: -0.5625rem;
+  margin-right: -0.75rem;
 }
 
 .button.is-large .icon.is-large:first-child:last-child {
-  margin-left: calc(-1px - 1.125rem);
-  margin-right: calc(-1px - 1.125rem);
+  margin-left: calc(-1px + -0.75rem);
+  margin-right: calc(-1px + -0.75rem);
 }
 
 .button[disabled], .button.is-disabled {
@@ -1487,18 +1463,10 @@ a.box:active {
   margin-bottom: 1.5rem;
 }
 
-.content a:not(.button) {
-  border-bottom: 1px solid #dbdbdb;
-}
-
 .content a:not(.button):visited {
   color: #b86bff;
 }
 
-.content a:not(.button):hover {
-  border-bottom-color: #00d1b2;
-}
-
 .content li + li {
   margin-top: 0.25em;
 }
@@ -2261,6 +2229,7 @@ a.box:active {
   text-align: center;
   vertical-align: top;
   width: 1.5rem;
+  background: coral;
 }
 
 .icon .fa {
@@ -2779,7 +2748,7 @@ a.box:active {
 }
 
 .title.is-6 {
-  font-size: 16px;
+  font-size: 14px;
 }
 
 .subtitle {
@@ -2818,7 +2787,7 @@ a.box:active {
 }
 
 .subtitle.is-6 {
-  font-size: 16px;
+  font-size: 14px;
 }
 
 .block:not(:last-child) {
@@ -3450,7 +3419,7 @@ a.box:active {
 
 .menu-label {
   color: #7a7a7a;
-  font-size: 0.75em;
+  font-size: 0.8em;
   letter-spacing: 1px;
   text-transform: uppercase;
 }
@@ -3813,9 +3782,9 @@ a.box:active {
 .nav-toggle {
   cursor: pointer;
   display: block;
-  height: 3rem;
+  height: 3.5rem;
   position: relative;
-  width: 3rem;
+  width: 3.5rem;
 }
 
 .nav-toggle span {
@@ -3889,7 +3858,7 @@ a.box:active {
 }
 
 .nav-item img {
-  max-height: 1.5rem;
+  max-height: 1.75rem;
 }
 
 .nav-item .button + .button {
@@ -4013,7 +3982,7 @@ a.nav-item.is-tab.is-active {
   align-items: stretch;
   background-color: white;
   display: flex;
-  min-height: 3rem;
+  min-height: 3.5rem;
   position: relative;
   text-align: center;
   z-index: 2;
@@ -4022,7 +3991,7 @@ a.nav-item.is-tab.is-active {
 .nav > .container {
   align-items: stretch;
   display: flex;
-  min-height: 3rem;
+  min-height: 3.5rem;
   width: 100%;
 }
 
@@ -5273,7 +5242,7 @@ label.panel-block:hover {
 .tile {
   align-items: stretch;
   display: block;
-  flex-basis: auto;
+  flex-basis: 0;
   flex-grow: 1;
   flex-shrink: 1;
   min-height: min-content;
@@ -6568,7 +6537,6 @@ svg {
 #npm {
   animation: fadeIn 500ms both;
   animation-delay: 1.4s;
-  background: none;
   margin: -10px 0 20px;
 }
 

docs/documentation/components/card.html

@@ -17,14 +17,14 @@ doc-subtab: card
 <div class="card">
   <div class="card-image">
     <figure class="image is-4by3">
-      <img src="http://placehold.it/300x225" alt="">
+      <img src="{{site.url}}/images/placeholders/300x225.png" alt="">
     </figure>
   </div>
   <div class="card-content">
     <div class="media">
       <div class="media-left">
         <figure class="image is-32x32">
-          <img src="http://placehold.it/64x64" alt="Image">
+          <img src="{{site.url}}/images/placeholders/64x64.png" alt="Image">
         </figure>
       </div>
       <div class="media-content">

docs/documentation/components/media-object.html

@@ -21,7 +21,7 @@ doc-subtab: media-object
       <article class="media">
         <figure class="media-left structure-item" title="media-left">
           <p class="image is-64x64">
-            <img src="http://placehold.it/128x128">
+            <img src="{{site.url}}/images/placeholders/128x128.png">
           </p>
         </figure>
         <div class="media-content structure-item is-structure-right" title="media-content">
@@ -56,7 +56,7 @@ doc-subtab: media-object
 <article class="media">
   <figure class="media-left">
     <p class="image is-64x64">
-      <img src="http://placehold.it/128x128">
+      <img src="{{site.url}}/images/placeholders/128x128.png">
     </p>
   </figure>
   <div class="media-content">
@@ -101,7 +101,7 @@ doc-subtab: media-object
 <article class="media">
   <figure class="media-left">
     <p class="image is-64x64">
-      <img src="http://placehold.it/128x128">
+      <img src="{{site.url}}/images/placeholders/128x128.png">
     </p>
   </figure>
   <div class="media-content">
@@ -142,7 +142,7 @@ doc-subtab: media-object
 <article class="media">
   <figure class="media-left">
     <p class="image is-64x64">
-      <img src="http://placehold.it/128x128">
+      <img src="{{site.url}}/images/placeholders/128x128.png">
     </p>
   </figure>
   <div class="media-content">
@@ -159,7 +159,7 @@ doc-subtab: media-object
     <article class="media">
       <figure class="media-left">
         <p class="image is-48x48">
-          <img src="http://placehold.it/96x96">
+          <img src="{{site.url}}/images/placeholders/96x96.png">
         </p>
       </figure>
       <div class="media-content">
@@ -186,7 +186,7 @@ doc-subtab: media-object
     <article class="media">
       <figure class="media-left">
         <p class="image is-48x48">
-          <img src="http://placehold.it/96x96">
+          <img src="{{site.url}}/images/placeholders/96x96.png">
         </p>
       </figure>
       <div class="media-content">
@@ -206,7 +206,7 @@ doc-subtab: media-object
 <article class="media">
   <figure class="media-left">
     <p class="image is-64x64">
-      <img src="http://placehold.it/128x128">
+      <img src="{{site.url}}/images/placeholders/128x128.png">
     </p>
   </figure>
   <div class="media-content">

docs/documentation/components/modal.html

@@ -75,7 +75,7 @@ doc-subtab: modal
   <div class="modal-background"></div>
   <div class="modal-content">
     <p class="image is-4by3">
-      <img src="http://placehold.it/1280x960">
+      <img src="{{site.url}}/images/placeholders/1280x960.png">
     </p>
   </div>
   <button class="modal-close"></button>
@@ -122,7 +122,7 @@ doc-subtab: modal
       <article class="media">
         <div class="media-left">
           <figure class="image is-64x64">
-            <img src="http://placehold.it/128x128" alt="Image">
+            <img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
           </figure>
         </div>
         <div class="media-content">
@@ -157,7 +157,7 @@ doc-subtab: modal
   <div class="modal-background"></div>
   <div class="modal-content">
     <p class="image is-4by3">
-      <img src="http://placehold.it/1280x960">
+      <img src="{{site.url}}/images/placeholders/1280x960.png">
     </p>
   </div>
   <button class="modal-close"></button>

docs/documentation/elements/box.html

@@ -31,7 +31,7 @@ doc-subtab: box
           <article class="media">
             <div class="media-left">
               <figure class="image is-64x64">
-                <img src="http://placehold.it/128x128" alt="Image">
+                <img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
               </figure>
             </div>
             <div class="media-content">
@@ -66,7 +66,7 @@ doc-subtab: box
   <article class="media">
     <div class="media-left">
       <figure class="image is-64x64">
-        <img src="http://placehold.it/128x128" alt="Image">
+        <img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
       </figure>
     </div>
     <div class="media-content">

docs/documentation/elements/form.html

@@ -38,7 +38,7 @@ doc-subtab: form
 <label class="label">Username</label>
 <p class="control has-icon has-icon-right">
   <input class="input is-success" type="text" placeholder="Text input" value="bulma">
-  <span class="icon">
+  <span class="icon is-small">
     <i class="fa fa-check"></i>
   </span>
   <span class="help is-success">This username is available</span>
@@ -46,7 +46,7 @@ doc-subtab: form
 <label class="label">Email</label>
 <p class="control has-icon has-icon-right">
   <input class="input is-danger" type="text" placeholder="Email input" value="hello@">
-  <span class="icon">
+  <span class="icon is-small">
     <i class="fa fa-warning"></i>
   </span>
   <span class="help is-danger">This email is invalid</span>
@@ -323,13 +323,13 @@ doc-subtab: form
 {% capture icons_example %}
 <p class="control has-icon">
   <input class="input" type="email" placeholder="Email">
-  <span class="icon">
+  <span class="icon is-small">
     <i class="fa fa-envelope"></i>
   </span>
 </p>
 <p class="control has-icon">
   <input class="input" type="password" placeholder="Password">
-  <span class="icon">
+  <span class="icon is-small">
     <i class="fa fa-lock"></i>
   </span>
 </p>

docs/documentation/elements/icon.html

@@ -19,16 +19,17 @@ doc-subtab: icon
       <p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a container:</p>
     </div>
 
+{% capture icon_example %}
+<span class="icon">
+  <i class="fa fa-home"></i>
+</span>
+{% endcapture %}
     <div class="example">
-      <span class="icon">
-        <i class="fa fa-home"></i>
-      </span>
+      {{icon_example}}
     </div>
 
 {% highlight html %}
-<span class="icon">
-  <i class="fa fa-home"></i>
-</span>
+{{icon_example}}
 {% endhighlight %}
 
     <div class="content">

docs/documentation/elements/image.html

@@ -21,13 +21,13 @@ doc-subtab: image
 
     <div class="example">
       <figure class="image is-128x128">
-        <img src="http://placehold.it/128x128">
+        <img src="{{site.url}}/images/placeholders/128x128.png">
       </figure>
     </div>
 
 {% highlight html %}
 <figure class="image is-128x128">
-  <img src="http://placehold.it/128x128">
+  <img src="{{site.url}}/images/placeholders/128x128.png">
 </figure>
 {% endhighlight %}
 
@@ -42,37 +42,37 @@ doc-subtab: image
       <tbody>
         <tr>
           <td><code>image is-16x16</code></td>
-          <td><figure class="image is-16x16"><img src="http://placehold.it/16x16"></figure></td>
+          <td><figure class="image is-16x16"><img src="{{site.url}}/images/placeholders/16x16.png"></figure></td>
           <td>16x16px</td>
         </tr>
         <tr>
           <td><code>image is-24x24</code></td>
-          <td><figure class="image is-24x24"><img src="http://placehold.it/24x24"></figure></td>
+          <td><figure class="image is-24x24"><img src="{{site.url}}/images/placeholders/24x24.png"></figure></td>
           <td>24x24px</td>
         </tr>
         <tr>
           <td><code>image is-32x32</code></td>
-          <td><figure class="image is-32x32"><img src="http://placehold.it/32x32"></figure></td>
+          <td><figure class="image is-32x32"><img src="{{site.url}}/images/placeholders/32x32.png"></figure></td>
           <td>32x32px</td>
         </tr>
         <tr>
           <td><code>image is-48x48</code></td>
-          <td><figure class="image is-48x48"><img src="http://placehold.it/48x48"></figure></td>
+          <td><figure class="image is-48x48"><img src="{{site.url}}/images/placeholders/48x48.png"></figure></td>
           <td>48x48px</td>
         </tr>
         <tr>
           <td><code>image is-64x64</code></td>
-          <td><figure class="image is-64x64"><img src="http://placehold.it/64x64"></figure></td>
+          <td><figure class="image is-64x64"><img src="{{site.url}}/images/placeholders/64x64.png"></figure></td>
           <td>64x64px</td>
         </tr>
         <tr>
           <td><code>image is-96x96</code></td>
-          <td><figure class="image is-96x96"><img src="http://placehold.it/96x96"></figure></td>
+          <td><figure class="image is-96x96"><img src="{{site.url}}/images/placeholders/96x96.png"></figure></td>
           <td>96x96px</td>
         </tr>
         <tr>
           <td><code>image is-128x128</code></td>
-          <td><figure class="image is-128x128"><img src="http://placehold.it/128x128"></figure></td>
+          <td><figure class="image is-128x128"><img src="{{site.url}}/images/placeholders/128x128.png"></figure></td>
           <td>128x128px</td>
         </tr>
       </tbody>
@@ -86,13 +86,13 @@ doc-subtab: image
 
     <div class="example">
       <figure class="image is-128x128">
-        <img src="http://placehold.it/256x256">
+        <img src="{{site.url}}/images/placeholders/256x256.png">
       </figure>
     </div>
 
 {% highlight html %}
 <figure class="image is-128x128">
-  <img src="http://placehold.it/256x256">
+  <img src="{{site.url}}/images/placeholders/256x256.png">
 </figure>
 {% endhighlight %}
 
@@ -108,32 +108,32 @@ doc-subtab: image
       <tbody>
         <tr>
           <td><code>image is-square</code></td>
-          <td><figure class="image is-square"><img src="http://placehold.it/480x480"></figure></td>
+          <td><figure class="image is-square"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
           <td>Square (or 1by1)</td>
         </tr>
         <tr>
           <td><code>image is-1by1</code></td>
-          <td><figure class="image is-1by1"><img src="http://placehold.it/480x480"></figure></td>
+          <td><figure class="image is-1by1"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
           <td>1 by 1</td>
         </tr>
         <tr>
           <td><code>image is-4by3</code></td>
-          <td><figure class="image is-4by3"><img src="http://placehold.it/640x480"></figure></td>
+          <td><figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure></td>
           <td>4 by 3</td>
         </tr>
         <tr>
           <td><code>image is-3by2</code></td>
-          <td><figure class="image is-3by2"><img src="http://placehold.it/480x320"></figure></td>
+          <td><figure class="image is-3by2"><img src="{{site.url}}/images/placeholders/480x320.png"></figure></td>
           <td>3 by 2</td>
         </tr>
         <tr>
           <td><code>image is-16by9</code></td>
-          <td><figure class="image is-16by9"><img src="http://placehold.it/640x360"></figure></td>
+          <td><figure class="image is-16by9"><img src="{{site.url}}/images/placeholders/640x360.png"></figure></td>
           <td>16 by 9</td>
         </tr>
         <tr>
           <td><code>image is-2by1</code></td>
-          <td><figure class="image is-2by1"><img src="http://placehold.it/640x320"></figure></td>
+          <td><figure class="image is-2by1"><img src="{{site.url}}/images/placeholders/640x320.png"></figure></td>
           <td>2 by 1</td>
         </tr>
       </tbody>

docs/documentation/grid/tiles.html

@@ -44,7 +44,7 @@ doc-subtab: tiles
               <p class="title">Middle tile</p>
               <p class="subtitle">With an image</p>
               <figure class="image is-4by3">
-                <img src="http://placehold.it/640x480">
+                <img src="{{site.url}}/images/placeholders/640x480.png">
               </figure>
             </article>
           </div>
@@ -93,7 +93,7 @@ doc-subtab: tiles
           <p class="title">Middle tile</p>
           <p class="subtitle">With an image</p>
           <figure class="image is-4by3">
-            <img src="http://placehold.it/640x480">
+            <img src="{{site.url}}/images/placeholders/640x480.png">
           </figure>
         </article>
       </div>
@@ -383,7 +383,7 @@ tile is-ancestor
               <p class="title">Middle box</p>
               <p class="subtitle">With an image</p>
               <figure class="image is-4by3">
-                <img src="http://placehold.it/640x480">
+                <img src="{{site.url}}/images/placeholders/640x480.png">
               </figure>
             </article>
           </div>
@@ -490,7 +490,7 @@ tile is-ancestor
               <p class="title">Middle box</p>
               <p class="subtitle">With an image</p>
               <figure class="image is-4by3">
-                <img src="http://placehold.it/640x480">
+                <img src="{{site.url}}/images/placeholders/640x480.png">
               </figure>
             </article>
           </div>
@@ -583,7 +583,7 @@ tile is-ancestor
           <p class="title">Middle box</p>
           <p class="subtitle">With an image</p>
           <figure class="image is-4by3">
-            <img src="http://placehold.it/640x480">
+            <img src="{{site.url}}/images/placeholders/640x480.png">
           </figure>
         </article>
       </div>

docs/documentation/overview/start.html

@@ -14,7 +14,9 @@ doc-subtab: start
     <hr>
 
     <article class="media is-large">
-      <div class="media-number">1</div>
+      <div class="media-left">
+        <p class="title is-5">1</p>
+      </div>
       <div class="media-content">
         <p class="title is-5">
           Use <strong>NPM</strong> <em>(recommended)</em>:
@@ -26,7 +28,9 @@ npm install bulma
     </article>
 
     <article class="media is-large">
-      <div class="media-number">2</div>
+      <div class="media-left">
+        <p class="title is-5">2</p>
+      </div>
       <div class="media-content">
         <p class="title is-5">
           Use the <a href="https://cdnjs.com/" target="_blank">cdnjs</a> <strong>CDN</strong>
@@ -37,7 +41,9 @@ npm install bulma
     </article>
 
     <article class="media is-large">
-      <div class="media-number">3</div>
+      <div class="media-left">
+        <p class="title is-5">3</p>
+      </div>
       <div class="media-content">
         <p class="title is-5">
           Download from the <strong>repository</strong>
@@ -70,7 +76,9 @@ npm install bulma
     </div>
 
     <article class="media is-large">
-      <div class="media-number">1</div>
+      <div class="media-left">
+        <p class="title is-5">1</p>
+      </div>
       <div class="media-content">
         <p class="title is-5">
           <strong>Download</strong> the source files:
@@ -83,7 +91,9 @@ npm install bulma
     </article>
 
     <article class="media is-large">
-      <div class="media-number">2</div>
+      <div class="media-left">
+        <p class="title is-5">2</p>
+      </div>
       <div class="media-content">
         <p class="title is-5">
           <strong>Set</strong> your variables:<br>
@@ -107,7 +117,9 @@ $family-primary: $family-serif // Use the new serif family
     </article>
 
     <article class="media is-large">
-      <div class="media-number">3</div>
+      <div class="media-left">
+        <p class="title is-5">3</p>
+      </div>
       <div class="media-content">
         <p class="title is-5">
           <strong>Import</strong> Bulma <em>after</em> having set your variables:<br>

docs/index.html

@@ -214,7 +214,7 @@ route: index
               <p class="title">Middle tile</p>
               <p class="subtitle">With an image</p>
               <figure class="image is-4by3">
-                <img src="http://placehold.it/640x480">
+                <img src="{{site.url}}/images/placeholders/640x480.png">
               </figure>
             </article>
           </div>
@@ -359,7 +359,7 @@ route: index
           <article class="media">
             <div class="media-left">
               <figure class="image is-64x64">
-                <img src="http://placehold.it/128x128" alt="Image">
+                <img src="{{site.url}}/images/placeholders/128x128.png" alt="Image">
               </figure>
             </div>
             <div class="media-content">
@@ -490,14 +490,14 @@ route: index
         <div class="card">
           <div class="card-image">
             <figure class="image is-4by3">
-              <img src="http://placehold.it/300x225" alt="">
+              <img src="{{site.url}}/images/placeholders/300x225.png" alt="">
             </figure>
           </div>
           <div class="card-content">
             <div class="media">
               <div class="media-left">
                 <figure class="image is-32x32">
-                  <img src="http://placehold.it/64x64" alt="Image">
+                  <img src="{{site.url}}/images/placeholders/64x64.png" alt="Image">
                 </figure>
               </div>
               <div class="media-content">

docs/templates.html

@@ -29,21 +29,21 @@ route: templates
         <a class="box" href="{{ site.url }}/templates/everything.html">
           <h3 class="title is-4">Everything</h3>
           <h4 class="subtitle is-5">All Bulma elements on one page</h4>
-          <figure class="image is-4by3"><img src="http://placehold.it/640x480"></figure>
+          <figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure>
         </a>
       </div>
       <div class="column is-one-third">
         <a class="box" href="{{ site.url }}/templates/business.html">
           <h3 class="title is-4">Business</h3>
           <h4 class="subtitle is-5">Classic business homepage</h4>
-          <figure class="image is-4by3"><img src="http://placehold.it/640x480"></figure>
+          <figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure>
         </a>
       </div>
       <div class="column is-one-third">
         <a class="box" href="{{ site.url }}/templates/welcome.html">
           <h3 class="title is-4">Welcome</h3>
           <h4 class="subtitle is-5">Simple one-page introduction</h4>
-          <figure class="image is-4by3"><img src="http://placehold.it/640x480"></figure>
+          <figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure>
         </a>
       </div>
     </div>

docs/tiles.html

@@ -275,7 +275,7 @@ tile is-ancestor
               <p class="title">Middle box</p>
               <p class="subtitle">With an image</p>
               <figure class="image is-4by3">
-                <img src="http://placehold.it/640x480">
+                <img src="{{site.url}}/images/placeholders/640x480.png">
               </figure>
             </article>
           </div>
@@ -382,7 +382,7 @@ tile is-ancestor
               <p class="title">Middle box</p>
               <p class="subtitle">With an image</p>
               <figure class="image is-4by3">
-                <img src="http://placehold.it/640x480">
+                <img src="{{site.url}}/images/placeholders/640x480.png">
               </figure>
             </article>
           </div>
@@ -475,7 +475,7 @@ tile is-ancestor
           <p class="title">Middle box</p>
           <p class="subtitle">With an image</p>
           <figure class="image is-4by3">
-            <img src="http://placehold.it/640x480">
+            <img src="{{site.url}}/images/placeholders/640x480.png">
           </figure>
         </article>
       </div>

sass/base/generic.sass

@@ -52,7 +52,7 @@ a
 code
   background-color: $code-background
   color: $code
-  font-size: 0.75em
+  font-size: 0.8em
   font-weight: normal
   padding: 0.25em 0.5em 0.25em
 
@@ -86,7 +86,7 @@ strong
 pre
   background-color: $pre-background
   color: $pre
-  font-size: 0.75em
+  font-size: 0.8em
   white-space: pre
   word-wrap: normal
   code

sass/components/menu.sass

@@ -23,7 +23,7 @@
 
 .menu-label
   color: $text-light
-  font-size: 0.75em
+  font-size: 0.8em
   letter-spacing: 1px
   text-transform: uppercase
   &:not(:first-child)

sass/components/nav.sass

@@ -1,4 +1,4 @@
-$nav-height: 3rem !default
+$nav-height: 3.5rem !default
 
 // Components
 
@@ -20,7 +20,7 @@ $nav-height: 3rem !default
     flex-grow: 1
     flex-shrink: 0
   img
-    max-height: 1.5rem
+    max-height: 1.75rem
   .button + .button
     margin-left: 0.75rem
   .tag
@@ -48,11 +48,11 @@ a.nav-item
     padding-right: 1rem
     padding-top: calc(0.5rem - 1px)
     &:hover
-      border-bottom-color: $link
+      border-bottom-color: $primary
       border-top-color: transparent
     &.is-active
-      border-bottom: 3px solid $link
-      color: $link
+      border-bottom: 3px solid $primary
+      color: $primary
       padding-bottom: calc(0.5rem - 3px)
 
 // Containers

sass/components/tabs.sass

@@ -24,8 +24,8 @@
     display: block
     &.is-active
       a
-        border-bottom-color: $link
-        color: $link
+        border-bottom-color: $primary
+        color: $primary
   ul
     align-items: center
     border-bottom: 1px solid $border

sass/elements/button.sass

@@ -1,6 +1,6 @@
-$button:                     $grey-darker !default
-$button-background:          $white !default
-$button-border:              $grey-lighter !default
+$button: $grey-darker !default
+$button-background: $white !default
+$button-border: $grey-lighter !default
 
 $button-hover: $link-hover !default
 $button-hover-border: $link-hover-border !default
@@ -13,63 +13,58 @@ $button-active-border: $link-active-border !default
 
 $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
 
-@function buttonIconSpacing($button-size, $icon-width)
+@function buttonIconSpacing($button-font-size, $icon-width)
   // The rem height of the button
-  $button-height: 2.5 * $button-size
-  // For the button to be square, the horizontal padding + the icon width must equal the button height.
-  // We know that $horizontal-padding = 2em
-  $horizontal-padding: 2 * $button-size
-  // We want to solve:
-  // $button-height = $horizontal-padding + $icon-width + $x
-  $x: $button-height - $horizontal-padding - $icon-width
-  // We divide by 2 to apply this margin on both the left and right sides
-  @return abs($x) / 2
+  // based on a height of 2.5em
+  $button-height: 2.5 * $button-font-size // rem
+  // The rem total horizontal padding of the button
+  $button-horizontal-padding: 2 * 0.75 * $button-font-size // rem
+  // For the icon center to align with the button center
+  // the horizontal padding + the icon width must equal the button height
+  // $button-height = $button-horizontal-padding + $icon-width + $difference
+  $difference: $button-height - $button-horizontal-padding - $icon-width
+  @return $difference / 2
 
-=button-icon($button-size)
-  $small-spacing: buttonIconSpacing($button-size, 1rem)
-  $normal-spacing: buttonIconSpacing($button-size, 1.5rem)
-  $medium-spacing: buttonIconSpacing($button-size, 2rem)
-  $large-spacing: buttonIconSpacing($button-size, 3rem)
+=button-icon($button-font-size)
+  $small-offset: buttonIconSpacing($button-font-size, 1rem)
+  $normal-offset: buttonIconSpacing($button-font-size, 1.5rem)
+  $medium-offset: buttonIconSpacing($button-font-size, 2rem)
+  $large-offset: buttonIconSpacing($button-font-size, 3rem)
   .icon
     &:first-child:not(:last-child)
-      margin-left: -$normal-spacing / 2
-      margin-right: $normal-spacing
+      margin-left: $normal-offset
+      margin-right: $button-font-size / 2
     &:last-child:not(:first-child)
-      margin-left: $normal-spacing
-      margin-right: -$normal-spacing / 2
+      margin-left: $button-font-size / 2
+      margin-right: $normal-offset
     &:first-child:last-child
-      margin-left: calc(-1px - #{$normal-spacing})
-      margin-right: calc(-1px - #{$normal-spacing})
+      // The -1px is to account for the button 1px border
+      margin-left: calc(-1px + #{$normal-offset})
+      margin-right: calc(-1px + #{$normal-offset})
     &.is-small
       &:first-child:not(:last-child)
-        margin-left: -$small-spacing / 2
-        margin-right: $small-spacing
+        margin-left: $small-offset
       &:last-child:not(:first-child)
-        margin-left: $small-spacing
-        margin-right: -$small-spacing / 2
+        margin-right: $small-offset
       &:first-child:last-child
-        margin-left: calc(-1px - #{$small-spacing})
-        margin-right: calc(-1px - #{$small-spacing})
+        margin-left: calc(-1px + #{$small-offset})
+        margin-right: calc(-1px + #{$small-offset})
     &.is-medium
       &:first-child:not(:last-child)
-        margin-left: -$medium-spacing / 2
-        margin-right: $medium-spacing
+        margin-left: $medium-offset
       &:last-child:not(:first-child)
-        margin-left: $medium-spacing
-        margin-right: -$medium-spacing / 2
+        margin-right: $medium-offset
       &:first-child:last-child
-        margin-left: calc(-1px - #{$medium-spacing})
-        margin-right: calc(-1px - #{$medium-spacing})
+        margin-left: calc(-1px + #{$medium-offset})
+        margin-right: calc(-1px + #{$medium-offset})
     &.is-large
       &:first-child:not(:last-child)
-        margin-left: -$large-spacing / 2
-        margin-right: $large-spacing
+        margin-left: $large-offset
       &:last-child:not(:first-child)
-        margin-left: $large-spacing
-        margin-right: -$large-spacing / 2
+        margin-right: $large-offset
       &:first-child:last-child
-        margin-left: calc(-1px - #{$large-spacing})
-        margin-right: calc(-1px - #{$large-spacing})
+        margin-left: calc(-1px + #{$large-offset})
+        margin-right: calc(-1px + #{$large-offset})
 
 // The button sizes use mixins so they can be used at different breakpoints
 =button-small
@@ -91,8 +86,8 @@ $button-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
   color: $button
   cursor: pointer
   justify-content: center
-  padding-left: 1em
-  padding-right: 1em
+  padding-left: 0.75em
+  padding-right: 0.75em
   text-align: center
   white-space: nowrap
   strong

sass/elements/content.sass

@@ -3,11 +3,8 @@
   color: $text
   // Inline
   a:not(.button)
-    border-bottom: 1px solid $border
     &:visited
       color: $link-visited
-    &:hover
-      border-bottom-color: $link
   li + li
     margin-top: 0.25em
   // Block

sass/elements/icon.sass

@@ -1,5 +1,6 @@
 .icon
   +fa(21px, 1.5rem)
+  background: coral
   .fa
     font-size: inherit
     line-height: inherit

sass/grid/tiles.sass

@@ -1,7 +1,7 @@
 .tile
   align-items: stretch
   display: block
-  flex-basis: auto
+  flex-basis: 0
   flex-grow: 1
   flex-shrink: 1
   min-height: min-content

sass/utilities/variables.sass

@@ -34,7 +34,7 @@ $size-2: 2.75rem !default
 $size-3: 2rem !default
 $size-4: 1.5rem !default
 $size-5: 1.25rem !default
-$size-6: 16px !default
+$size-6: 14px !default
 $size-7: 0.75rem !default
 
 $weight-light: 300 !default
@@ -68,11 +68,19 @@ $dark: $grey-darker !default
 // 3. Applied variables
 
 // Invert colors
-$primary-invert: findColorInvert($primary) !default
-$info-invert: findColorInvert($info) !default
-$success-invert: findColorInvert($success) !default
-$warning-invert: findColorInvert($warning) !default
-$danger-invert: findColorInvert($danger) !default
+$orange-invert: findColorInvert($orange) !default
+$yellow-invert: findColorInvert($yellow) !default
+$green-invert: findColorInvert($green) !default
+$turquoise-invert: findColorInvert($turquoise) !default
+$blue-invert: findColorInvert($blue) !default
+$purple-invert: findColorInvert($purple) !default
+$red-invert: findColorInvert($red) !default
+
+$primary-invert: $turquoise-invert !default
+$info-invert: $blue-invert !default
+$success-invert: $green-invert !default
+$warning-invert: $yellow-invert !default
+$danger-invert: $red-invert !default
 $light-invert: $dark !default
 $dark-invert: $light !default