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/ ...@@ -6,7 +6,7 @@ paginate_path: /blog/page/:num/
paginate: 8 paginate: 8
# bump if alterting styles # bump if alterting styles
version: 56 version: 57
# read speed # read speed
wpm: 160 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/ ...@@ -42,30 +42,7 @@ permalink: /categories/
<h3 class="display--small theme_type--dark blog__section"><strong>Upcoming</strong></h3> <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 %}"> <div class="{% if Upcoming.size > 3 %}blog__category{% else %}blog__category--no-highlight{% endif %}">
{% for post in UpcomingSorted %} {% for post in UpcomingSorted %}
<a {% include blog/article-link.html post=post %}
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>
{% endfor %} {% endfor %}
</div> </div>
...@@ -74,28 +51,7 @@ permalink: /categories/ ...@@ -74,28 +51,7 @@ permalink: /categories/
<h3 class="display--small theme_type--dark blog__section"><strong>Past</strong></h3> <h3 class="display--small theme_type--dark blog__section"><strong>Past</strong></h3>
<div class="blog__category"> <div class="blog__category">
{% for post in Past %} {% for post in Past %}
<a {% include blog/article-link.html post=post %}
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>
{% endfor %} {% endfor %}
</div> </div>
...@@ -103,29 +59,7 @@ permalink: /categories/ ...@@ -103,29 +59,7 @@ permalink: /categories/
{% else %} {% else %}
<div class="{% if site.categories[page.category].size > 3 %}blog__category{% else %}blog__category--no-highlight{% endif %}"> <div class="{% if site.categories[page.category].size > 3 %}blog__category{% else %}blog__category--no-highlight{% endif %}">
{% for post in site.categories[page.category] %} {% for post in site.categories[page.category] %}
<a {% include blog/article-link.html post=post %}
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>
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
......
...@@ -106,33 +106,9 @@ class: post ...@@ -106,33 +106,9 @@ class: post
<small><a href="/category/{{ page.categories[0] | slugify}}" class="button--link">View all</a></small> <small><a href="/category/{{ page.categories[0] | slugify}}" class="button--link">View all</a></small>
</h3> </h3>
<div class="flex-grid"> <div class="blog__related">
{% for related in RelatedList limit:3 %} {% for post in RelatedList limit:3 %}
<div class="col"> {% include blog/article-link.html post=post %}
<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>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
......
...@@ -66,6 +66,10 @@ ...@@ -66,6 +66,10 @@
transition: all 0.3s ease; transition: all 0.3s ease;
} }
@media screen and (max-width: $tablet) {
margin-bottom: 32px;
}
&.card--horizontal { &.card--horizontal {
@media screen and (min-width: $tablet) { @media screen and (min-width: $tablet) {
.card--blog__wrap { .card--blog__wrap {
...@@ -80,18 +84,11 @@ ...@@ -80,18 +84,11 @@
} }
&:hover { &:hover {
.card--blog__wrap { box-shadow: 0 0 0 1em $space-grey;
background: $brand; background: $space-grey;
.tag {
background: #fff;
color: $brand;
}
.card--blog__author, .card--blog__wrap {
.card--blog__meta { background: $space-grey;
color: rgba(255, 255, 255, 0.6);
}
} }
} }
} }
...@@ -118,21 +115,23 @@ ...@@ -118,21 +115,23 @@
border-radius: 2px; border-radius: 2px;
height: 100%; height: 100%;
min-width: 6em; min-width: 6em;
height: 313px;
} }
.card--blog__cover { .card--blog__cover {
width: 100%; width: 100%;
height: 65%; height: 193px;
background-size: cover; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center center; background-position: center center;
transition: background-size 1s;
border-radius: 2px;
} }
.card--blog__wrap { .card--blog__wrap {
background: rgba($space, 0.9); background: rgba($space, 0.9);
border-radius: 2px; border-radius: 2px;
padding: 1.5em; padding: 1em 0 0;
transition: all 0.3s ease;
} }
.card--blog__title { .card--blog__title {
......
...@@ -148,11 +148,17 @@ body.post { ...@@ -148,11 +148,17 @@ body.post {
} }
} }
.blog__recents { .blog__recents, .blog__related {
display: grid; display: grid;
grid-gap: 2em; grid-gap: 2em;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(1, 350px); grid-template-rows: repeat(1, 350px);
@media screen and (max-width: $tablet) {
display: flex;
flex-direction: column;
width:100%
}
} }
.blog__more-featured { .blog__more-featured {
...@@ -161,6 +167,12 @@ body.post { ...@@ -161,6 +167,12 @@ body.post {
grid-gap: 2em; grid-gap: 2em;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 350px); 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 { ...@@ -178,15 +190,22 @@ body.post {
&:first-child { &:first-child {
width: 66%; width: 66%;
height: 400px;
.card--blog__cover {
height: 100%;
width: 100%;
}
} }
} }
@media screen and (min-width: $tablet) { @media screen and (min-width: $tablet) {
@supports (display: grid) { @supports (display: grid) {
display: grid; display: grid;
grid-gap: 2em; grid-gap: 2em;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-template-rows: 400px repeat(2, 350px); grid-template-rows: auto;
grid-auto-rows: minmax(350px, auto);
a { a {
width: 100%; width: 100%;
...@@ -196,6 +215,7 @@ body.post { ...@@ -196,6 +215,7 @@ body.post {
grid-row: 1/2; grid-row: 1/2;
grid-column: 1/4; grid-column: 1/4;
width: 100%; width: 100%;
height: 400px;
.card--blog__cover { .card--blog__cover {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -204,11 +224,18 @@ body.post { ...@@ -204,11 +224,18 @@ body.post {
height: 100%; height: 100%;
padding-left: 32px; padding-left: 32px;
padding-right: 16px; padding-right: 16px;
width: 50%;
} }
} }
} }
} }
} }
@media screen and (max-width: $tablet) {
display: flex;
flex-direction: column;
width:100%
}
} }
} }
...@@ -279,14 +306,28 @@ body.category { ...@@ -279,14 +306,28 @@ body.category {
display: grid; display: grid;
grid-gap: 2em; grid-gap: 2em;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto); grid-template-rows: auto;
grid-auto-rows: minmax(350px, auto);
a { a {
width: 100%; width: 100%;
&:first-child { &:first-child {
grid-row: 1/3; flex-direction: row;
width: 100%; 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 { ...@@ -308,7 +349,8 @@ body.category {
display: grid; display: grid;
grid-gap: 2em; grid-gap: 2em;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto); grid-template-rows: auto;
grid-auto-rows: minmax(350px, auto);
a { a {
width: 100%; width: 100%;
...@@ -505,3 +547,19 @@ body.category { ...@@ -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 @@ ...@@ -279,12 +279,12 @@
margin-bottom: 1em; margin-bottom: 1em;
@media screen and (min-width: 33em) { @media screen and (min-width: 33em) {
width: calc(100% / 2 - 0.5em); width: calc(100% / 3 - 0.5em);
} }
@media screen and (min-width: 60em) { @media screen and (min-width: 60em) {
margin-bottom: 3em; margin-bottom: 3em;
width: calc(100% / 3 - 1.5em); width: calc(100% / 4 - 1.5em);
} }
} }
......
This diff is collapsed.
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