ipdb/website
1
0
Fork 0
mirror of https://github.com/ipdb/website.git synced 2025-02-14 21:10:26 +01:00
Code Releases Activity

better handle blog images

Browse Source
This commit is contained in:
Matthias Kretschmann 2017-08-29 15:53:29 +02:00
parent ce597d5cc5
commit b4c4b1d651
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 32 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_src/_assets/scss/_media.scss
View File

@ -3,4 +3,5 @@ figure,
svg { svg {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
margin: 0;
} }

36
_src/_assets/scss/page-front.scss
View File

@ -138,17 +138,39 @@
} }
.article { .article {
@media ($screen-sm) { margin-bottom: 6%;
flex: 0 0 45%;
@media ($screen-md) {
flex: 0 0 47%;
} }
img { &:hover,
max-width: 100%; &:focus {
height: auto; .article__title {
color: $link-color;
}
.article__image {
background-color: $link-color;
}
} }
} }
.article__image {
width: 100%;
min-height: 5rem;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
margin-bottom: $spacer / 3;
border: 1px solid $brand-05;
border-radius: 1rem;
}
.article__title { .article__title {
font-size: $font-size-h6; font-size: $font-size-small;
margin-top: 0; color: $text-color;
margin: 0;
align-self: flex-end;
transition: .15s ease-out;
} }

4
_src/index.html
View File

@ -148,9 +148,9 @@ css: page-front
<h2 class="connect__title">{{ content.connect.blog_title }}</h2> <h2 class="connect__title">{{ content.connect.blog_title }}</h2>
<div class="articles"> <div class="articles">
{% for article in site.articles | limit: 4 %} {% for article in site.articles limit: 4 %}
<a class="article" href="{{ article.link }}"> <a class="article" href="{{ article.link }}">
<img src="{{ article.image | escape | strip_html }}" alt=""> <figure class="article__image" style="background-image: url('{{ article.image | escape | strip_html }}')"></figure>
<h1 class="article__title">{{ article.title }}</h1> <h1 class="article__title">{{ article.title }}</h1>
</a> </a>
{% endfor %} {% endfor %}