full fledged blog section

This commit is contained in:
Matthias Kretschmann 2017-05-23 21:55:10 +02:00
parent e71b01d51b
commit b7fbaac438
Signed by: m
GPG Key ID: BD3C1F3EDD7831FC
5 changed files with 48 additions and 28 deletions

View File

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

View File

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

View File

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

View File

@ -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">
{% for article in site.blog | limit: 3 %}
<div class="grid grid--full grid-small--half grid-medium--third grid--gutters">
{% for article in site.articles | limit: 6 %}
<div class="grid__col">
<a class="article article--{{ article.title | downcase | truncatewords: 3, '' | replace: ' ', '-' }}" href="{{ article.link }}">
<!-- <img src="{{ article.image }}" alt="{{ article.title }}"> -->
<a class="article article--{{ article.title | downcase | truncatewords: 3, '' | replace: ' ', '-' }}" href="{{ article.link }}" style="background-image: url('{{ article.image }}')">
<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>

View File

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