full fledged blog section

_src/_assets/styles/_sections/_section-blog.scss

@@ -3,9 +3,31 @@
 }
 
 .article {
+    @include color-overlay;
+    @include transition;
+    background-size: cover;
+    background-position: center;
+    padding: $spacer;
+    border-radius: $border-radius;
+    overflow: hidden;
+    box-shadow: none;
+    display: flex;
+    align-items: center;
+    min-height: 7rem;
 
+    &:hover,
+    &:focus {
+        background-size: cover;
+        background-position: center;
+        box-shadow: 0 2px 5px rgba($brand-main-blue-dark, .2);
+        transform: translateY(-1px);
+    }
 }
 
 .article__title {
-    @extend .h6;
+    @extend .h6, .transition;
+    margin: 0;
+    color: #fff;
+    position: relative;
+    z-index: 1;
 }

_src/_assets/styles/bigchain/_mixins/_backgrounds.scss

@@ -16,10 +16,6 @@
     p {
         color: $brand-main-gray;
     }
-
-    h1, h2, h3, h4 {
-        color: $brand-main-blue;
-    }
 }
 
 .background--gray {

_src/_assets/styles/bigchain/_variables.scss

@@ -60,7 +60,7 @@ $line-height:               1.5 !default;
 
 $headings-font-family:      inherit !default;
 $headings-font-weight:      $font-weight-light !default;
-$headings-line-height:      1.2 !default;
+$headings-line-height:      1.3 !default;
 $headings-color:            $brand-main-blue-light !default;
 
 

_src/_includes/sections/section-blog.html

@@ -1,24 +1,25 @@
-<section class="section section--blog background--light">
+<section class="section section--blog ">
     <div class="row row--wide">
         <header class="section-header">
             <h1 class="section-title">Hot off the blog</h1>
         </header>
 
-        <div class="grid grid--full grid-medium--fit grid--gutters">
+        <div class="grid grid--full grid-small--half grid-medium--third grid--gutters">
-            {% for article in site.blog | limit: 3 %}
+            {% for article in site.articles | limit: 6 %}
                 <div class="grid__col">
-                    <a class="article article--{{ article.title | downcase | truncatewords: 3, '' | replace: ' ', '-' }}" href="{{ article.link }}">
+                    <a class="article article--{{ article.title | downcase | truncatewords: 3, '' | replace: ' ', '-' }}" href="{{ article.link }}" style="background-image: url('{{ article.image }}')">
-
-                        <!-- <img src="{{ article.image }}" alt="{{ article.title }}"> -->
 
                         <h1 class="article__title">
                             {{ article.title }}
                         </h1>
-                        <p>{{ article.description }}</p>
                     </a>
                 </div>
             {% endfor %}
         </div>
 
+        <p class="text-center">
+            <a class="btn btn-secondary btn-sm" href="{{ site.blog }}">Go to blog</a>
+        </p>
+
     </div>
 </section>

_src/_plugins/blog.rb

@@ -14,24 +14,25 @@ module Jekyll
 
           rss_items = SimpleRSS.parse open('https://blog.bigchaindb.com/feed/')
 
-          # Create a new on-the-fly Jekyll collection called "blog"
+          # Create a new on-the-fly Jekyll collection called "articles"
-          jekyll_items = Jekyll::Collection.new(site, 'blog')
+          jekyll_items = Jekyll::Collection.new(site, 'articles')
-          site.collections['blog'] = jekyll_items
+          site.collections['articles'] = jekyll_items
 
           # Add fake virtual documents to the collection
           rss_items.items.each do |item|
-             title = item.title
+            title = item.title
-             description = item.description
+            link = item.link
-             link = item.link
+
-             image = item.media_content_url
+            # Medium hack: get first image in content, then get smaller image size
-             path = "_rss/" + title.to_s.gsub(':','_') + ".md"
+            image = item.content_encoded[/img.*?src="(.*?)"/i,1].gsub(/max\/(.*)\//, "max/500/")
-             path = site.in_source_dir(path)
+
-             doc = Jekyll::Document.new(path, site: site, collection: jekyll_items)
+            path = '_articles/' + title.to_s.gsub(':','_') + '.md'
-             doc.data['title'] = title
+            path = site.in_source_dir(path)
-             doc.data['description'] = description
+            doc = Jekyll::Document.new(path, site: site, collection: jekyll_items)
-             doc.data['link'] = link
+            doc.data['title'] = title
-             doc.data['image'] = image
+            doc.data['link'] = link
-             jekyll_items.docs << doc
+            doc.data['image'] = image
+            jekyll_items.docs << doc
           end
 
        end