Add new icon text blog post

This commit is contained in:
Jeremy Thomas 2021-01-14 21:31:45 +00:00
parent 696621d028
commit 3ceb3213a7
4 changed files with 60 additions and 7 deletions

View File

@ -4,6 +4,7 @@
{{ include.surtitle }} {{ include.surtitle }}
</p> </p>
{% endif %} {% endif %}
<h2 class="bd-link-name"> <h2 class="bd-link-name">
<figure class="bd-link-figure"> <figure class="bd-link-figure">
{% if include.icon %} {% if include.icon %}
@ -21,9 +22,11 @@
{% endif %} {% endif %}
{{ include.name }} {{ include.name }}
</h2> </h2>
<p class="bd-link-subtitle">
<div class="bd-link-subtitle">
{{ include.subtitle }} {{ include.subtitle }}
</p> </div>
{% if include.more %} {% if include.more %}
<div class="bd-link-more"> <div class="bd-link-more">
{{ include.more }} {{ include.more }}

View File

@ -58,7 +58,7 @@ breadcrumb:
<header class="bd-header"> <header class="bd-header">
<div class="bd-header-titles"> <div class="bd-header-titles">
<h1 class="title"> <h1 class="title">
{{ page.title }} {{ page.title | markdownify }}
</h1> </h1>
<p class="subtitle is-4"> <p class="subtitle is-4">
{{ page.date | date_to_string }} {{ page.date | date_to_string }}
@ -81,13 +81,13 @@ breadcrumb:
<nav class="bd-prev-next-bis"> <nav class="bd-prev-next-bis">
{% if page.previous.url %} {% if page.previous.url %}
<a class="bd-prev-next-bis-previous" href="{{ page.previous.url }}"> <a class="bd-prev-next-bis-previous" href="{{ page.previous.url }}">
← {{ page.previous.title }} ← {{ page.previous.name }}
</a> </a>
{% endif %} {% endif %}
{% if page.next.url %} {% if page.next.url %}
<a class="bd-prev-next-bis-next" href="{{ page.next.url }}"> <a class="bd-prev-next-bis-next" href="{{ page.next.url }}">
{{ page.next.title }} → {{ page.next.name }} →
</a> </a>
{% endif %} {% endif %}
</nav> </nav>

View File

@ -0,0 +1,49 @@
---
title: "New feature: `.icon-text`"
layout: post
introduction: "An easy way to combine an `.icon` with text"
color: "primary"
name: "New feature: Icon Text"
icon: "star-of-life"
---
Bulma's `.icon` element has been around since its inception. It acts as a simple container for any **icon font**. And thanks to its fixed square dimensions, it provides the icon font time to load while preserving the space fo it.
From version `0.9.2`, a new `.icon-text` element will be available. It allows you to easily combine an `.icon` element with **text**. The purpose of this new feature is to preserve the correct **alignment** of both parts.
<div class="block has-text-centered py-6">
<span class="icon-text">
<span class="icon">
<i class="fas fa-home"></i>
</span>
<span>Home</span>
</span>
</div>
You can combine several icons in sequence:
<div class="block has-text-centered py-6">
<span class="icon-text">
<span class="icon">
<i class="fas fa-train"></i>
</span>
<span>Paris</span>
<span class="icon">
<i class="fas fa-arrow-right"></i>
</span>
<span>Budapest</span>
<span class="icon">
<i class="fas fa-arrow-right"></i>
</span>
<span>Bucharest</span>
<span class="icon">
<i class="fas fa-arrow-right"></i>
</span>
<span>Istanbul</span>
<span class="icon">
<i class="fas fa-flag-checkered"></i>
</span>
</span>
</div>
See the [full `.icon-text` documentation](/documentation/elements/icon/#icon-text).

View File

@ -39,7 +39,8 @@ breadcrumb:
<div class="bd-links"> <div class="bd-links">
{% for post in site.posts %} {% for post in site.posts %}
{% assign date = post.date | date: "%B %-d" %} {% assign date = post.date | date: "%B %-d" %}
{% assign more = post.introduction | markdownify | strip_html %} {% assign name = post.title | markdownify %}
{% assign more = post.introduction | markdownify %}
{% {%
include elements/link.html include elements/link.html
path=post.url path=post.url
@ -48,7 +49,7 @@ breadcrumb:
icon_regular=post.icon_regular icon_regular=post.icon_regular
icon=post.icon icon=post.icon
surtitle=date surtitle=date
name=post.name name=name
subtitle=more subtitle=more
%} %}
{% endfor %} {% endfor %}