Fix blog

diff --git a/docs/_data/links.json b/docs/_data/links.json
index 944d1085c61d188b74f9c5226d3de28a8f7257f5..470ee9d17ed8b4be1ba466e5e2eb7d8fa027631e 100644 (file)
--- a/docs/_data/links.json
+++ b/docs/_data/links.json
@@ -318,6 +318,10 @@
       "name": "Tabs",
       "subtitle": "Simple responsive horizontal navigation <strong>tabs</strong>, with different styles",
       "path": "/documentation/components/tabs"
+    },
+    "blog": {
+      "name": "Blog",
+      "path": "/blog"
     }
   },
   "categories": {

diff --git a/docs/_data/meta.json b/docs/_data/meta.json
index a171d2d699e7410f1ca355354678c8ed8b4bc864..83273d3c70e32c37192aea79073391d90a2c6937 100644 (file)
--- a/docs/_data/meta.json
+++ b/docs/_data/meta.json
@@ -1,7 +1,7 @@
 {
   "title": "Bulma: a modern CSS framework based on Flexbox",
   "description": "Bulma is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.",
-  "documentation": "/documentation/overview/start/",
+  "documentation": "/documentation",
   "download": "https://github.com/jgthms/bulma/releases/download/0.6.2/bulma-0.6.2.zip",
   "github": "https://github.com/jgthms/bulma",
   "twitter": "https://twitter.com/jgthms",
@@ -9,4 +9,4 @@
   "book_url": "https://bleedingedgepress.com/creating-interfaces-bulma/",
   "book_amazon": "https://www.amazon.com/Creating-Interfaces-Bulma-Jeremy-Thomas-ebook/dp/B079M1BJG4/",
   "book_sample": "http://www.bleedingedgepress.com/book_excerpts/01E9D1/creating_interfaces_with_bulma_sample.pdf"
-}
\ No newline at end of file
+}

diff --git a/docs/_includes/blog-hero.html b/docs/_includes/blog-hero.html
index 3a49c3c585d77ae37f3bcbfe6d17e06327958f9e..b43648da137fc4c8f37bec8c34949ae37228134a 100644 (file)
--- a/docs/_includes/blog-hero.html
+++ b/docs/_includes/blog-hero.html
@@ -1,27 +1,20 @@
-{% include navbar.html id="BlogHero" %}
+<header class="bd-header">
+  <div class="bd-header-titles">
+    <h1 class="title">
+      Blog
+    </h1>
+    <p class="subtitle is-4">
+      Stay updated about new features, bug fixes, and releases
+    </p>
+    <a class="button bd-is-rss" href="{{ site.url }}/atom.xml">
+      <span class="icon">
+        <i class="fas fa-rss"></i>
+      </span>
+      <span>Subscribe</span>
+    </a>
+  </div>
 
-<section class="hero is-warning">
-  <div class="hero-body">
-    <div class="container">
-      <div class="columns is-vcentered">
-        <div class="column">
-          <h1 class="title">
-            <a href="{{ site.url }}/blog">Blog</a>
-          </h1>
-          <p class="subtitle">
-            Stay updated about new features, bug fixes, and releases
-          </p>
-          <a class="button bd-is-rss" href="{{ site.url }}/atom.xml">
-            <span class="icon">
-              <i class="fas fa-rss"></i>
-            </span>
-            <span>Subscribe</span>
-          </a>
-        </div>
-        <div class="column is-narrow">
-          {% include carbon.html %}
-        </div>
-      </div>
-    </div>
+  <div class="bd-header-carbon">
+    {% include carbon.html %}
   </div>
-</section>
+</header>

