Add component icons

docs/_data/links.json

@@ -289,7 +289,7 @@
     "elements-button": {
       "name": "Button",
       "subtitle": "The classic <strong>button</strong>, in different colors, sizes, and states",
-      "color": "primary",
+      "color": "success",
       "icon": "hand-pointer",
       "icon_regular": "true",
       "path": "/documentation/elements/button"
@@ -297,7 +297,7 @@
     "elements-content": {
       "name": "Content",
       "subtitle": "A single class to handle <strong>WYSIWYG</strong> generated content, where only <strong>HTML tags</strong> are available",
-      "color": "success",
+      "color": "primary",
       "icon": "align-left",
       "path": "/documentation/elements/content"
     },
@@ -325,7 +325,7 @@
     "elements-notification": {
       "name": "Notification",
       "subtitle": "Bold <strong>notification</strong> blocks, to alert your users of something",
-      "color": "danger",
+      "color": "orange",
       "icon": "exclamation-triangle",
       "path": "/documentation/elements/notification"
     },
@@ -346,7 +346,7 @@
     "elements-tag": {
       "name": "Tag",
       "subtitle": "Small <strong>tag labels</strong> to insert anywhere",
-      "color": "orange",
+      "color": "success",
       "icon": "tag",
       "path": "/documentation/elements/tag"
     },
@@ -367,51 +367,72 @@
     "components-breadcrumb": {
       "name": "Breadcrumb",
       "subtitle": "A simple <strong>breadcrumb</strong> component to improve your navigation experience",
+      "color": "star",
+      "icon": "ellipsis-h",
       "path": "/documentation/components/breadcrumb"
     },
     "components-card": {
       "name": "Card",
       "subtitle": "An all-around flexible and composable component",
+      "color": "success",
+      "icon": "id-card",
       "path": "/documentation/components/card"
     },
     "components-dropdown": {
       "name": "Dropdown",
       "subtitle": "An interactive <strong>dropdown menu</strong> for discoverable content",
+      "color": "success",
+      "icon": "angle-down",
       "path": "/documentation/components/dropdown"
     },
     "components-menu": {
       "name": "Menu",
       "subtitle": "A simple <strong>menu</strong>, for any type of vertical navigation",
+      "icon": "bars",
       "path": "/documentation/components/menu"
     },
     "components-message": {
       "name": "Message",
       "subtitle": "Colored <strong>message</strong> blocks, to emphasize part of your page",
+      "color": "info",
+      "icon": "window-maximize",
+      "icon_regular": "true",
       "path": "/documentation/components/message"
     },
     "components-modal": {
       "name": "Modal",
       "subtitle": "A classic <strong>modal</strong> overlay, in which you can include <em>any</em> content you want",
+      "color": "danger",
+      "icon": "clone",
       "path": "/documentation/components/modal"
     },
     "components-navbar": {
       "name": "Navbar",
       "subtitle": "A responsive horizontal <strong>navbar</strong> that can support images, links, buttons, and dropdowns",
+      "color": "primary",
+      "icon": "minus",
       "path": "/documentation/components/navbar"
     },
     "components-pagination": {
       "name": "Pagination",
       "subtitle": "A responsive, usable, and flexible <strong>pagination</strong>",
+      "color": "orange",
+      "icon": "caret-square-right",
       "path": "/documentation/components/pagination"
     },
     "components-panel": {
       "name": "Panel",
       "subtitle": "A composable <strong>panel</strong>, for compact controls",
+      "color": "grey-dark",
+      "icon": "list-alt",
+      "icon_regular": "true",
       "path": "/documentation/components/panel"
     },
     "components-tabs": {
       "name": "Tabs",
       "subtitle": "Simple responsive horizontal navigation <strong>tabs</strong>, with different styles",
+      "color": "purple",
+      "icon": "folder",
       "path": "/documentation/components/tabs"
     },
     "blog": {

docs/_sass/index.sass

@@ -2,12 +2,16 @@
 
 .bd-index-header
   text-align: center
+  a,
+  strong
+    transition-duration: $speed
+    transition-property: color
   a
     color: currentColor
     &:hover
       color: $blue
       strong
-        color: currentColor
+        color: $link
   strong
     font-weight: $weight-semibold
   .title

docs/css/bulma-docs.css

@@ -10295,6 +10295,12 @@ svg {
   text-align: center;
 }
 
+.bd-index-header a,
+.bd-index-header strong {
+  transition-duration: 86ms;
+  transition-property: color;
+}
+
 .bd-index-header a {
   color: currentColor;
 }
@@ -10304,7 +10310,7 @@ svg {
 }
 
 .bd-index-header a:hover strong {
-  color: currentColor;
+  color: #3273dc;
 }
 
 .bd-index-header strong {

docs/documentation/components/panel.html

@@ -108,6 +108,6 @@ meta:
   </p>
 </div>
 
-{% include elements/snippet.html content=panel_example size="one-third" %}
+{% include elements/snippet.html content=panel_example %}
 
 {% include elements/variables.html type='component' %}