Add more link icons

docs/_data/links.json

@@ -150,7 +150,7 @@
     "layout-media": {
       "name": "Media Object",
       "subtitle": "The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context",
-      "path": "/documentation/layout/media"
+      "path": "/documentation/layout/media-object"
     },
     "layout-hero": {
       "name": "Hero",
@@ -183,36 +183,51 @@
     "form-general": {
       "name": "General",
       "subtitle": "All generic <strong>form controls</strong>, designed for consistency",
+      "color": "link",
+      "icon": "keyboard",
+      "icon_regular": "true",
       "path": "/documentation/form/general"
     },
     "form-input": {
       "name": "Input",
       "subtitle": "The <strong>text input</strong> and its variations",
+      "color": "link",
+      "icon": "minus",
       "path": "/documentation/form/input"
     },
     "form-textarea": {
       "name": "Textarea",
       "subtitle": "The multiline <strong>textarea</strong> and its variations",
+      "color": "link",
+      "icon": "square",
       "path": "/documentation/form/textarea"
     },
     "form-select": {
       "name": "Select",
       "subtitle": "The browser built-in <strong>select dropdown</strong>, styled accordingly",
+      "color": "link",
+      "icon": "mouse-pointer",
       "path": "/documentation/form/select"
     },
     "form-checkbox": {
       "name": "Checkbox",
       "subtitle": "The 2-state <strong>checkbox</strong> in its native format",
+      "color": "link",
+      "icon": "check-square",
       "path": "/documentation/form/checkbox"
     },
     "form-radio": {
       "name": "Radio",
       "subtitle": "The mutually exclusive <strong>radio buttons</strong> in their native format",
+      "color": "link",
+      "icon": "dot-circle",
       "path": "/documentation/form/radio"
     },
     "form-file": {
       "name": "File",
       "subtitle": "A custom <strong>file upload</strong> input, without JavaScript",
+      "color": "link",
+      "icon": "cloud-upload-alt",
       "path": "/documentation/form/file"
     },
     "elements": {
@@ -225,56 +240,80 @@
     "elements-box": {
       "name": "Box",
       "subtitle": "A white <strong>box</strong> to contain other elements",
+      "color": "grey",
+      "icon": "square",
+      "icon_regular": "true",
       "path": "/documentation/elements/box"
     },
     "elements-button": {
       "name": "Button",
       "subtitle": "The classic <strong>button</strong>, in different colors, sizes, and states",
+      "color": "primary",
+      "icon": "hand-pointer",
+      "icon_regular": "true",
       "path": "/documentation/elements/button"
     },
     "elements-content": {
       "name": "Content",
-      "subtitle": "A single class to handle WYSIWYG generated content, where only <strong>HTML tags</strong> are available",
+      "subtitle": "A single class to handle <strong>WYSIWYG</strong> generated content, where only <strong>HTML tags</strong> are available",
+      "color": "success",
+      "icon": "align-left",
       "path": "/documentation/elements/content"
     },
     "elements-delete": {
       "name": "Delete",
       "subtitle": "A versatile <strong>delete</strong> cross",
+      "color": "danger",
+      "icon": "times-circle",
       "path": "/documentation/elements/delete"
     },
     "elements-icon": {
       "name": "Icon",
       "subtitle": "Compatible with all icon font libraries, including <strong>Font Awesome 5</strong>",
+      "icon": "font-awesome",
+      "icon_brand": "true",
       "path": "/documentation/elements/icon"
     },
     "elements-image": {
       "name": "Image",
       "subtitle": "A container for <strong>responsive images</strong>",
+      "color": "bootstrap",
+      "icon": "image",
       "path": "/documentation/elements/image"
     },
     "elements-notification": {
       "name": "Notification",
       "subtitle": "Bold <strong>notification</strong> blocks, to alert your users of something",
+      "color": "danger",
+      "icon": "exclamation-triangle",
       "path": "/documentation/elements/notification"
     },
     "elements-progress": {
       "name": "Progress bars",
       "subtitle": "Native HTML <strong>progress</strong> bars",
+      "color": "warning",
+      "icon": "spinner",
       "path": "/documentation/elements/progress"
     },
     "elements-table": {
       "name": "Table",
       "subtitle": "The inevitable HTML <strong>table</strong>, with special case cells",
+      "color": "info",
+      "icon": "table",
       "path": "/documentation/elements/table"
     },
     "elements-tag": {
       "name": "Tag",
       "subtitle": "Small <strong>tag labels</strong> to insert anywhere",
+      "color": "orange",
+      "icon": "tag",
       "path": "/documentation/elements/tag"
     },
     "elements-title": {
       "name": "Title",
       "subtitle": "Simple <strong>headings</strong> to add depth to your page",
+      "color": "black",
+      "icon": "heading",
       "path": "/documentation/elements/title"
     },
     "components": {

docs/_includes/elements/link.html

@@ -2,7 +2,7 @@
   <h2 class="bd-link-name">
     <figure class="bd-link-figure">
       {% if include.icon %}
-        <span class="bd-link-icon has-text-{{ include.color }}">
+        <span class="bd-link-icon has-text-{% if include.color %}{{ include.color }}{% else %}link{% endif %}">
           <i class="{% if include.icon_brand %}fab{% elsif include.icon_regular %}far{% else %}fas{% endif %} fa-{{ include.icon }}"></i>
         </span>
       {% else %}

docs/_javascript/main.js

@@ -38,6 +38,7 @@ document.addEventListener('DOMContentLoaded', () => {
   let anchor_nav_els = [];
 
   if (anchors_el && anchor_links_el.length > 0) {
+    anchors_el.classList.add('is-active');
     const anchors_el_list = anchors_el.querySelector('.bd-anchors-list');
 
     anchor_links_el.forEach((el, index) => {

docs/_sass/main.sass

@@ -134,8 +134,12 @@
   height: 1px
 
 .bd-anchors
+  display: none
+  max-width: $sidebar-width
   padding-top: calc(1.5rem - 1px)
   +tablet
+    &.is-active
+      display: block
     &.is-pinned
       position: fixed
       top: 0
@@ -165,8 +169,6 @@
   .bd-side-background
     display: none
 
-$sidebar-width: 14rem
-
 +tablet
   .bd-duo
     display: flex
@@ -202,3 +204,11 @@ $sidebar-width: 14rem
     width: $carbon-width
   .bd-side
     padding: 3rem 0 3rem 1.5rem
+
++widescreen
+  .bd-header-carbon
+    margin-left: ($main-spacing * 3)
+
++fullhd
+  .bd-header-carbon
+    margin-left: ($main-spacing * 4)

docs/bulma-docs.sass

@@ -22,6 +22,7 @@ $carbon-width: 300px
 $carbon-height: 100px
 $main-spacing: 3rem
 $intro-width: 1080px
+$sidebar-width: 14rem
 
 $navbar-item-img-max-height: none
 

docs/css/bulma-docs.css

@@ -9686,10 +9686,15 @@ label.panel-block:hover {
 }
 
 .bd-anchors {
+  display: none;
+  max-width: 14rem;
   padding-top: calc(1.5rem - 1px);
 }
 
 @media screen and (min-width: 769px), print {
+  .bd-anchors.is-active {
+    display: block;
+  }
   .bd-anchors.is-pinned {
     position: fixed;
     top: 0;
@@ -9776,6 +9781,18 @@ label.panel-block:hover {
   }
 }
 
+@media screen and (min-width: 1280px) {
+  .bd-header-carbon {
+    margin-left: 9rem;
+  }
+}
+
+@media screen and (min-width: 1472px) {
+  .bd-header-carbon {
+    margin-left: 12rem;
+  }
+}
+
 .highlight {
   background-color: #f5f5f5;
   color: #586e75;

docs/lib/main.js

@@ -40,6 +40,7 @@ document.addEventListener('DOMContentLoaded', function () {
   var anchor_nav_els = [];
 
   if (anchors_el && anchor_links_el.length > 0) {
+    anchors_el.classList.add('is-active');
     var anchors_el_list = anchors_el.querySelector('.bd-anchors-list');
 
     anchor_links_el.forEach(function (el, index) {