Add article image

docs/_layouts/post.html

@@ -7,20 +7,34 @@ route: blog
 
 <section class="section">
   <div class="container">
-    <article class="article {{ page.category | downcase }}{% if page.recommended == true %} recommended{% endif %}">
+    <div class="columns">
-      <p class="subtitle">
+      <div class="column is-offset-2 is-8">
-        <a href="{{ site.url }}/blog">Back</a>
+        <div class="article-image is-single is-{{ page.color }}">
-      </p>
+          <span class="article-overlay"></span>
-      <p class="subtitle is-4">
+          <span class="article-icon">
-        {{ page.date | date_to_string }}
+            <span class="icon">
-      </p>
+              <i class="fa fa-{{ page.icon }}"></i>
-      <h1 class="title is-2">
+            </span>
-        {{ page.title }}
+          </span>
-      </h1>
+          <strong class="article-title">
-      <hr>
+            {{ page.name }}
-      <div class="content is-medium">
+          </strong>
-        {{ content }}
+        </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>

docs/_posts/2016-02-09-blog-launched-new-responsive-columns-new-helpers.md

@@ -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.

docs/_posts/2016-04-11-metro-ui-css-grid-with-bulma-tiles.md

@@ -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**?

docs/_posts/2017-03-10-new-field-element.md

@@ -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.**

docs/_posts/2017-07-24-access-previous-bulma-versions.md

@@ -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.

docs/_sass/specific.sass

@@ -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

docs/blog.html

@@ -5,26 +5,45 @@ route: blog
 
 {% include blog-hero.html %}
 
-{% for post in site.posts %}
   <section class="section">
     <div class="container">
-      <div class="columns">
+      {% for post in site.posts %}
-        <div class="column is-4">
+        <article class="box article">
-          <p class="subtitle">
+          <div class="columns">
-            {{ post.date | date_to_string }}
+            <div class="column is-narrow">
-          </p>
+              <a class="article-image is-{{ post.color }}" href="{{ post.url }}">
-          <h2 class="title">
+                <span class="article-overlay"></span>
-            <a href="{{ post.url }}">
+                <span class="article-icon">
-              {{ post.title }}
+                  <span class="icon">
-            </a>
+                    <i class="fa fa-{{ post.icon }}"></i>
-          </h2>
+                  </span>
-        </div>
+                </span>
-        <div class="column is-8">
+                <strong class="article-title">
-          <div class="content">
+                  {{ post.name }}
-            {{ post.content }}
+                </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>
+        </article>
-      </div>
+      {% endfor %}
     </div>
   </section>
-{% endfor %}

docs/css/bulma-docs.css

@@ -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;