diff --git a/docs/_includes/components/breadcrumb.html b/docs/_includes/components/breadcrumb.html
new file mode 100644 (file)
index 0000000..26a63db
--- /dev/null
+++ b/docs/_includes/components/breadcrumb.html
@@ -0,0 +1,36 @@
+<div class="bd-breadcrumb">
+  <nav class="breadcrumb" aria-label="breadcrumbs">
+    <ul>
+      {% for key in page.breadcrumb %}
+        {% assign link = site.data.links.by_id[key] %}
+        <li{% if forloop.last %} class="is-active"{% endif %}>
+          <a href="{{ site.url }}{{ link.path }}">{{ link.name }}</a>
+        </li>
+      {% endfor %}
+    </ul>
+  </nav>
+
+  {% if previous_link or next_link %}
+    <nav class="bd-prev-next">
+      {% if previous_link %}
+        <a href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
+          ←
+        </a>
+      {% else %}
+        <span>
+          ←
+        </span>
+      {% endif %}
+
+      {% if next_link %}
+        <a href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
+          →
+        </a>
+      {% else %}
+        <span>
+          →
+        </span>
+      {% endif %}
+    </nav>
+  {% endif %}
+</div>

diff --git a/docs/_includes/components/links.html b/docs/_includes/components/links.html
index 0bb3ddbd2d5c47073a1cda79c0566068ce322a85..35363a5f79f8603154387b4b6e0aa02580bfbde6 100644 (file)
--- a/docs/_includes/components/links.html
+++ b/docs/_includes/components/links.html
@@ -14,8 +14,13 @@
       {% assign link = site.data.links.by_id[thingy] %}
     {% endif %}
     <a class="bd-link" href="{{ site.url }}{{ link.path }}">
-      <h2 class="bd-link-name">{{ link.name }}</h2>
-      <p class="bd-link-subtitle">{{ link.subtitle }}</p>
+      <h2 class="bd-link-name">
+        <span class="bd-link-counter"></span>
+        {{ link.name }}
+      </h2>
+      <p class="bd-link-subtitle">
+        {{ link.subtitle }}
+      </p>
     </a>
   {% endfor %}
 </nav>

diff --git a/docs/_includes/navbar.html b/docs/_includes/navbar.html
index c4493e247b4154a8b7af2e385c2551b60e6f6d01..ef57d4ac9464320d22f2c66de6c1fa93ee35136f 100644 (file)
--- a/docs/_includes/navbar.html
+++ b/docs/_includes/navbar.html
@@ -1,4 +1,5 @@
 <nav id="navbar" class="navbar">
+  <div class="container">
   <div class="navbar-brand">
     <a class="navbar-item" href="{{ site.url }}">
       <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
@@ -103,4 +104,5 @@
       </div>
     </div>
   </div>
+  </div>
 </nav>

diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html
index 3689cdb2ee580a92ab80023d7550a1da0ff11148..89b8dea4df152c191d1819b0acc0fc9a2e7ca8a5 100644 (file)
--- a/docs/_layouts/documentation.html
+++ b/docs/_layouts/documentation.html
@@ -31,42 +31,7 @@ route: documentation
   <div class="bd-main-container container">
     <div class="bd-duo">
       <div class="bd-lead">
-        <div class="bd-breadcrumb">
-          <nav class="breadcrumb" aria-label="breadcrumbs">
-            <ul>
-              {% for key in page.breadcrumb %}
-                {% assign link = site.data.links.by_id[key] %}
-                <li{% if forloop.last %} class="is-active"{% endif %}>
-                  <a href="{{ site.url }}{{ link.path }}">{{ link.name }}</a>
-                </li>
-              {% endfor %}
-            </ul>
-          </nav>
-
-          {% if previous_link or next_link %}
-            <nav class="bd-prev-next">
-              {% if previous_link %}
-                <a href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
-                  ←
-                </a>
-              {% else %}
-                <span>
-                  ←
-                </span>
-              {% endif %}
-
-              {% if next_link %}
-                <a href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
-                  →
-                </a>
-              {% else %}
-                <span>
-                  →
-                </span>
-              {% endif %}
-            </nav>
-          {% endif %}
-        </div>
+        {% include components/breadcrumb.html %}
 
         <header class="bd-header">
           <div class="bd-header-titles">
@@ -74,10 +39,10 @@ route: documentation
               {{ page.title }}
             </h1>
             <p class="subtitle is-4">
-              {% if current_link.subtitle %}
-                {{ current_link.subtitle }}
-              {% else %}
+              {% if page.subtitle %}
                 {{ page.subtitle }}
+              {% else %}
+                {{ current_link.subtitle }}
               {% endif %}
             </p>
             {% if page.meta %}

