-
Huste, Tobias authored
- Use image overlays for the cards - Use mix-blend-mode to make contrast high enough - Show post image if one is defined
Huste, Tobias authored- Use image overlays for the cards - Use mix-blend-mode to make contrast high enough - Show post image if one is defined
post_card.html 1.11 KiB
{%- comment -%}
This is a card displaying post title and date.
Parameters:
post: The post which sould be displayed on the card
{%- endcomment -%}
{%- if include.post.title_image == "default" %}
{%- assign img_url = site.directory.images
| append: 'HIFIS_LOGO_news_cards_equal.svg'
| strip
| relative_url -%}
{%- else -%}
{%- assign img_url = site.directory.large_images
| append: "phone/"
| append: include.post.title_image
| strip
| relative_url -%}
{%- endif -%}
<div class="card image-card bg-primary">
<img src="{{ img_url }}" class="card-img" alt="Title image for {{ post.title }}">
<div class="card-img-overlay">
<div class="card-title">
<span class="badge badge-secondary">
<i class="fas fa-calendar-day" aria-hidden="true"></i>
{{ include.post.data | date: "%d. %b. %y" }}
</span>
</div>
<div class="card-text">
<a href="{{ include.post.url | relative_url }}" class="stretched-link">
<h4>{{ include.post.title }}</h4>
</a>
</div>
</div>
</div>