mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Fix blog
This commit is contained in:
Jeremy Thomas
parent
e3ecca6432
commit
a1c1909001
@ -318,6 +318,10 @@
|
|||||||
"name": "Tabs",
|
"name": "Tabs",
|
||||||
"subtitle": "Simple responsive horizontal navigation <strong>tabs</strong>, with different styles",
|
"subtitle": "Simple responsive horizontal navigation <strong>tabs</strong>, with different styles",
|
||||||
"path": "/documentation/components/tabs"
|
"path": "/documentation/components/tabs"
|
||||||
|
},
|
||||||
|
"blog": {
|
||||||
|
"name": "Blog",
|
||||||
|
"path": "/blog"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"categories": {
|
"categories": {
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"title": "Bulma: a modern CSS framework based on Flexbox",
|
"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.",
|
"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",
|
"download": "https://github.com/jgthms/bulma/releases/download/0.6.2/bulma-0.6.2.zip",
|
||||||
"github": "https://github.com/jgthms/bulma",
|
"github": "https://github.com/jgthms/bulma",
|
||||||
"twitter": "https://twitter.com/jgthms",
|
"twitter": "https://twitter.com/jgthms",
|
||||||
@ -9,4 +9,4 @@
|
|||||||
"book_url": "https://bleedingedgepress.com/creating-interfaces-bulma/",
|
"book_url": "https://bleedingedgepress.com/creating-interfaces-bulma/",
|
||||||
"book_amazon": "https://www.amazon.com/Creating-Interfaces-Bulma-Jeremy-Thomas-ebook/dp/B079M1BJG4/",
|
"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"
|
"book_sample": "http://www.bleedingedgepress.com/book_excerpts/01E9D1/creating_interfaces_with_bulma_sample.pdf"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,27 +1,20 @@
|
|||||||
{% include navbar.html id="BlogHero" %}
|
<header class="bd-header">
|
||||||
|
<div class="bd-header-titles">
|
||||||
<section class="hero is-warning">
|
<h1 class="title">
|
||||||
<div class="hero-body">
|
Blog
|
||||||
<div class="container">
|
</h1>
|
||||||
<div class="columns is-vcentered">
|
<p class="subtitle is-4">
|
||||||
<div class="column">
|
Stay updated about new features, bug fixes, and releases
|
||||||
<h1 class="title">
|
</p>
|
||||||
<a href="{{ site.url }}/blog">Blog</a>
|
<a class="button bd-is-rss" href="{{ site.url }}/atom.xml">
|
||||||
</h1>
|
<span class="icon">
|
||||||
<p class="subtitle">
|
<i class="fas fa-rss"></i>
|
||||||
Stay updated about new features, bug fixes, and releases
|
</span>
|
||||||
</p>
|
<span>Subscribe</span>
|
||||||
<a class="button bd-is-rss" href="{{ site.url }}/atom.xml">
|
</a>
|
||||||
<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>
|
</div>
|
||||||
</section>
|
|
||||||
|
<div class="bd-header-carbon">
|
||||||
|
{% include carbon.html %}
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|||||||
36
docs/_includes/components/breadcrumb.html
Normal file
36
docs/_includes/components/breadcrumb.html
Normal file
@ -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>
|
||||||
@ -14,8 +14,13 @@
|
|||||||
{% assign link = site.data.links.by_id[thingy] %}
|
{% assign link = site.data.links.by_id[thingy] %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<a class="bd-link" href="{{ site.url }}{{ link.path }}">
|
<a class="bd-link" href="{{ site.url }}{{ link.path }}">
|
||||||
<h2 class="bd-link-name">{{ link.name }}</h2>
|
<h2 class="bd-link-name">
|
||||||
<p class="bd-link-subtitle">{{ link.subtitle }}</p>
|
<span class="bd-link-counter"></span>
|
||||||
|
{{ link.name }}
|
||||||
|
</h2>
|
||||||
|
<p class="bd-link-subtitle">
|
||||||
|
{{ link.subtitle }}
|
||||||
|
</p>
|
||||||
</a>
|
</a>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@ -1,4 +1,5 @@
|
|||||||
<nav id="navbar" class="navbar">
|
<nav id="navbar" class="navbar">
|
||||||
|
<div class="container">
|
||||||
<div class="navbar-brand">
|
<div class="navbar-brand">
|
||||||
<a class="navbar-item" href="{{ site.url }}">
|
<a class="navbar-item" href="{{ site.url }}">
|
||||||
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@ -31,42 +31,7 @@ route: documentation
|
|||||||
<div class="bd-main-container container">
|
<div class="bd-main-container container">
|
||||||
<div class="bd-duo">
|
<div class="bd-duo">
|
||||||
<div class="bd-lead">
|
<div class="bd-lead">
|
||||||
<div class="bd-breadcrumb">
|
{% include components/breadcrumb.html %}
|
||||||
<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>
|
|
||||||
|
|
||||||
<header class="bd-header">
|
<header class="bd-header">
|
||||||
<div class="bd-header-titles">
|
<div class="bd-header-titles">
|
||||||
@ -74,10 +39,10 @@ route: documentation
|
|||||||
{{ page.title }}
|
{{ page.title }}
|
||||||
</h1>
|
</h1>
|
||||||
<p class="subtitle is-4">
|
<p class="subtitle is-4">
|
||||||
{% if current_link.subtitle %}
|
{% if page.subtitle %}
|
||||||
{{ current_link.subtitle }}
|
|
||||||
{% else %}
|
|
||||||
{{ page.subtitle }}
|
{{ page.subtitle }}
|
||||||
|
{% else %}
|
||||||
|
{{ current_link.subtitle }}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</p>
|
</p>
|
||||||
{% if page.meta %}
|
{% if page.meta %}
|
||||||
|
|||||||
@ -1,51 +1,96 @@
|
|||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
route: blog
|
route: blog
|
||||||
|
breadcrumb:
|
||||||
|
- home
|
||||||
|
- blog
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include navbar.html id="BlogHero" %}
|
{% include navbar.html id="Blog" %}
|
||||||
|
|
||||||
<div class="bd-article-image is-single is-{{ page.color }}">
|
<main class="bd-main">
|
||||||
<span class="bd-article-overlay"></span>
|
<div class="bd-side-background"></div>
|
||||||
<span class="bd-article-icon">
|
<div class="bd-main-container container">
|
||||||
<i class="{% if page.icon_brand %}fab{% else %}fas{% endif %} fa-{{ page.icon }}"></i>
|
<div class="bd-duo">
|
||||||
</span>
|
<div class="bd-lead">
|
||||||
<strong class="bd-article-info">
|
<div class="bd-breadcrumb">
|
||||||
<span>
|
<nav class="breadcrumb" aria-label="breadcrumbs">
|
||||||
<time class="bd-article-date" datetime="{{ page.date | date_to_xmlschema }}">
|
<ul>
|
||||||
{{ page.date | date_to_string }}
|
<li>
|
||||||
</time>
|
{% assign link = site.data.links.by_id['home'] %}
|
||||||
<strong class="bd-article-title">
|
<a href="{{ site.url }}{{ link.path }}">{{ link.name }}</a>
|
||||||
{{ page.name }}
|
</li>
|
||||||
</strong>
|
<li>
|
||||||
</span>
|
{% assign link = site.data.links.by_id['blog'] %}
|
||||||
</strong>
|
<a href="{{ site.url }}{{ link.path }}">{{ link.name }}</a>
|
||||||
</div>
|
</li>
|
||||||
|
<li class="is-active">
|
||||||
|
<a href="{{ page.url }}">{{ page.name }}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<section class="section">
|
{% if page.previous.url or page.next.url %}
|
||||||
<div class="container">
|
<nav class="bd-prev-next">
|
||||||
<div class="columns">
|
{% if page.previous.url %}
|
||||||
<div class="column is-offset-2 is-8">
|
<a href="{{ site.url }}{{ page.previous.url }}">
|
||||||
<p class="subtitle is-6">
|
←
|
||||||
<a class="bd-article-back" href="{{ site.url }}/blog">Back to Blog home</a>
|
</a>
|
||||||
</p>
|
{% else %}
|
||||||
<h1 class="title is-2">
|
<span>
|
||||||
{{ page.title }}
|
←
|
||||||
</h1>
|
</span>
|
||||||
</article>
|
{% endif %}
|
||||||
<hr>
|
|
||||||
<div class="content is-medium">
|
{% if page.next.url %}
|
||||||
{{ content }}
|
<a href="{{ site.url }}{{ page.next.url }}">
|
||||||
|
→
|
||||||
|
</a>
|
||||||
|
{% else %}
|
||||||
|
<span>
|
||||||
|
→
|
||||||
|
</span>
|
||||||
|
{% endif %}
|
||||||
|
</nav>
|
||||||
|
{% endif %}
|
||||||
|
</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>
|
||||||
<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>
|
|
||||||
{% endif %}
|
|
||||||
</nav>
|
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</main>
|
||||||
|
|||||||
@ -6,6 +6,7 @@ introduction: "<p>The <code>.control</code> element has been a very versatile co
|
|||||||
color: "success"
|
color: "success"
|
||||||
name: "Field element"
|
name: "Field element"
|
||||||
icon: "square"
|
icon: "square"
|
||||||
|
icon_regular: true
|
||||||
---
|
---
|
||||||
|
|
||||||
**TL;DR: there's a new `.field` container, and `.control` has been re-purposed.**
|
**TL;DR: there's a new `.field` container, and `.control` has been re-purposed.**
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
layout: post
|
layout: post
|
||||||
title: "New feature: list of tags"
|
title: "New feature: list of tags"
|
||||||
introduction: "What's better than one tag? Multiple tags!"
|
introduction: "What's better than one tag? Multiple tags!"
|
||||||
color: "orange"
|
color: "success"
|
||||||
name: "List of tags"
|
name: "List of tags"
|
||||||
icon: "tag"
|
icon: "tag"
|
||||||
---
|
---
|
||||||
@ -17,4 +17,4 @@ A tag rarely comes on its own though, so Bulma now supports [list of tags](/docu
|
|||||||
</a>
|
</a>
|
||||||
</figure>
|
</figure>
|
||||||
|
|
||||||
As a **bonus**, there is also a [delete tag](/documentation/elements/tag/#combinations) available!
|
As a **bonus**, there is also a [delete tag](/documentation/elements/tag/#combinations) available!
|
||||||
|
|||||||
@ -3,8 +3,8 @@ layout: post
|
|||||||
title: "Roses are red – Links are blue"
|
title: "Roses are red – Links are blue"
|
||||||
introduction: "What's better than one tag? Multiple tags!"
|
introduction: "What's better than one tag? Multiple tags!"
|
||||||
color: "link"
|
color: "link"
|
||||||
name: "Roses are red<br>Links are blue"
|
name: "Roses are red and links are blue"
|
||||||
icon: "tag"
|
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:
|
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: $primary !default
|
||||||
$link-invert: $primary-invert !default
|
$link-invert: $primary-invert !default
|
||||||
$link-focus-border: $primary !default
|
$link-focus-border: $primary !default
|
||||||
```
|
```
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
title: "Bulma is on Patreon!"
|
title: "Bulma is on Patreon!"
|
||||||
layout: post
|
layout: post
|
||||||
introduction: "Support Bulma's future"
|
introduction: "Support Bulma's future"
|
||||||
color: "primary"
|
color: "patreon"
|
||||||
name: "Bulma on Patreon"
|
name: "Bulma on Patreon"
|
||||||
icon: "patreon"
|
icon: "patreon"
|
||||||
icon_brand: true
|
icon_brand: true
|
||||||
|
|||||||
@ -4,7 +4,7 @@ layout: post
|
|||||||
introduction: "No change required!"
|
introduction: "No change required!"
|
||||||
color: "info"
|
color: "info"
|
||||||
name: "Font Awesome 5"
|
name: "Font Awesome 5"
|
||||||
icon: "font-awesome-alt"
|
icon: "font-awesome"
|
||||||
icon_brand: true
|
icon_brand: true
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
@ -11,16 +11,29 @@
|
|||||||
font-weight: $weight-semibold
|
font-weight: $weight-semibold
|
||||||
&:hover
|
&:hover
|
||||||
background-color: $white-bis
|
background-color: $white-bis
|
||||||
|
&.bd-is-post
|
||||||
|
padding-left: 5rem
|
||||||
|
|
||||||
.bd-link-name
|
.bd-link-name
|
||||||
|
line-height: 1.25
|
||||||
|
margin-bottom: 0.25em
|
||||||
position: relative
|
position: relative
|
||||||
|
|
||||||
|
.bd-link-counter
|
||||||
|
color: $link
|
||||||
|
counter-increment: bd-links
|
||||||
|
font-weight: $weight-normal
|
||||||
|
position: absolute
|
||||||
|
right: calc(100% + 0.625em)
|
||||||
&::before
|
&::before
|
||||||
color: $link
|
|
||||||
counter-increment: bd-links
|
|
||||||
content: counter(bd-links)
|
content: counter(bd-links)
|
||||||
font-weight: $weight-normal
|
|
||||||
position: absolute
|
.bd-link-icon
|
||||||
right: calc(100% + 0.625em)
|
font-size: 2rem
|
||||||
|
position: absolute
|
||||||
|
right: calc(100% + 0.5em)
|
||||||
|
text-align: center
|
||||||
|
width: 1.5em
|
||||||
|
|
||||||
+desktop
|
+desktop
|
||||||
.bd-links
|
.bd-links
|
||||||
@ -162,83 +175,11 @@ $navbar-items: ("documentation": $primary, "templates": $info, "videos": $succes
|
|||||||
.has-text-orange
|
.has-text-orange
|
||||||
color: $orange !important
|
color: $orange !important
|
||||||
|
|
||||||
.bd-article-image
|
.has-text-bootstrap
|
||||||
background-color: $primary
|
color: $bootstrap !important
|
||||||
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
|
.has-text-patreon
|
||||||
+overlay
|
color: $patreon !important
|
||||||
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
|
|
||||||
|
|
||||||
.bd-article-title
|
|
||||||
color: $white
|
|
||||||
display: block
|
|
||||||
font-size: 2.5rem
|
|
||||||
font-weight: $weight-bold
|
|
||||||
line-height: 1.25
|
|
||||||
padding: 0 20px
|
|
||||||
|
|
||||||
.bd-emoji
|
.bd-emoji
|
||||||
margin-right: 0.5em
|
margin-right: 0.5em
|
||||||
|
|||||||
@ -1,33 +1,58 @@
|
|||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
route: blog
|
route: blog
|
||||||
|
breadcrumb:
|
||||||
|
- home
|
||||||
|
- blog
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include blog-hero.html %}
|
{% include navbar.html id="Blog" %}
|
||||||
|
|
||||||
<section class="section">
|
<main class="bd-main">
|
||||||
<div class="container">
|
<div class="bd-main-container container">
|
||||||
<div class="columns is-multiline">
|
<div class="bd-duo">
|
||||||
{% for post in site.posts %}
|
<div class="bd-lead">
|
||||||
<article class="column is-4">
|
{% include components/breadcrumb.html %}
|
||||||
<a class="bd-article-image is-{{ post.color }}" href="{{ post.url }}">
|
|
||||||
<span class="bd-article-overlay"></span>
|
<header class="bd-header">
|
||||||
<span class="bd-article-icon">
|
<div class="bd-header-titles">
|
||||||
<i class="{% if post.icon_brand %}fab{% else %}fas{% endif %} fa-{{ post.icon }}"></i>
|
<h1 class="title">
|
||||||
</span>
|
Blog
|
||||||
<strong class="bd-article-info">
|
</h1>
|
||||||
<span>
|
<p class="subtitle is-4">
|
||||||
<time class="bd-article-date" datetime="{{ post.date | date_to_xmlschema }}">
|
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 }}
|
{{ post.date | date_to_string }}
|
||||||
</time>
|
</time>
|
||||||
<strong class="bd-article-title">
|
</a>
|
||||||
{{ post.name }}
|
{% endfor %}
|
||||||
</strong>
|
</div>
|
||||||
</span>
|
</div>
|
||||||
</strong>
|
</div>
|
||||||
</a>
|
|
||||||
</article>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</main>
|
||||||
|
|||||||
@ -130,8 +130,7 @@
|
|||||||
width: 1em;
|
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,
|
.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-article-info, .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 {
|
.bd-book-modal-column.bd-is-cover::before, .bd-book-pattern, .bd-book-modal-background {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -10538,19 +10537,36 @@ svg {
|
|||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bd-link.bd-is-post {
|
||||||
|
padding-left: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.bd-link-name {
|
.bd-link-name {
|
||||||
|
line-height: 1.25;
|
||||||
|
margin-bottom: 0.25em;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-link-name::before {
|
.bd-link-counter {
|
||||||
color: #3273dc;
|
color: #3273dc;
|
||||||
counter-increment: bd-links;
|
counter-increment: bd-links;
|
||||||
content: counter(bd-links);
|
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: calc(100% + 0.625em);
|
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) {
|
@media screen and (min-width: 1088px) {
|
||||||
.bd-links {
|
.bd-links {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -10815,141 +10831,12 @@ svg {
|
|||||||
color: #ff470f !important;
|
color: #ff470f !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-article-image {
|
.has-text-bootstrap {
|
||||||
background-color: #00d1b2;
|
color: #6f5499 !important;
|
||||||
display: block;
|
|
||||||
height: 240px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-article-image.is-white {
|
.has-text-patreon {
|
||||||
background-color: white;
|
color: #f96854 !important;
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-emoji {
|
.bd-emoji {
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
---
|
---
|
||||||
title: Icon
|
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
|
fontawesome4: true
|
||||||
iconic: true
|
iconic: true
|
||||||
ionicons: true
|
ionicons: true
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user