diff --git a/docs/_layouts/post.html b/docs/_layouts/post.html
index e9a0c6485be73c9f20ec29b9e6adfb4b63cc0111..188b020f32921757a4f8b358277143f871a351e9 100644 (file)
--- a/docs/_layouts/post.html
+++ b/docs/_layouts/post.html
@@ -1,51 +1,96 @@
 ---
 layout: default
 route: blog
+breadcrumb:
+- home
+- blog
 ---
 
-{% include navbar.html id="BlogHero" %}
-
-<div class="bd-article-image is-single is-{{ page.color }}">
-  <span class="bd-article-overlay"></span>
-  <span class="bd-article-icon">
-    <i class="{% if page.icon_brand %}fab{% else %}fas{% endif %} fa-{{ page.icon }}"></i>
-  </span>
-  <strong class="bd-article-info">
-    <span>
-      <time class="bd-article-date" datetime="{{ page.date | date_to_xmlschema }}">
-        {{ page.date | date_to_string }}
-      </time>
-      <strong class="bd-article-title">
-        {{ page.name }}
-      </strong>
-    </span>
-  </strong>
-</div>
-
-<section class="section">
-  <div class="container">
-    <div class="columns">
-      <div class="column is-offset-2 is-8">
-        <p class="subtitle is-6">
-          <a class="bd-article-back" href="{{ site.url }}/blog">Back to Blog home</a>
-        </p>
-        <h1 class="title is-2">
-          {{ page.title }}
-        </h1>
-        </article>
-        <hr>
-        <div class="content is-medium">
-          {{ content }}
-        </div>
-        <nav class="pagination is-centered" role="navigation" aria-label="pagination">
-          {% if page.previous.url %}
-            <a class="pagination-previous" href="{{ page.previous.url }}">Previous post</a>
-          {% endif %}
-          {% if page.next.url %}
-            <a class="pagination-next" href="{{ page.next.url }}">Next post</a>
+{% include navbar.html id="Blog" %}
+
+<main class="bd-main">
+  <div class="bd-side-background"></div>
+  <div class="bd-main-container container">
+    <div class="bd-duo">
+      <div class="bd-lead">
+        <div class="bd-breadcrumb">
+          <nav class="breadcrumb" aria-label="breadcrumbs">
+            <ul>
+              <li>
+                {% assign link = site.data.links.by_id['home'] %}
+                <a href="{{ site.url }}{{ link.path }}">{{ link.name }}</a>
+              </li>
+              <li>
+                {% assign link = site.data.links.by_id['blog'] %}
+                <a href="{{ site.url }}{{ link.path }}">{{ link.name }}</a>
+              </li>
+              <li class="is-active">
+                <a href="{{ page.url }}">{{ page.name }}</a>
+              </li>
+            </ul>
+          </nav>
+
+          {% if page.previous.url or page.next.url %}
+            <nav class="bd-prev-next">
+              {% if page.previous.url %}
+                <a href="{{ site.url }}{{ page.previous.url }}">
+                  ←
+                </a>
+              {% else %}
+                <span>
+                  ←
+                </span>
+              {% endif %}
+
+              {% if page.next.url %}
+                <a href="{{ site.url }}{{ page.next.url }}">
+                  →
+                </a>
+              {% else %}
+                <span>
+                  →
+                </span>
+              {% endif %}
+            </nav>
           {% endif %}
-        </nav>
+        </div>
+
+
+        <header class="bd-header">
+          <div class="bd-header-titles">
+            <h1 class="title">
+              {{ page.title }}
+            </h1>
+            <p class="subtitle is-4">
+              {{ page.date | date_to_string }}
+            </p>
+          </div>
+
+          <div class="bd-header-carbon">
+            {% include carbon.html %}
+          </div>
+        </header>
+
+        <div class="bd-content">
+          <div class="content is-medium">
+            {{ content }}
+          </div>
+        </div>
       </div>
+
+      <aside class="bd-side">
+        <nav class="bd-categories">
+          {% for post in site.posts %}
+            <div class="bd-category">
+              <header class="bd-category-header">
+                <a class="bd-category-name" href="{{ post.url }}">
+                  <strong>{{ post.name }}</strong>
+                </a>
+              </header>
+            </div>
+          {% endfor %}
+        </nav>
+      </aside>
     </div>
   </div>
