Add more color documentation, Add light buttons to docs

docs/documentation/elements/notification.html

@@ -52,10 +52,22 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 {% endcapture %}
 
+<div class="content">
+  <p>
+    The notification is a simple colored block meant to draw the attention to the user about something. As such, it can be used as a pinned notification in the corner of the viewport. That's why it supports the use of the <code>.delete</code> element.
+  </p>
+</div>
+
 {% include elements/snippet.html content=notification %}
 
 {% include elements/anchor.html name="Colors" %}
 
+<div class="content">
+  <p>
+    The notification element is available in all the <strong>different colors</strong> defined by the <a href="{{ site.data.links.by_id.customize-variables.path }}"><code>$colors</code> Sass map</a>.
+  </p>
+</div>
+
 {% include elements/snippet.html content=notification_colors %}
 
 <div id="notificationJsExample" class="message is-info">
@@ -63,18 +75,12 @@ document.addEventListener('DOMContentLoaded', () => {
   <div class="message-body">
     <div class="content">
       <p>
-        The Bulma package <strong>does not come with any JavaScript</strong>.
-        <br>
-        Here is however an implementation example, which sets <code>click</code> handler for <code>delete</code> elements of all notifications on the page, in Vanilla Javascript.
+        The Bulma package <strong>does not come with any JavaScript</strong>. Here is however an implementation example, which sets <code>click</code> handler for <code>delete</code> elements of all notifications on the page, in Vanilla Javascript.
       </p>
 
       {% highlight html %}{{ notification_js_html }}{% endhighlight %}
 
       {% highlight javascript %}{{ notification_js_code }}{% endhighlight %}
-
-      <p>
-        Remember, these are just implementation examples. The Bulma package <strong>does not come with any JavaScript</strong>.
-      </p>
     </div>
   </div>
 </div>