Commit ea30bf27 authored by Martin Schoeler's avatar Martin Schoeler

finish the new thumbnails for the blog

parent d68e953e
......@@ -6,7 +6,7 @@ paginate_path: /blog/page/:num/
paginate: 8
# bump if alterting styles
version: 56
version: 57
# read speed
wpm: 160
......
<a class="card--blog card--blog__image"
href="{{ include.post.url | remove: "index.html" }}"
>
<div
class="card--blog__cover"
{% if include.post.cover %}
style="background-image: url('{{ include.post.cover }}')"
{% else %}
style="background-image: url('/images/blog/post.jpg')"
{% endif %}
></div>
<div class="card--blog__wrap">
<!-- If post has a dateEvent attribute, it is a event post -->
{% if include.post.dateEvent %}
<p class="blog__event-dayweek label--small theme_type--grey type--nomargin">{{ include.post.dateEvent | date: "%a" }}</p>
<h4 class="display theme_type--dark">
{{ include.post.dateEvent | date: "%m.%d" }}
{% if include.post.dateEventEnd %}
— {{ include.post.dateEventEnd | date: "%m.%d" }}
{% endif %}
</h4>
<h3 class="text theme_type--dark type--nomargin">
{% if include.post.type %}<strong>{{ include.post.type }}:</strong> {% endif %}
{{ include.post.title }}</h3>
<div class="space--1"></div>
<p class="blog__event-location text--small theme_type--grey type--nomargin">{{ include.post.location }}</p>
{% else %}
<!-- If not, is a normal blog post -->
<p class="card--blog__meta label--small theme_type--grey">
{{ include.post.date | date: "%b %-d, %Y" }}
{% assign words = include.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">{{ include.post.title }}</h3>
<div class="card--blog__data">
<p class="card--blog__category theme_box--dark-medium theme_type--dark tag">{{ include.post.categories[0] }}</p>
<p class="card--blog__author text--small theme_type--grey">by {{ include.post.author }}</p>
</div>
{% endif %}
</div>
</a>
\ No newline at end of file
......@@ -42,30 +42,7 @@ permalink: /categories/
<h3 class="display--small theme_type--dark blog__section"><strong>Upcoming</strong></h3>
<div class="{% if Upcoming.size > 3 %}blog__category{% else %}blog__category--no-highlight{% endif %}">
{% for post in UpcomingSorted %}
<a
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__wrap">
<p class="blog__event-dayweek label--small theme_type--grey type--nomargin">{{ post.dateEvent | date: "%a" }}</p>
<h4 class="display theme_type--dark">
{{ post.dateEvent | date: "%m.%d" }}
{% if post.dateEventEnd %}
— {{ post.dateEventEnd | date: "%m.%d" }}
{% endif %}
</h4>
<h3 class="text theme_type--dark type--nomargin">
{% if post.type %}<strong>{{ post.type }}:</strong> {% endif %}
{{ post.title }}</h3>
<div class="space--1"></div>
<p class="blog__event-location text--small theme_type--grey type--nomargin">{{ post.location }}</p>
</div>
</a>
{% include blog/article-link.html post=post %}
{% endfor %}
</div>
......@@ -74,28 +51,7 @@ permalink: /categories/
<h3 class="display--small theme_type--dark blog__section"><strong>Past</strong></h3>
<div class="blog__category">
{% for post in Past %}
<a
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__wrap">
<p class="blog__event-dayweek label--small theme_type--grey type--nomargin">{{ post.dateEvent | date: "%a" }}</p>
<h4 class="display theme_type--dark">
{{ post.dateEvent | date: "%m.%d" }}
{% if post.dateEventEnd %}
— {{ post.dateEventEnd | date: "%m.%d" }}
{% endif %}
</h4>
<h3 class="text theme_type--dark type--nomargin"><strong>{{ post.type }}:</strong> {{ post.title }}</h3>
<div class="space--1"></div>
<p class="blog__event-location text--small theme_type--grey type--nomargin">{{ post.location }}</p>
</div>
</a>
{% include blog/article-link.html post=post %}
{% endfor %}
</div>
......@@ -103,29 +59,7 @@ permalink: /categories/
{% else %}
<div class="{% if site.categories[page.category].size > 3 %}blog__category{% else %}blog__category--no-highlight{% endif %}">
{% for post in site.categories[page.category] %}
<a
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__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 }}</p>
</div>
</div>
</a>
{% include blog/article-link.html post=post %}
{% endfor %}
</div>
{% endif %}
......
......@@ -106,33 +106,9 @@ class: post
<small><a href="/category/{{ page.categories[0] | slugify}}" class="button--link">View all</a></small>
</h3>
<div class="flex-grid">
{% for related in RelatedList limit:3 %}
<div class="col">
<a
class="card--blog card--blog__image"
href="{{ related.url | remove: "index.html" }}"
{% if related.cover %}
style="background-image: url('{{ related.cover }}')"
{% else %}
style="background-image: url('/images/blog/post.jpg')"
{% endif %}
>
<div class="card--blog__wrap">
<p class="card--blog__meta label--small theme_type--grey">
{{ related.date | date: "%b %-d, %Y" }}
{% assign words = related.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">{{ related.title }}</h3>
<div class="card--blog__data">
<p class="card--blog__category theme_box--dark-medium theme_type--dark tag">{{ related.categories[0] }}</p>
<p class="card--blog__author text--small theme_type--grey">by {{ related.author }}</p>
</div>
</div>
</a>
</div>
<div class="blog__related">
{% for post in RelatedList limit:3 %}
{% include blog/article-link.html post=post %}
{% endfor %}
</div>
</div>
......
......@@ -66,6 +66,10 @@
transition: all 0.3s ease;
}
@media screen and (max-width: $tablet) {
margin-bottom: 32px;
}
&.card--horizontal {
@media screen and (min-width: $tablet) {
.card--blog__wrap {
......@@ -80,18 +84,11 @@
}
&:hover {
.card--blog__wrap {
background: $brand;
.tag {
background: #fff;
color: $brand;
}
box-shadow: 0 0 0 1em $space-grey;
background: $space-grey;
.card--blog__author,
.card--blog__meta {
color: rgba(255, 255, 255, 0.6);
}
.card--blog__wrap {
background: $space-grey;
}
}
}
......@@ -118,21 +115,23 @@
border-radius: 2px;
height: 100%;
min-width: 6em;
height: 313px;
}
.card--blog__cover {
width: 100%;
height: 65%;
background-size: cover;
height: 193px;
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
transition: background-size 1s;
border-radius: 2px;
}
.card--blog__wrap {
background: rgba($space, 0.9);
border-radius: 2px;
padding: 1.5em;
transition: all 0.3s ease;
padding: 1em 0 0;
}
.card--blog__title {
......
......@@ -148,11 +148,17 @@ body.post {
}
}
.blog__recents {
.blog__recents, .blog__related {
display: grid;
grid-gap: 2em;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(1, 350px);
@media screen and (max-width: $tablet) {
display: flex;
flex-direction: column;
width:100%
}
}
.blog__more-featured {
......@@ -161,6 +167,12 @@ body.post {
grid-gap: 2em;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 350px);
@media screen and (max-width: $tablet) {
display: flex;
flex-direction: column;
width:100%
}
}
}
......@@ -178,15 +190,22 @@ body.post {
&:first-child {
width: 66%;
height: 400px;
.card--blog__cover {
height: 100%;
width: 100%;
}
}
}
@media screen and (min-width: $tablet) {
@supports (display: grid) {
display: grid;
grid-gap: 2em;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 400px repeat(2, 350px);
grid-template-rows: auto;
grid-auto-rows: minmax(350px, auto);
a {
width: 100%;
......@@ -196,6 +215,7 @@ body.post {
grid-row: 1/2;
grid-column: 1/4;
width: 100%;
height: 400px;
.card--blog__cover {
width: 100%;
height: 100%;
......@@ -204,11 +224,18 @@ body.post {
height: 100%;
padding-left: 32px;
padding-right: 16px;
width: 50%;
}
}
}
}
}
@media screen and (max-width: $tablet) {
display: flex;
flex-direction: column;
width:100%
}
}
}
......@@ -279,14 +306,28 @@ body.category {
display: grid;
grid-gap: 2em;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
grid-template-rows: auto;
grid-auto-rows: minmax(350px, auto);
a {
width: 100%;
&:first-child {
grid-row: 1/3;
width: 100%;
flex-direction: row;
grid-row: 1/2;
grid-column: 1/4;
width: 100%;
height: 400px;
.card--blog__cover {
width: 100%;
height: 100%;
}
.card--blog__wrap {
height: 100%;
padding-left: 32px;
padding-right: 16px;
width: 50%;
}
}
}
}
......@@ -308,7 +349,8 @@ body.category {
display: grid;
grid-gap: 2em;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
grid-template-rows: auto;
grid-auto-rows: minmax(350px, auto);
a {
width: 100%;
......@@ -505,3 +547,19 @@ body.category {
}
}
}
.post .app-footer {
background: $space;
&_github {
background-color: $space-grey;
}
&_social {
a {
background-color: $space-grey;
img {
filter: invert(1);
}
}
}
}
\ No newline at end of file
......@@ -279,12 +279,12 @@
margin-bottom: 1em;
@media screen and (min-width: 33em) {
width: calc(100% / 2 - 0.5em);
width: calc(100% / 3 - 0.5em);
}
@media screen and (min-width: 60em) {
margin-bottom: 3em;
width: calc(100% / 3 - 1.5em);
width: calc(100% / 4 - 1.5em);
}
}
......
......@@ -43,33 +43,8 @@ category: home
<h3 class="display--small theme_type--dark blog__section"><strong>Featured</strong></h3>
<div class="blog__featured">
{% for post in FeaturedList limit: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 }}</p>
</div>
</div>
</a>
{% for post in FeaturedList limit:7 %}
{% include blog/article-link.html post=post %}
{% endfor %}
</div>
......@@ -124,73 +99,8 @@ category: home
<div class="blog__recents">
{% for post in paginator.posts limit:3 %}
{% if post.categories contains "Events" and post.location and post.dateEvent %}
<a
class="card--blog card--blog__cover"
href="{{ post.url | remove: "index.html" }}"
>
<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">
{{ post.dateEvent | date: "%m.%d" }}
{% if post.dateEventEnd %}
— {{ post.dateEventEnd | date: "%m.%d" }}
{% endif %}
</h4>
<h3 class="text theme_type--dark type--nomargin">
{% if post.type %}<strong>{{ post.type }}:</strong> {% endif %}
{{ post.title }}
</h3>
<div class="space--1"></div>
<p class="blog__event-location text--small theme_type--grey type--nomargin">{{ post.location }}</p>
</div>
</a>
{% else %}
<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 }}</p>
</div>
</div>
</a>
{% endif %}
{% endfor %}
</div>
<div class="space--3"></div>
</div>
<div class="blog__more-featured">
<h3 class="display--small theme_type--dark blog__section"><strong>More Featured</strong></h3>
<div class="blog__more-featured-grid">
{% for post in FeaturedList limit:11 %}
{% if forloop.index > 5 %}
{% include blog/article-link.html post=post %}
{% else %}
<a
class="card--blog card--blog__image"
href="{{ post.url | remove: "index.html" }}"
......@@ -204,30 +114,44 @@ category: home
{% 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>
<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 }}</p>
</div>
</div>
</a>
{% endif %}
{% endfor %}
</div>
<div class="space--3"></div>
</div>
<div class="card theme_box--dark">
<p class="label theme_type--grey">RSS feed</p>
<p class="theme_type--dark">Stay up to date with all things open source communication!</p>
<a href="/feed.xml" target="_blank" class="button--link button--with-arrow">Subscribe to updates</a>
<div class="blog__more-featured">
<h3 class="display--small theme_type--dark blog__section"><strong>More Featured</strong></h3>
<div class="blog__more-featured-grid">
{% for post in FeaturedList limit:12 %}
{% if forloop.index > 7 %}
{% include blog/article-link.html post=post %}
{% endif %}
{% endfor %}
<div class="card theme_box--dark">
<p class="label theme_type--grey">RSS feed</p>
<p class="theme_type--dark">Stay up to date with all things open source communication!</p>
<a href="/feed.xml" target="_blank" class="button--link button--with-arrow">Subscribe to updates</a>
</div>
</div>
<div class="space--3"></div>
</div>
</div>
......@@ -244,55 +168,9 @@ category: home
{% for post in paginator.posts %}
{% if post.categories contains "Events" and post.location and post.dateEvent %}
<a
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__wrap">
<p class="blog__event-dayweek label--small theme_type--grey type--nomargin">{{ post.dateEvent | date: "%a" }}</p>
<h4 class="display theme_type--dark">
{{ post.dateEvent | date: "%m.%d" }}
{% if post.dateEventEnd %}
— {{ post.dateEventEnd | date: "%m.%d" }}
{% endif %}
</h4>
<h3 class="text theme_type--dark type--nomargin">
{% if post.type %}<strong>{{ post.type }}:</strong> {% endif %}
{{ post.title }}
</h3>
<div class="space--1"></div>
<p class="blog__event-location text--small theme_type--grey type--nomargin">{{ post.location }}</p>
</div>
</a>
{% include blog/article-link.html post=post %}
{% else %}
<a
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__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 }}</p>
</div>
</div>
</a>
{% include blog/article-link.html post=post %}
{% endif %}
{% endfor %}
......
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