blob: 320f2e31f208793a2473166c11b5a4d0acf8757c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
## -*- coding: utf-8 -*-
<%block name="content">
<div class="carousel slide d-lg-none" style="height: 10rem;" data-ride="carousel" data-interval="3000">
<div class="carousel-inner">
% for post in posts:
<div class="carousel-item ${'active' if loop.index == 0 else ''}">
<a href="${post.permalink()}">
<img class="d-block img-fluid w-100" src="${post.meta('previewimage')}" alt="large carousel slide" style="height: 160px; object-fit: cover;">
<div class="carousel-caption d-sm-block">
<h1 style="background: rgba(0, 0, 0, 0.75); display: inline; padding: 0.1em; margin: 0;">${post.meta('previewtext', lang) or post.title(lang)}</h1>
</div>
</a>
</div>
% endfor
</div>
</div>
<div class="row d-none d-lg-flex">
% for post in posts:
<div class="col-6 col-sm-4">
<div class="card text-white bg-light shadow-sm">
<div class="card-body">
<img class="card-img-top" style="width: 100%; height: 160px; object-fit: cover;" src="${post.meta('previewimage')}" alt="CCC logo">
<div class="card-img-overlay d-flex flex-column justify-content-end">
<h1 style="background: rgba(0, 0, 0, 0.75); display: inline; padding: 0.1em; margin: 0;" class="card-title">${post.meta('previewtext', lang) or post.title(lang)}</h1>
</div>
</div>
<a href="${post.permalink()}" class="stretched-link"></a>
</div>
</div>
% endfor
</div>
</%block>
|
