mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add article image
This commit is contained in:
Jeremy Thomas
parent
93b7fb2fd4
commit
13d6def032
@ -7,20 +7,34 @@ route: blog
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<article class="article {{ page.category | downcase }}{% if page.recommended == true %} recommended{% endif %}">
|
||||
<p class="subtitle">
|
||||
<a href="{{ site.url }}/blog">Back</a>
|
||||
</p>
|
||||
<p class="subtitle is-4">
|
||||
{{ page.date | date_to_string }}
|
||||
</p>
|
||||
<h1 class="title is-2">
|
||||
{{ page.title }}
|
||||
</h1>
|
||||
<hr>
|
||||
<div class="content is-medium">
|
||||
{{ content }}
|
||||
<div class="columns">
|
||||
<div class="column is-offset-2 is-8">
|
||||
<div class="article-image is-single is-{{ page.color }}">
|
||||
<span class="article-overlay"></span>
|
||||
<span class="article-icon">
|
||||
<span class="icon">
|
||||
<i class="fa fa-{{ page.icon }}"></i>
|
||||
</span>
|
||||
</span>
|
||||
<strong class="article-title">
|
||||
{{ page.name }}
|
||||
</strong>
|
||||
</div>
|
||||
<p class="subtitle is-6">
|
||||
<a class="article-back href="{{ site.url }}/blog">Back</a>
|
||||
</p>
|
||||
<p class="subtitle is-4">
|
||||
{{ page.date | date_to_string }}
|
||||
</p>
|
||||
<h1 class="title is-2">
|
||||
{{ page.title }}
|
||||
</h1>
|
||||
</article>
|
||||
<hr>
|
||||
<div class="content is-medium">
|
||||
{{ content }}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
---
|
||||
layout: post
|
||||
title: "Blog launched, new responsive columns, new helpers"
|
||||
introduction: "First blog post on the newly launched blog! It even has its own [RSS feed](/atom.xml) for those who still use that. This blog will be more frequently updated than the [newsletter](#newsletter), so you can subscribe to either or both, as they will be used for different purposes."
|
||||
color: "danger"
|
||||
name: "Launch!"
|
||||
icon: "rocket"
|
||||
---
|
||||
|
||||
First blog post on the newly launched blog! It even has its own [RSS feed](/atom.xml) for those who still use that. This blog will be more frequently updated than the [newsletter](#newsletter), so you can subscribe to either or both, as they will be used for different purposes.
|
||||
|
||||
@ -1,6 +1,10 @@
|
||||
---
|
||||
layout: post
|
||||
title: "Metro UI CSS grid with Bulma tiles"
|
||||
introduction: "Have you ever wanted to build a **Metro-UI-like grid in CSS**?<br>Thanks to Flexbox and the new [Bulma tiles](http://bulma.io/documentation/grid/tiles/), you now can! And it only requires 1 HTML element: the `tile` element."
|
||||
color: "info"
|
||||
name: "Metro UI"
|
||||
icon: "th-large"
|
||||
---
|
||||
|
||||
Have you ever wanted to build a **Metro-UI-like grid in CSS**?
|
||||
|
||||
@ -3,6 +3,9 @@ layout: post
|
||||
title: "New field element (for better controls)"
|
||||
published: true
|
||||
introduction: "<p>The <code>.control</code> element has been a very versatile container for form controls. But it came at a cost: it was difficult to combine its <strong>block</strong> characteristics with its <strong>inline</strong> variations.</p>"
|
||||
color: "success"
|
||||
name: "Field element"
|
||||
icon: "square-o"
|
||||
---
|
||||
|
||||
**TL;DR: there's a new `.field` container, and `.control` has been re-purposed.**
|
||||
|
||||
@ -1,8 +1,18 @@
|
||||
---
|
||||
layout: post
|
||||
title: "Access previous Bulma versions"
|
||||
introduction: "It is now possible to **access previous versions** of Bulma. Just head towards: [http://bulma.io/versions/](http://bulma.io/versions/)"
|
||||
color: "primary"
|
||||
name: "Versions"
|
||||
icon: "undo"
|
||||
---
|
||||
|
||||
It is now possible to **access previous versions** of Bulma. Just head towards: [http://bulma.io/versions/](http://bulma.io/versions/)
|
||||
|
||||
<figure>
|
||||
<a href="/versions/">
|
||||
<img src="/images/blog/bulma-previous-versions.png" alt="Previous versions of Bulma" width="520" height="240">
|
||||
</a>
|
||||
</figure>
|
||||
|
||||
While only version [0.4.4](http://bulma.io/versions/0.4.4) is accessible now, each **new release** will remain available forever.
|
||||
|
||||
@ -33,3 +33,61 @@
|
||||
color: $text-strong
|
||||
&:hover
|
||||
border-bottom-color: $primary
|
||||
|
||||
.article-image
|
||||
background-color: $primary
|
||||
display: block
|
||||
height: 240px
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
width: 320px
|
||||
position: relative
|
||||
text-align: center
|
||||
@each $name, $pair in $colors
|
||||
$color: nth($pair, 1)
|
||||
&.is-#{$name}
|
||||
background-color: $color
|
||||
&:hover
|
||||
.article-overlay
|
||||
opacity: 0.25
|
||||
.article-icon
|
||||
transform: scale(1.1)
|
||||
.article-title
|
||||
transform: scale(0.9)
|
||||
&.is-single
|
||||
margin-bottom: 2rem
|
||||
width: 100%
|
||||
+mobile
|
||||
height: 180px
|
||||
width: 240px
|
||||
|
||||
|
||||
.article-overlay
|
||||
+overlay
|
||||
background-color: $black
|
||||
opacity: 0
|
||||
transition-duration: $speed
|
||||
transition-property: opacity
|
||||
transition-timing-function: $easing
|
||||
|
||||
.article-icon,
|
||||
.article-title
|
||||
+overlay
|
||||
align-items: center
|
||||
display: flex
|
||||
justify-content: center
|
||||
transition-duration: $speed
|
||||
transition-property: transform
|
||||
transition-timing-function: $easing
|
||||
|
||||
.article-icon
|
||||
color: $black
|
||||
opacity: 0.25
|
||||
.fa
|
||||
font-size: 56px
|
||||
|
||||
.article-title
|
||||
color: $white
|
||||
font-size: 2.5rem
|
||||
font-weight: $weight-bold
|
||||
line-height: 1.25
|
||||
|
||||
@ -5,26 +5,45 @@ route: blog
|
||||
|
||||
{% include blog-hero.html %}
|
||||
|
||||
{% for post in site.posts %}
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-4">
|
||||
<p class="subtitle">
|
||||
{{ post.date | date_to_string }}
|
||||
</p>
|
||||
<h2 class="title">
|
||||
<a href="{{ post.url }}">
|
||||
{{ post.title }}
|
||||
</a>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="column is-8">
|
||||
<div class="content">
|
||||
{{ post.content }}
|
||||
{% for post in site.posts %}
|
||||
<article class="box article">
|
||||
<div class="columns">
|
||||
<div class="column is-narrow">
|
||||
<a class="article-image is-{{ post.color }}" href="{{ post.url }}">
|
||||
<span class="article-overlay"></span>
|
||||
<span class="article-icon">
|
||||
<span class="icon">
|
||||
<i class="fa fa-{{ post.icon }}"></i>
|
||||
</span>
|
||||
</span>
|
||||
<strong class="article-title">
|
||||
{{ post.name }}
|
||||
</strong>
|
||||
</a>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p class="subtitle">
|
||||
{{ post.date | date_to_string }}
|
||||
</p>
|
||||
<h2 class="title">
|
||||
<a href="{{ post.url }}">
|
||||
{{ post.title }}
|
||||
</a>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="content is-medium">
|
||||
{{ post.introduction | markdownify }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% endfor %}
|
||||
|
||||
@ -8432,6 +8432,121 @@ html.route-index #carbon {
|
||||
border-bottom-color: #00d1b2;
|
||||
}
|
||||
|
||||
.article-image {
|
||||
background-color: #00d1b2;
|
||||
display: block;
|
||||
height: 240px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 320px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.article-image.is-white {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.article-image.is-black {
|
||||
background-color: #0a0a0a;
|
||||
}
|
||||
|
||||
.article-image.is-light {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
.article-image.is-dark {
|
||||
background-color: #363636;
|
||||
}
|
||||
|
||||
.article-image.is-primary {
|
||||
background-color: #00d1b2;
|
||||
}
|
||||
|
||||
.article-image.is-info {
|
||||
background-color: #3273dc;
|
||||
}
|
||||
|
||||
.article-image.is-success {
|
||||
background-color: #23d160;
|
||||
}
|
||||
|
||||
.article-image.is-warning {
|
||||
background-color: #ffdd57;
|
||||
}
|
||||
|
||||
.article-image.is-danger {
|
||||
background-color: #ff3860;
|
||||
}
|
||||
|
||||
.article-image:hover .article-overlay {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.article-image:hover .article-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.article-image:hover .article-title {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.article-image.is-single {
|
||||
margin-bottom: 2rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.article-image {
|
||||
height: 180px;
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
.article-overlay {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background-color: #0a0a0a;
|
||||
opacity: 0;
|
||||
transition-duration: 86ms;
|
||||
transition-property: opacity;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
.article-icon,
|
||||
.article-title {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
transition-duration: 86ms;
|
||||
transition-property: transform;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
.article-icon {
|
||||
color: #0a0a0a;
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.article-icon .fa {
|
||||
font-size: 56px;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
color: white;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.example,
|
||||
.structure {
|
||||
border: 1px solid #ffdd57;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user