-</section>
+</main>

diff --git a/docs/_posts/2017-03-10-new-field-element.md b/docs/_posts/2017-03-10-new-field-element.md
index f01ab647e37953272bb8cfe8c0194ea0a853fae2..75cf7dc39f29cc0baa95927bb5a87808ddcb0262 100644 (file)
--- a/docs/_posts/2017-03-10-new-field-element.md
+++ b/docs/_posts/2017-03-10-new-field-element.md
@@ -6,6 +6,7 @@ introduction: "<p>The <code>.control</code> element has been a very versatile co
 color: "success"
 name: "Field element"
 icon: "square"
+icon_regular: true
 ---
 
 **TL;DR: there's a new `.field` container, and `.control` has been re-purposed.**

diff --git a/docs/_posts/2017-08-03-list-of-tags.md b/docs/_posts/2017-08-03-list-of-tags.md
index 4806fb49678f4552b3e857f865302c0abd34a540..88794dcc85601c852b86f77d1b68d546f36f4e28 100644 (file)
--- a/docs/_posts/2017-08-03-list-of-tags.md
+++ b/docs/_posts/2017-08-03-list-of-tags.md
@@ -2,7 +2,7 @@
 layout: post
 title: "New feature: list of tags"
 introduction: "What's better than one tag? Multiple tags!"
-color: "orange"
+color: "success"
 name: "List of tags"
 icon: "tag"
 ---
