Commit d68e953e authored by Martin Schoeler's avatar Martin Schoeler

[WIP] Improve the blog main page articles

parent de5b4e11
......@@ -136,6 +136,7 @@ body.post {
.blog__col-recents {
@include justify-content(space-between);
flex-direction: column;
// only IE
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
......@@ -147,6 +148,22 @@ body.post {
}
}
.blog__recents {
display: grid;
grid-gap: 2em;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(1, 350px);
}
.blog__more-featured {
&-grid {
display: grid;
grid-gap: 2em;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 350px);
}
}
//
// Featured
//
......
......@@ -111,7 +111,7 @@ category: home
<div class="flex-grid blog__col-recents">
<div class="col">
<div class="row">
<h3 class="display--small theme_type--dark blog__section">
<strong>
<span>Recents </span>
......@@ -122,17 +122,21 @@ category: home
</h3>
<div class="blog__recents">
{% for post in paginator.posts %}
{% for post in paginator.posts limit:3 %}
{% if post.categories contains "Events" and post.location and post.dateEvent %}
<a
class="card--blog card--blog__image card--horizontal"
class="card--blog card--blog__cover"
href="{{ post.url | remove: "index.html" }}"
{% if post.cover %}
style="background-image: url('{{ post.cover }}')"
{% else %}
style="background-image: url('/images/blog/post.jpg')"
{% endif %}
>
<div
class="card--blog__image"
{% if post.cover %}
style="background-image: url('{{ post.cover }}')"
{% else %}
style="background-image: url('/images/blog/post.jpg')"
{% endif %}
></div>
<div class="card--blog__wrap">
<p class="blog__event-dayweek label--small theme_type--grey type--nomargin">{{ post.dateEvent | date: "%a" }}</p>
<h4 class="display theme_type--dark">
......@@ -151,14 +155,17 @@ category: home
</a>
{% else %}
<a
class="card--blog card--blog__image card--horizontal"
class="card--blog card--blog__image"
href="{{ post.url | remove: "index.html" }}"
{% if post.cover %}
style="background-image: url('{{ post.cover }}')"
{% else %}
style="background-image: url('/images/blog/post.jpg')"
{% endif %}
>
<div
class="card--blog__cover"
{% if post.cover %}
style="background-image: url('{{ post.cover }}')"
{% else %}
style="background-image: url('/images/blog/post.jpg')"
{% endif %}
></div>
<div class="card--blog__wrap">
<p class="card--blog__meta label--small theme_type--grey">
{{ post.date | date: "%b %-d, %Y" }}
......@@ -176,43 +183,43 @@ category: home
{% endif %}
{% endfor %}
</div>
<div class="space--3"></div>
</div>
<div class="col--third">
<div class="blog__more-featured">
<h3 class="display--small theme_type--dark blog__section"><strong>More Featured</strong></h3>
{% for post in FeaturedList %}
{% if forloop.index > 5 %}
<div class="flex-grid--nobreak">
<a
href="{{ post.url | remove: "index.html" }}"
class="no-gutter col--third"
>
<div
class="card--blog__image"
{% if post.cover %}
style="background-image: url('{{ post.cover }}')"
{% else %}
style="background-image: url('/images/blog/post.jpg')"
{% endif %}
></div>
</a>
<a class="no-gutter col mini-gutter" href="{{ post.url | remove: "index.html" }}">
<p class="card--blog__meta label--small theme_type--grey">
{{ post.date | date: "%b %-d, %Y" }}
{% assign words = post.content | number_of_words %}
{% if words < site.wpm %} 1 min {% else %} {{ words | divided_by: site.wpm }} mins {% endif %} read
</p>
<h3 class="card--blog__title theme_type--dark">{{ post.title }}</h3>
<div class="card--blog__data">
<p class="card--blog__category theme_box--dark-medium theme_type--dark tag">{{ post.categories[0] }}</p>
<p class="card--blog__author text--small theme_type--grey">by {{ post.author | truncate: 20 }}</p>
</div>
</a>
</div>
<div class="card--blog__separator"></div>
{% endif %}
{% endfor %}
<div class="blog__more-featured-grid">
{% for post in FeaturedList limit:11 %}
{% if forloop.index > 5 %}
<a
class="card--blog card--blog__image"
href="{{ post.url | remove: "index.html" }}"
>
<div
class="card--blog__cover"
{% if post.cover %}
style="background-image: url('{{ post.cover }}')"
{% else %}
style="background-image: url('/images/blog/post.jpg')"
{% endif %}
></div>
<div class="card--blog__wrap">
<p class="card--blog__meta label--small theme_type--grey">
{{ post.date | date: "%b %-d, %Y" }}
{% assign words = post.content | number_of_words %}
{% if words < site.wpm %} 1 min {% else %} {{ words | divided_by: site.wpm }} mins {% endif %} read
</p>
<h3 class="card--blog__title theme_type--dark">{{ post.title }}</h3>
<div class="card--blog__data">
<p class="card--blog__category theme_box--dark-medium theme_type--dark tag">{{ post.categories[0] }}</p>
<p class="card--blog__author text--small theme_type--grey">by {{ post.author | truncate: 20 }}</p>
</div>
</div>
</a>
{% endif %}
{% endfor %}
</div>
<div class="space--3"></div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment