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",
|
||||
"subtitle": "Simple responsive horizontal navigation <strong>tabs</strong>, with different styles",
|
||||
"path": "/documentation/components/tabs"
|
||||
},
|
||||
"blog": {
|
||||
"name": "Blog",
|
||||
"path": "/blog"
|
||||
}
|
||||
},
|
||||
"categories": {
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
{% include navbar.html id="BlogHero" %}
|
||||
|
||||
<section class="hero is-warning">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<header class="bd-header">
|
||||
<div class="bd-header-titles">
|
||||
<h1 class="title">
|
||||
<a href="{{ site.url }}/blog">Blog</a>
|
||||
Blog
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
<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">
|
||||
@ -18,10 +13,8 @@
|
||||
<span>Subscribe</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
|
||||
<div class="bd-header-carbon">
|
||||
{% include carbon.html %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</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] %}
|
||||
{% 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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 %}
|
||||
|
||||
@ -1,51 +1,96 @@
|
||||
---
|
||||
layout: default
|
||||
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 }}">
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
{% endif %}
|
||||
|
||||
{% if page.next.url %}
|
||||
<a href="{{ site.url }}{{ page.next.url }}">
|
||||
→
|
||||
</a>
|
||||
{% else %}
|
||||
<span>
|
||||
→
|
||||
</span>
|
||||
{% endif %}
|
||||
</nav>
|
||||
{% endif %}
|
||||
</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">
|
||||
|
||||
<header class="bd-header">
|
||||
<div class="bd-header-titles">
|
||||
<h1 class="title">
|
||||
{{ page.title }}
|
||||
</h1>
|
||||
</article>
|
||||
<hr>
|
||||
<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>
|
||||
<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 %}
|
||||
</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>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
@ -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.**
|
||||
|
||||
@ -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"
|
||||
---
|
||||
|
||||
@ -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:
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
---
|
||||
|
||||
|
||||
@ -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
|
||||
&::before
|
||||
|
||||
.bd-link-counter
|
||||
color: $link
|
||||
counter-increment: bd-links
|
||||
content: counter(bd-links)
|
||||
font-weight: $weight-normal
|
||||
position: absolute
|
||||
right: calc(100% + 0.625em)
|
||||
&::before
|
||||
content: counter(bd-links)
|
||||
|
||||
.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
|
||||
.has-text-bootstrap
|
||||
color: $bootstrap !important
|
||||
|
||||
.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
|
||||
|
||||
.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
|
||||
|
||||
@ -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>
|
||||
<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>
|
||||
<strong class="bd-article-info">
|
||||
<span>
|
||||
<time class="bd-article-date" datetime="{{ post.date | date_to_xmlschema }}">
|
||||
<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 %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
@ -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;
|
||||
.has-text-bootstrap {
|
||||
color: #6f5499 !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user