@@ -17,4 +17,4 @@ A tag rarely comes on its own though, so Bulma now supports [list of tags](/docu
   </a>
 </figure>
 
-As a **bonus**, there is also a [delete tag](/documentation/elements/tag/#combinations) available!
\ No newline at end of file
+As a **bonus**, there is also a [delete tag](/documentation/elements/tag/#combinations) available!

diff --git a/docs/_posts/2017-10-09-roses-are-red-links-are-blue.md b/docs/_posts/2017-10-09-roses-are-red-links-are-blue.md
index 2e3afbc8f934da34428183ec2f944bf23dcbff68..223e7852ea55a4d2c5c0d2d6cc4fd8d21413852e 100644 (file)
--- a/docs/_posts/2017-10-09-roses-are-red-links-are-blue.md
+++ b/docs/_posts/2017-10-09-roses-are-red-links-are-blue.md
@@ -3,8 +3,8 @@ layout: post
 title: "Roses are red – Links are blue"
 introduction: "What's better than one tag? Multiple tags!"
 color: "link"
-name: "Roses are red<br>Links are blue"
-icon: "tag"
+name: "Roses are red and links are blue"
+icon: "link"
 ---
 
 By default, a browser will display links in <strong style="color: blue;">blue</strong>. Bulma has up until now used the `$primary` color as the `$link` color:
@@ -89,4 +89,4 @@ If you want to use the `$primary` color for your links, just **customize** your
 $link: $primary !default
 $link-invert: $primary-invert !default
 $link-focus-border: $primary !default
-```
\ No newline at end of file
+```

diff --git a/docs/_posts/2017-11-14-bulma-is-on-patreon.md b/docs/_posts/2017-11-14-bulma-is-on-patreon.md
index b57b61ef114c31e19353b227a03d5d0e33be1b46..6c75c26994bb8a425d9163e33c65ee99867e21a8 100644 (file)
--- a/docs/_posts/2017-11-14-bulma-is-on-patreon.md
+++ b/docs/_posts/2017-11-14-bulma-is-on-patreon.md
@@ -2,7 +2,7 @@
 title: "Bulma is on Patreon!"
 layout: post
 introduction: "Support Bulma's future"
-color: "primary"
+color: "patreon"
 name: "Bulma on Patreon"
 icon: "patreon"
 icon_brand: true

diff --git a/docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md b/docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md
index cf4ca5cb86329901079e9ffb9ce6a5ac0cba998b..59ad057c173c473518b53a0ea233b139550d8e7d 100644 (file)
--- a/docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md
+++ b/docs/_posts/2018-01-18-bulma-supports-font-awesome-5.md
@@ -4,7 +4,7 @@ layout: post
 introduction: "No change required!"
 color: "info"
 name: "Font Awesome 5"
-icon: "font-awesome-alt"
+icon: "font-awesome"
 icon_brand: true
 ---
 

diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass
index f557a5f0cfec636bc5258ccdfcd81091c2d42924..89bbf0360c3cbb24bef566f791f94fa4b4c5632c 100644 (file)
--- a/docs/_sass/specific.sass
+++ b/docs/_sass/specific.sass
@@ -11,16 +11,29 @@
     font-weight: $weight-semibold
   &:hover
     background-color: $white-bis
+  &.bd-is-post
+    padding-left: 5rem
 
 .bd-link-name
+  line-height: 1.25
+  margin-bottom: 0.25em
   position: relative
+
+.bd-link-counter
+  color: $link
+  counter-increment: bd-links
+  font-weight: $weight-normal
+  position: absolute
+  right: calc(100% + 0.625em)
   &::before
-    color: $link
-    counter-increment: bd-links
     content: counter(bd-links)
-    font-weight: $weight-normal
-    position: absolute
-    right: calc(100% + 0.625em)
+
+.bd-link-icon
+  font-size: 2rem
+  position: absolute
+  right: calc(100% + 0.5em)
+  text-align: center
+  width: 1.5em
 
 +desktop
   .bd-links
@@ -162,83 +175,11 @@ $navbar-items: ("documentation": $primary, "templates": $info, "videos": $succes
 .has-text-orange
   color: $orange !important
 
-.bd-article-image
-  background-color: $primary
-  display: block
-  height: 240px
-  margin-left: auto
-  margin-right: auto
-  overflow: hidden
-  position: relative
-  text-align: center
-  @each $name, $pair in $colors
-    $color: nth($pair, 1)
-    &.is-#{$name}
-      background-color: $color
-  &.is-bootstrap
-    background-color: $bootstrap
-  &.is-orange
-    background-color: $orange
-  &:hover
-    .bd-article-overlay
-      opacity: 0.25
-    .bd-article-icon
-      transform: scale(1.4)
-    .bd-article-date
-      transform: scale(0.9)
-    .bd-article-title
-      transform: scale(1.1)
-  &.is-single
-    margin-bottom: 2rem
-    width: 100%
-  &.is-share
-    height: 315px
-    margin: 2rem auto
-    width: 600px
-
-.bd-article-overlay
-  +overlay
-  background-color: $black
-  opacity: 0
-  transition-duration: $speed
-  transition-property: opacity
-  transition-timing-function: $easing
-
-.bd-article-icon,
-.bd-article-info
-  +overlay
-  align-items: center
-  display: flex
-  justify-content: center
-
-.bd-article-icon,
-.bd-article-date,
-.bd-article-title
-  transition-duration: $speed
-  transition-property: transform
-  transition-timing-function: $easing
-
-.bd-article-icon
-  color: $black
-  font-size: 56px
-  opacity: 0.25
-  & > span
-    display: block
-
-.bd-article-info
-  padding: 20px
-
-.bd-article-date
-  color: rgba(#000, 0.5)
-  display: block
+.has-text-bootstrap
+  color: $bootstrap !important
 
-.bd-article-title
-  color: $white
-  display: block
-  font-size: 2.5rem
-  font-weight: $weight-bold
-  line-height: 1.25
-  padding: 0 20px
+.has-text-patreon
+  color: $patreon !important
 
 .bd-emoji
   margin-right: 0.5em

diff --git a/docs/blog.html b/docs/blog.html
index e4cd413636f70da8f2a3940ca290ee11ffec2169..fe865409db8b27ebe0fa044d4e9d064d9bae981f 100644 (file)
--- a/docs/blog.html
+++ b/docs/blog.html
@@ -1,33 +1,58 @@
 ---
 layout: default
 route: blog
+breadcrumb:
+- home
+- blog
 ---
 
-{% include blog-hero.html %}
+{% include navbar.html id="Blog" %}
 
-<section class="section">
-  <div class="container">
-    <div class="columns is-multiline">
-      {% for post in site.posts %}
-        <article class="column is-4">
-          <a class="bd-article-image is-{{ post.color }}" href="{{ post.url }}">
-            <span class="bd-article-overlay"></span>
-            <span class="bd-article-icon">
-              <i class="{% if post.icon_brand %}fab{% else %}fas{% endif %} fa-{{ post.icon }}"></i>
-            </span>
-            <strong class="bd-article-info">
-              <span>
-                <time class="bd-article-date" datetime="{{ post.date | date_to_xmlschema }}">
+<main class="bd-main">
+  <div class="bd-main-container container">
+    <div class="bd-duo">
+      <div class="bd-lead">
+        {% include components/breadcrumb.html %}
+
+        <header class="bd-header">
+          <div class="bd-header-titles">
+            <h1 class="title">
+              Blog
+            </h1>
+            <p class="subtitle is-4">
+              Stay updated about new features, bug fixes, and releases
+            </p>
+            <a class="button bd-is-rss" href="{{ site.url }}/atom.xml">
+              <span class="icon">
+                <i class="fas fa-rss"></i>
+              </span>
+              <span>Subscribe</span>
+            </a>
+          </div>
+
+          <div class="bd-header-carbon">
+            {% include carbon.html %}
+          </div>
+        </header>
+
+        <div class="bd-content">
+          <div class="bd-links">
+            {% for post in site.posts %}
+              <a class="bd-link bd-is-post" href="{{ post.url }}">
+                <h2 class="bd-link-name">
+                  <span class="bd-link-icon has-text-{{ post.color }}">
+                    <i class="{% if post.icon_brand %}fab{% elsif post.icon_regular %}far{% else %}fas{% endif %} fa-{{ post.icon }}"></i>
+                  </span>
+                  {{ post.name }}
+                </h2>
+                <time class="bd-link-subtitle" datetime="{{ post.date | date_to_xmlschema }}">
                   {{ post.date | date_to_string }}
                 </time>
-                <strong class="bd-article-title">
-                  {{ post.name }}
-                </strong>
-              </span>
-            </strong>
-          </a>
-        </article>
-      {% endfor %}
+              </a>
+            {% endfor %}
+          </div>
+        </div>
+      </div>
     </div>
   </div>
-</section>
+</main>

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 30b901fc1fa014ce1678c0bff095a94ef4919eef..bd49c9684e9ae78bcb2289690a2d479bd095d82b 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -130,8 +130,7 @@
   width: 1em;
 }
 
-.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .bd-category-toggle, #carbonads .carbon-wrap:hover .carbon-img::after, .intro-spinner, .intro-shadow, .bd-article-overlay, .bd-article-icon,
-.bd-article-info, .bd-structure-item::before, .bd-structure-item::after, .highlight .bd-show, .bd-banner-background, .bd-book-pattern::before,
+.is-overlay, .image.is-square img, .image.is-1by1 img, .image.is-5by4 img, .image.is-4by3 img, .image.is-3by2 img, .image.is-5by3 img, .image.is-16by9 img, .image.is-2by1 img, .image.is-3by1 img, .image.is-4by5 img, .image.is-3by4 img, .image.is-2by3 img, .image.is-3by5 img, .image.is-9by16 img, .image.is-1by2 img, .image.is-1by3 img, .modal, .modal-background, .hero-video, .bd-category-toggle, #carbonads .carbon-wrap:hover .carbon-img::after, .intro-spinner, .intro-shadow, .bd-structure-item::before, .bd-structure-item::after, .highlight .bd-show, .bd-banner-background, .bd-book-pattern::before,
 .bd-book-modal-column.bd-is-cover::before, .bd-book-pattern, .bd-book-modal-background {
   bottom: 0;
   left: 0;
@@ -10538,19 +10537,36 @@ svg {
   background-color: #fafafa;
 }
 
+.bd-link.bd-is-post {
+  padding-left: 5rem;
+}
+
 .bd-link-name {
+  line-height: 1.25;
+  margin-bottom: 0.25em;
   position: relative;
 }
 
-.bd-link-name::before {
+.bd-link-counter {
   color: #3273dc;
   counter-increment: bd-links;
-  content: counter(bd-links);
   font-weight: 400;
   position: absolute;
   right: calc(100% + 0.625em);
 }
 
+.bd-link-counter::before {
+  content: counter(bd-links);
+}
+
+.bd-link-icon {
+  font-size: 2rem;
+  position: absolute;
+  right: calc(100% + 0.5em);
+  text-align: center;
+  width: 1.5em;
+}
+
 @media screen and (min-width: 1088px) {
   .bd-links {
     display: flex;
@@ -10815,141 +10831,12 @@ svg {
   color: #ff470f !important;
 }
 
-.bd-article-image {
-  background-color: #00d1b2;
-  display: block;
-  height: 240px;
-  margin-left: auto;
-  margin-right: auto;
-  overflow: hidden;
-  position: relative;
-  text-align: center;
-}
-
-.bd-article-image.is-white {
-  background-color: white;
-}
-
-.bd-article-image.is-black {
-  background-color: #0a0a0a;
-}
-
-.bd-article-image.is-light {
-  background-color: whitesmoke;
-}
-
-.bd-article-image.is-dark {
-  background-color: #363636;
-}
-
-.bd-article-image.is-primary {
-  background-color: #00d1b2;
-}
-
-.bd-article-image.is-link {
-  background-color: #3273dc;
-}
-
-.bd-article-image.is-info {
-  background-color: #209cee;
+.has-text-bootstrap {
+  color: #6f5499 !important;
 }
 
-.bd-article-image.is-success {
-  background-color: #23d160;
-}
-
-.bd-article-image.is-warning {
-  background-color: #ffdd57;
-}
-
-.bd-article-image.is-danger {
-  background-color: #ff3860;
-}
-
-.bd-article-image.is-bootstrap {
-  background-color: #6f5499;
-}
-
-.bd-article-image.is-orange {
-  background-color: #ff470f;
-}
-
-.bd-article-image:hover .bd-article-overlay {
-  opacity: 0.25;
-}
-
-.bd-article-image:hover .bd-article-icon {
-  transform: scale(1.4);
-}
-
-.bd-article-image:hover .bd-article-date {
-  transform: scale(0.9);
-}
-
-.bd-article-image:hover .bd-article-title {
-  transform: scale(1.1);
-}
-
-.bd-article-image.is-single {
-  margin-bottom: 2rem;
-  width: 100%;
-}
-
-.bd-article-image.is-share {
-  height: 315px;
-  margin: 2rem auto;
-  width: 600px;
-}
-
-.bd-article-overlay {
-  background-color: #0a0a0a;
-  opacity: 0;
-  transition-duration: 86ms;
-  transition-property: opacity;
-  transition-timing-function: ease-out;
-}
-
-.bd-article-icon,
-.bd-article-info {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-}
-
-.bd-article-icon,
-.bd-article-date,
-.bd-article-title {
-  transition-duration: 86ms;
-  transition-property: transform;
-  transition-timing-function: ease-out;
-}
-
-.bd-article-icon {
-  color: #0a0a0a;
-  font-size: 56px;
-  opacity: 0.25;
-}
-
-.bd-article-icon > span {
-  display: block;
-}
-
-.bd-article-info {
-  padding: 20px;
-}
-
-.bd-article-date {
-  color: rgba(0, 0, 0, 0.5);
-  display: block;
-}
-
-.bd-article-title {
-  color: white;
-  display: block;
-  font-size: 2.5rem;
-  font-weight: 700;
-  line-height: 1.25;
-  padding: 0 20px;
+.has-text-patreon {
+  color: #f96854 !important;
 }
 
 .bd-emoji {

diff --git a/docs/documentation/elements/icon.html b/docs/documentation/elements/icon.html
index d7deafa70fc89613547ac506cd38fdc852501fc4..c5ee6ab8cfbef1f48ede437705033067b916e54e 100644 (file)
--- a/docs/documentation/elements/icon.html
+++ b/docs/documentation/elements/icon.html
@@ -1,5 +1,6 @@
 ---
 title: Icon
+subtitle: "Bulma is compatible with <strong>all icon font libraries</strong>: <a href=\"https://fontawesome.com/\">Font Awesome 5</a>, <a href=\"http://fontawesome.io/\">Font Awesome 4</a>, <a href=\"https://materialdesignicons.com\">Material Design Icons</a>, <a href=\"https://useiconic.com/open\">Open Iconic</a>, <a href=\"http://ionicons.com/\">Ionicons</a> etc."
 fontawesome4: true
 iconic: true
 ionicons: true